Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

I made a little experimental three.js landing page with Claude Code. And I’ve open-sourced the whole thing. Live: Repo:

hxmzaehsan's profile picture

Hamza Ehsan

16,120 subscribers

10,367 görüntüleme • 1 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

41 Yorum

Matt profil fotoğrafı
Matt1 ay önce

Okey I see 👀🔥

Hamza Ehsan profil fotoğrafı
Hamza Ehsan1 ay önce

👀🍄

Ramish profil fotoğrafı
Ramish1 ay önce

Incredible 🔥

Hamza Ehsan profil fotoğrafı
Hamza Ehsan1 ay önce

thank you sir

Hamzah profil fotoğrafı
Hamzah1 ay önce

Ohhhh, dont mind if I train my claude with this project. Awesome work!

Hamza Ehsan profil fotoğrafı
Hamza Ehsan1 ay önce

do it bro appreciate you

Omar Prado | Building with Framer profil fotoğrafı
Omar Prado | Building with Framer1 ay önce

This is amazing!

Hamza Ehsan profil fotoğrafı
Hamza Ehsan1 ay önce

thansk man!

Tarun Baskar profil fotoğrafı
Tarun Baskar1 ay önce

Man this is cleannnn 🔥. Is there any way to make stuff like these into Framer templates?

Hamza Ehsan profil fotoğrafı
Hamza Ehsan1 ay önce

thanks man. Got no idea tbh

Akriti profil fotoğrafı
Akriti1 ay önce

this is so cool!

Hamza Ehsan profil fotoğrafı
Hamza Ehsan1 ay önce

thank you!

Amani • Design Partner profil fotoğrafı
Amani • Design Partner1 ay önce

Amazing experiment. I think i should try something

Hamza Ehsan profil fotoğrafı
Hamza Ehsan1 ay önce

yeah it's fun man

Tamas Bodo profil fotoğrafı
Tamas Bodo1 ay önce

wow, thats pretty dope!

Michael Slotta profil fotoğrafı
Michael Slotta1 ay önce

@framer creator -> @claude creator. 👀

Juan @ Designrise profil fotoğrafı
Juan @ Designrise1 ay önce

cool stuff

Scratch UI profil fotoğrafı
Scratch UI1 ay önce

Amazing

Hamza Ehsan profil fotoğrafı
Hamza Ehsan1 ay önce

thanks man

Xander profil fotoğrafı
Xander1 ay önce

So cool! love this

Hamza Ehsan profil fotoğrafı
Hamza Ehsan1 ay önce

🙏🙏

Tanjim profil fotoğrafı
Tanjim1 ay önce

Bro insane

Mehak Jahangir profil fotoğrafı
Mehak Jahangir1 ay önce

the neon city glow is stunning

Hamza Ehsan profil fotoğrafı
Hamza Ehsan1 ay önce

appreciate it 🙏

Rakibul profil fotoğrafı
Rakibul1 ay önce

ahah.. really amazing work

dhinna ship .ico profil fotoğrafı
dhinna ship .ico1 ay önce

How did Claude handle the three.js lighting setup for the glow?

Nick profil fotoğrafı
Nick1 ay önce

this is rad. so experiential

Eamin profil fotoğrafı
Eamin1 ay önce

Absolutely loving the visual glow

Taufiq Rahman profil fotoğrafı
Taufiq Rahman1 ay önce

Really cool!

Tiny | AI 创业版 profil fotoğrafı
Tiny | AI 创业版1 ay önce

What took the most manual correction after Claude’s first pass: the three.js scene itself or the interaction details around it?

Hammad Arif profil fotoğrafı
Hammad Arif1 ay önce

Nice

Sha profil fotoğrafı
Sha1 ay önce

Cool stuff 🔥

Andy Z profil fotoğrafı
Andy Z1 ay önce

The useful constraint for a landing page is time-to-first-interaction. Three.js work can look lightweight in a clip while hiding a large asset budget. Publishing both the live page and repo makes performance part of the work—not a hidden afterthought.

Raviteja Karrothu profil fotoğrafı
Raviteja Karrothu1 ay önce

Really cool

Paul Varghese profil fotoğrafı
Paul Varghese1 ay önce

