Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

Hamza Ehsan

16,120 subscribers

10,367 views • 1 month ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

41 Comments

Matt1 month ago

Okey I see 👀🔥

Hamza Ehsan1 month ago

👀🍄

Ramish1 month ago

Incredible 🔥

Hamza Ehsan1 month ago

thank you sir

Hamzah1 month ago

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

Hamza Ehsan1 month ago

do it bro appreciate you

Omar Prado | Building with Framer1 month ago

This is amazing!

Hamza Ehsan1 month ago

thansk man!

Tarun Baskar1 month ago

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

Hamza Ehsan1 month ago

thanks man. Got no idea tbh

Akriti1 month ago

this is so cool!

Hamza Ehsan1 month ago

thank you!

Amani • Design Partner1 month ago

Amazing experiment. I think i should try something

Hamza Ehsan1 month ago

yeah it's fun man

Tamas Bodo1 month ago

wow, thats pretty dope!

Michael Slotta1 month ago

@framer creator -> @claude creator. 👀

Juan @ Designrise1 month ago

cool stuff

Scratch UI1 month ago

Amazing

Hamza Ehsan1 month ago

thanks man

Xander1 month ago

So cool! love this

Hamza Ehsan1 month ago

🙏🙏

Tanjim1 month ago

Bro insane

Mehak Jahangir1 month ago

the neon city glow is stunning

Hamza Ehsan1 month ago

appreciate it 🙏

Rakibul1 month ago

ahah.. really amazing work

dhinna ship .ico1 month ago

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

Nick1 month ago

this is rad. so experiential

Eamin1 month ago

Absolutely loving the visual glow

Taufiq Rahman1 month ago

Really cool!

Tiny | AI 创业版1 month ago

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

Hammad Arif1 month ago

Nice

Sha1 month ago

Cool stuff 🔥

Andy Z1 month ago

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 Karrothu1 month ago

Really cool

Paul Varghese1 month ago

Excellent work!

Zain Malik1 month ago

Cool

Tim Akihiro | useframix.com1 month ago

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

Tanvir Ahammed | Product Designer1 month ago

This is really incredible!

Rakibul1 month ago

yes, i forked it man ❤️‍🔥

Rakibul1 month ago

majestic work

Arpit Chandak1 month ago

literally so dopee

Related Videos

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.

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 views • 1 month ago

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

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

Grant ❂

31,267 views • 1 month ago

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:

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 views • 28 days ago

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 ✉️.

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 views • 5 months ago

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:

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 views • 1 month ago

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

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

Meng To

272,316 views • 1 month ago

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 👇

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 views • 10 months ago

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:

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 views • 10 days ago

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:

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 views • 2 months ago

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.

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 views • 1 month ago

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.

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 views • 1 month ago

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)

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 views • 5 months ago

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.

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 views • 8 months ago

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:

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 views • 5 months ago

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.

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 views • 16 days ago

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:

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 views • 6 months ago

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:

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 views • 6 months ago

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:

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 views • 1 year ago