Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Monat •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

41 Kommentare

Profilbild von Matt
Mattvor 1 Monat

Okey I see 👀🔥

Profilbild von Hamza Ehsan
Hamza Ehsanvor 1 Monat

👀🍄

Profilbild von Ramish
Ramishvor 1 Monat

Incredible 🔥

Profilbild von Hamza Ehsan
Hamza Ehsanvor 1 Monat

thank you sir

Profilbild von Hamzah
Hamzahvor 1 Monat

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

Profilbild von Hamza Ehsan
Hamza Ehsanvor 1 Monat

do it bro appreciate you

Profilbild von Omar Prado | Building with Framer
Omar Prado | Building with Framervor 1 Monat

This is amazing!

Profilbild von Hamza Ehsan
Hamza Ehsanvor 1 Monat

thansk man!

Profilbild von Tarun Baskar
Tarun Baskarvor 1 Monat

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

Profilbild von Hamza Ehsan
Hamza Ehsanvor 1 Monat

thanks man. Got no idea tbh

Profilbild von Akriti
Akritivor 1 Monat

this is so cool!

Profilbild von Hamza Ehsan
Hamza Ehsanvor 1 Monat

thank you!

Profilbild von Amani • Design Partner
Amani • Design Partnervor 1 Monat

Amazing experiment. I think i should try something

Profilbild von Hamza Ehsan
Hamza Ehsanvor 1 Monat

yeah it's fun man

Profilbild von Tamas Bodo
Tamas Bodovor 1 Monat

wow, thats pretty dope!

Profilbild von Michael Slotta
Michael Slottavor 1 Monat

@framer creator -> @claude creator. 👀

Profilbild von Juan @ Designrise
Juan @ Designrisevor 1 Monat

cool stuff

Profilbild von Scratch UI
Scratch UIvor 1 Monat

Amazing

Profilbild von Hamza Ehsan
Hamza Ehsanvor 1 Monat

thanks man

Profilbild von Xander
Xandervor 1 Monat

So cool! love this

Profilbild von Hamza Ehsan
Hamza Ehsanvor 1 Monat

🙏🙏

Profilbild von Tanjim
Tanjimvor 1 Monat

Bro insane

Profilbild von Mehak Jahangir
Mehak Jahangirvor 1 Monat

the neon city glow is stunning

Profilbild von Hamza Ehsan
Hamza Ehsanvor 1 Monat

appreciate it 🙏

Profilbild von Rakibul
Rakibulvor 1 Monat

ahah.. really amazing work

Profilbild von dhinna ship .ico
dhinna ship .icovor 1 Monat

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

Profilbild von Nick
Nickvor 1 Monat

this is rad. so experiential

Profilbild von Eamin
Eaminvor 1 Monat

Absolutely loving the visual glow

Profilbild von Taufiq Rahman
Taufiq Rahmanvor 1 Monat

Really cool!

Profilbild von Tiny | AI 创业版
Tiny | AI 创业版vor 1 Monat

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

Profilbild von Hammad Arif
Hammad Arifvor 1 Monat

Nice

Profilbild von Sha
Shavor 1 Monat

Cool stuff 🔥

Profilbild von Andy Z
Andy Zvor 1 Monat

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.

Profilbild von Raviteja Karrothu
Raviteja Karrothuvor 1 Monat

Really cool

Profilbild von Paul Varghese
Paul Varghesevor 1 Monat

Excellent work!

Profilbild von Zain Malik
Zain Malikvor 1 Monat

Cool

Profilbild von Tim Akihiro | useframix.com
Tim Akihiro | useframix.comvor 1 Monat

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

Profilbild von Tanvir Ahammed | Product Designer
Tanvir Ahammed | Product Designervor 1 Monat

This is really incredible!

Profilbild von Rakibul
Rakibulvor 1 Monat

yes, i forked it man ❤️‍🔥

Profilbild von Rakibul
Rakibulvor 1 Monat

majestic work

Profilbild von Arpit Chandak
Arpit Chandakvor 1 Monat

literally so dopee

Ähnliche 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.
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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 28 Tagen

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 10 Tagen

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 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 8 Monaten

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 16 Tagen

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 1 Jahr