Excellent work!

Zain Malik profil fotoğrafı
Zain Malik1 ay önce

Cool

Tim Akihiro | useframix.com profil fotoğrafı
Tim Akihiro | useframix.com1 ay önce

cookin but please stop the fake Japanese. if you need translation, hmm

Tanvir Ahammed | Product Designer profil fotoğrafı
Tanvir Ahammed | Product Designer1 ay önce

This is really incredible!

Rakibul profil fotoğrafı
Rakibul1 ay önce

yes, i forked it man ❤️‍🔥

Rakibul profil fotoğrafı
Rakibul1 ay önce

majestic work

Arpit Chandak profil fotoğrafı
Arpit Chandak1 ay önce

literally so dopee

Benzer Videolar

I open-sourced the Kage landing page and the three.js skills behind it. The whole thing is under 1mb of three.js and code, 3mb with the hq png images. For a site where every section scrolls through a 3D world, that's surprisingly good. Live site: Repo: Skills: - build-threejs-scroll-worlds - falling-leaves - pointer-trail-emitter Btw this took a lot of tokens and prompts. A follow helps if you want more of these.
0:34

I open-sourced the Kage landing page and the three.js skills behind it. The whole thing is under 1mb of three.js and code, 3mb with the hq png images. For a site where every section scrolls through a 3D world, that's surprisingly good. Live site: Repo: Skills: - build-threejs-scroll-worlds - falling-leaves - pointer-trail-emitter Btw this took a lot of tokens and prompts. A follow helps if you want more of these.

Meng To

468,445 görüntüleme • 1 ay önce

Building a 3D Landing Page with Claude Code + Blender + Three.js.
8:53

Building a 3D Landing Page with Claude Code + Blender + Three.js.

Grant ❂

31,267 görüntüleme • 1 ay önce

I open-sourced the three.js site I built with Fable 5.1. I pushed the Kyoto theme further with tatami spaces, sliding doors, a 3D plastic menu, and a retro footer animation. It's surprising how much you can reshape when the whole experience is procedural code. Live site: GitHub:
0:54

I open-sourced the three.js site I built with Fable 5.1. I pushed the Kyoto theme further with tatami spaces, sliding doors, a 3D plastic menu, and a retro footer animation. It's surprising how much you can reshape when the whole experience is procedural code. Live site: GitHub:

Meng To

44,518 görüntüleme • 28 gün önce

Just open-sourced Open Design Skills 🚀 Your Claude Code still ships ugly web pages. With this design system, any landing page, slide deck, letter, resume, or portfolio gets a world-class, magazine-grade look ✉️.
0:21

Just open-sourced Open Design Skills 🚀 Your Claude Code still ships ugly web pages. With this design system, any landing page, slide deck, letter, resume, or portfolio gets a world-class, magazine-grade look ✉️.

Tom Huang

101,004 görüntüleme • 5 ay önce

I open-sourced the Sylva three.js site and the skills behind it. I started with one reference and asked Opus 5 to recreate it in Three.js as a single HTML file (looped for 2 hours). The moss root is procedural geometry with around 130,000 instanced blades, and all the code is under 1 MB. Live site: Repo: I turned the main interactions into three reusable skills: - threejs-wireframe-scan-reveal - threejs-pointer-orbit - threejs-gpu-particle-spray Skills repo:
0:38

I open-sourced the Sylva three.js site and the skills behind it. I started with one reference and asked Opus 5 to recreate it in Three.js as a single HTML file (looped for 2 hours). The moss root is procedural geometry with around 130,000 instanced blades, and all the code is under 1 MB. Live site: Repo: I turned the main interactions into three reusable skills: - threejs-wireframe-scan-reveal - threejs-pointer-orbit - threejs-gpu-particle-spray Skills repo:

Meng To

134,202 görüntüleme • 1 ay önce

I recorded a 40-min tutorial on how to create three.js landing pages using Claude Code and Opus 5
40:11

I recorded a 40-min tutorial on how to create three.js landing pages using Claude Code and Opus 5

Meng To

272,316 görüntüleme • 1 ay önce

I vibecoded this neural network visualization for my students and open sourced it. It shows a simple MLP trained on MNIST handwritten digits at several training steps. The visualization is using Three.js and it comes with training code in PyTorch . Link + repo 👇
1:00

