正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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 次观看 • 1 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

41 条评论

Matt 的头像

Matt1 个月前

Okey I see 👀🔥

Hamza Ehsan 的头像

Hamza Ehsan1 个月前

👀🍄

Ramish 的头像

Ramish1 个月前

Incredible 🔥

Hamza Ehsan 的头像

Hamza Ehsan1 个月前

thank you sir

Hamzah 的头像

Hamzah1 个月前

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

Hamza Ehsan 的头像

Hamza Ehsan1 个月前

do it bro appreciate you

Omar Prado | Building with Framer 的头像

Omar Prado | Building with Framer1 个月前

This is amazing!

Hamza Ehsan 的头像

Hamza Ehsan1 个月前

thansk man!

Tarun Baskar 的头像

Tarun Baskar1 个月前

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

Hamza Ehsan 的头像

Hamza Ehsan1 个月前

thanks man. Got no idea tbh

Akriti 的头像

Akriti1 个月前

this is so cool!

Hamza Ehsan 的头像

Hamza Ehsan1 个月前

thank you!

Amani • Design Partner 的头像

Amani • Design Partner1 个月前

Amazing experiment. I think i should try something

Hamza Ehsan 的头像

Hamza Ehsan1 个月前

yeah it's fun man

Tamas Bodo 的头像

Tamas Bodo1 个月前

wow, thats pretty dope!

Michael Slotta 的头像

Michael Slotta1 个月前

@framer creator -> @claude creator. 👀

Juan @ Designrise 的头像

Juan @ Designrise1 个月前

cool stuff

Scratch UI 的头像

Scratch UI1 个月前

Amazing

Hamza Ehsan 的头像

Hamza Ehsan1 个月前

thanks man

Xander 的头像

Xander1 个月前

So cool! love this

Hamza Ehsan 的头像

Hamza Ehsan1 个月前

🙏🙏

Tanjim 的头像

Tanjim1 个月前

Bro insane

Mehak Jahangir 的头像

Mehak Jahangir1 个月前

the neon city glow is stunning

Hamza Ehsan 的头像

Hamza Ehsan1 个月前

appreciate it 🙏

Rakibul 的头像

Rakibul1 个月前

ahah.. really amazing work

dhinna ship .ico 的头像

dhinna ship .ico1 个月前

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

Nick 的头像

Nick1 个月前

this is rad. so experiential

Eamin 的头像

Eamin1 个月前

Absolutely loving the visual glow

Taufiq Rahman 的头像

Taufiq Rahman1 个月前

Really cool!

Tiny | AI 创业版的头像

Tiny | AI 创业版1 个月前

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

Hammad Arif 的头像

Hammad Arif1 个月前

Nice

Sha 的头像

Sha1 个月前

Cool stuff 🔥

Andy Z 的头像

Andy Z1 个月前

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 的头像

Raviteja Karrothu1 个月前

Really cool

Paul Varghese 的头像

Paul Varghese1 个月前

Excellent work!

Zain Malik 的头像

Zain Malik1 个月前

Cool

Tim Akihiro | useframix.com 的头像

Tim Akihiro | useframix.com1 个月前

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

Tanvir Ahammed | Product Designer 的头像

Tanvir Ahammed | Product Designer1 个月前

This is really incredible!

Rakibul 的头像

Rakibul1 个月前

yes, i forked it man ❤️‍🔥

Rakibul 的头像

Rakibul1 个月前

majestic work

Arpit Chandak 的头像

Arpit Chandak1 个月前

literally so dopee

相关视频

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 次观看 • 1 个月前

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 次观看 • 1 个月前

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 次观看 • 28 天前

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 次观看 • 5 个月前

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 次观看 • 1 个月前

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 次观看 • 1 个月前

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 次观看 • 10 个月前

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 次观看 • 10 天前

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 次观看 • 2 个月前

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 次观看 • 1 个月前

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 次观看 • 1 个月前

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 次观看 • 5 个月前

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 次观看 • 8 个月前

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 次观看 • 5 个月前

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 次观看 • 16 天前

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 次观看 • 6 个月前

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 次观看 • 6 个月前

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 次观看 • 1 年前