Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 1 месяц назад •via X (Twitter)

LIVE

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.
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 просмотров • 1 месяц назад

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 просмотров • 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:
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 просмотров • 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 ✉️.
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 просмотров • 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:
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 просмотров • 1 месяц назад

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 просмотров • 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 👇
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 просмотров • 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:
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 просмотров • 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:
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 просмотров • 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.
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 просмотров • 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.
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 просмотров • 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)
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 просмотров • 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.
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 просмотров • 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:
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 просмотров • 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.
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 просмотров • 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:
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 просмотров • 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:
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 просмотров • 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:
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 просмотров • 1 год назад