I vibecoded this neural network visualization for my students and open sourced it. It shows a simple MLP trained on MNIST handwritten digits at several training steps. The visualization is using Three.js and it comes with training code in PyTorch . Link + repo 👇

David Finsterwalder | eu/acc

488,228 görüntüleme • 10 ay önce

Many kept asking how I build my game with AI. Today I open-sourced the whole workspace. A year of building went into it: one repo that keeps project context, knowledge and workflows in one place, so Claude Code, Codex, Blender and Unity all work from the same memory. Every asset in my game goes through it. Full walkthrough and setup:
0:45

Many kept asking how I build my game with AI. Today I open-sourced the whole workspace. A year of building went into it: one repo that keeps project context, knowledge and workflows in one place, so Claude Code, Codex, Blender and Unity all work from the same memory. Every asset in my game goes through it. Full walkthrough and setup:

Stefan 3D AI

18,470 görüntüleme • 10 gün önce

I ran Opus 5 for two hours to recreate Sakura Crossing as an explorable Three.js version of San Francisco. I had Codex use the Claude Code CLI, so the two agents worked on the same build. The whole site is packaged as a single HTML file. Three.js site: Original repo:
0:31

I ran Opus 5 for two hours to recreate Sakura Crossing as an explorable Three.js version of San Francisco. I had Codex use the Claude Code CLI, so the two agents worked on the same build. The whole site is packaged as a single HTML file. Three.js site: Original repo:

Meng To

25,186 görüntüleme • 2 ay önce

I made a three.js landing page with 3D scrolling for every section of the site. Since AI got so good with 3D, you can replace videos with 3D instead. Apart from images, the whole site is 922 KB on disk, 290 KB gzipped. That's insane when a scrolling video site runs 20-100mb at 1080p depending on length. As usual I had to prompt for improved textures, lighting and alpha masking. I used Claude Code (desktop) with Opus 5, Higgsfield for images, and for the cloth effect on them. Inspiration was Daniel Snow's awesome landing page: Let me know if I should open-source. Don't wanna share too many without people asking.
0:38

I made a three.js landing page with 3D scrolling for every section of the site. Since AI got so good with 3D, you can replace videos with 3D instead. Apart from images, the whole site is 922 KB on disk, 290 KB gzipped. That's insane when a scrolling video site runs 20-100mb at 1080p depending on length. As usual I had to prompt for improved textures, lighting and alpha masking. I used Claude Code (desktop) with Opus 5, Higgsfield for images, and for the cloth effect on them. Inspiration was Daniel Snow's awesome landing page: Let me know if I should open-source. Don't wanna share too many without people asking.

Meng To

611,417 görüntüleme • 1 ay önce

I open-sourced ThreeUI, my library of three.js components and landing pages. 160+ are free, and the tool is free too. It includes procedural 3D hero sections, icons, and motion designs. Copy the prompt or source, give it to your agent, then change the theme, lighting, motion or layout. Live site: Repo: I'm adding a lot more soon. Pro comes with 50+ extra components, MCP, and skills. Early adopters get 50% off right now.
0:49

I open-sourced ThreeUI, my library of three.js components and landing pages. 160+ are free, and the tool is free too. It includes procedural 3D hero sections, icons, and motion designs. Copy the prompt or source, give it to your agent, then change the theme, lighting, motion or layout. Live site: Repo: I'm adding a lot more soon. Pro comes with 50+ extra components, MCP, and skills. Early adopters get 50% off right now.

Meng To

1,333,569 görüntüleme • 1 ay önce

You can now edit HyperFrames’ Timeline directly! Drag in preview → video updates When Claude Code struggles with timing, you can give it a hand Experimental, open sourced in @hyperframes/player $ npx hyperframes upgrade RT + Comment "Timeline" for source code (must follow)
0:33

You can now edit HyperFrames’ Timeline directly! Drag in preview → video updates When Claude Code struggles with timing, you can give it a hand Experimental, open sourced in @hyperframes/player $ npx hyperframes upgrade RT + Comment "Timeline" for source code (must follow)

HeyGen

729,761 görüntüleme • 5 ay önce

The response to the Marketing Skills for Claude Code repo I shared was unreal 🤯 BUT, I realized that most marketers still don't even know what a Terminal is. So I made a step-by-step guide to get up and running with agentic AI tools like Claude Code.
0:23

The response to the Marketing Skills for Claude Code repo I shared was unreal 🤯 BUT, I realized that most marketers still don't even know what a Terminal is. So I made a step-by-step guide to get up and running with agentic AI tools like Claude Code.

Corey Haines

30,246 görüntüleme • 8 ay önce

Claude Code used 3x fewer tokens with one change: - Before: 10.4M tokens · 10 errors · $9.21 - After: 3.7M tokens · 0 errors · $2.81 I used Insforge Skills + CLI as the backend context engineering layer for Claude Code (open-source and local). Repo:
0:51

Claude Code used 3x fewer tokens with one change: - Before: 10.4M tokens · 10 errors · $9.21 - After: 3.7M tokens · 0 errors · $2.81 I used Insforge Skills + CLI as the backend context engineering layer for Claude Code (open-source and local). Repo:

Avi Chawla

295,077 görüntüleme • 5 ay önce

This is a japanese house-tour landing page made in three.js with Fable 5.1 using the dream-loop skill. Live site: It's crazy how realistic it looks even though it's all code and under 1 MB (except images). You can tour every room, switch between seasons, see light rays through the house, and watch koi swim through realistic water. The secret sauce to ultra-realistic 3d in code is a loop like this: dream-loop gets the agent to generate a target image, compare the live 3d against it with a separate critic, and keep refining the result. Skill: Let me know if I should open-source the page.
1:19

This is a japanese house-tour landing page made in three.js with Fable 5.1 using the dream-loop skill. Live site: It's crazy how realistic it looks even though it's all code and under 1 MB (except images). You can tour every room, switch between seasons, see light rays through the house, and watch koi swim through realistic water. The secret sauce to ultra-realistic 3d in code is a loop like this: dream-loop gets the agent to generate a target image, compare the live 3d against it with a separate critic, and keep refining the result. Skill: Let me know if I should open-source the page.

Meng To

66,566 görüntüleme • 16 gün önce

last year we wasted $120K and 6 months on a fancy landing page this year I vibe coded a better one in a weekend starting with a very simple claude code prompt:
0:21

last year we wasted $120K and 6 months on a fancy landing page this year I vibe coded a better one in a weekend starting with a very simple claude code prompt:

⊣ ⊃⋃⋂∈ ⊢

11,023 görüntüleme • 6 ay önce

last year we wasted $120K and 6 months on a fancy landing page this year I vibe coded a better one in a weekend starting with a very simple claude code prompt:
0:33

last year we wasted $120K and 6 months on a fancy landing page this year I vibe coded a better one in a weekend starting with a very simple claude code prompt:

brett goldstein

58,437 görüntüleme • 6 ay önce

Claude Code Templates now has a web interface for browsing and contributing templates 🙌 What it does: Install templates for different languages/frameworks to get started with Claude Code faster. How to use: - Go to - Run: npm install -g claude-code-templates - Pick a template from the site - Copy and run the template command - Start coding with Claude Code The whole thing runs on GitHub - no fancy backend, no hidden stuff. Everything you're installing is right there in the repo for you to inspect. Contributing: Want to add your own template? Just follow the contribution guide and send a PR. Once merged, it automatically shows up on the site. That's it... nothing fancy, just something to save a few minutes when starting new projects with Claude Code Repo:
2:15

Claude Code Templates now has a web interface for browsing and contributing templates 🙌 What it does: Install templates for different languages/frameworks to get started with Claude Code faster. How to use: - Go to - Run: npm install -g claude-code-templates - Pick a template from the site - Copy and run the template command - Start coding with Claude Code The whole thing runs on GitHub - no fancy backend, no hidden stuff. Everything you're installing is right there in the repo for you to inspect. Contributing: Want to add your own template? Just follow the contribution guide and send a PR. Once merged, it automatically shows up on the site. That's it... nothing fancy, just something to save a few minutes when starting new projects with Claude Code Repo:

Daniel San

60,766 görüntüleme • 1 yıl önce