I have been building more Three.js websites because Claude Code with Opus 5 can now study a live reference, inspect its motion, build locally, and keep testing the result for a long time. Get 20% off Mobbin: https://mobbin.com/designcode
More resources:
CollectUI: https://collectui.com/
Kage: https://mengto.github.io/kage/
Kage open-source: https://github.com/MengTo/kage
Towers open-source: https://github.com/MengTo/towers
Sketchbook open-source: https://github.com/MengTo/sketchbook
Screen Recording: https://dreamcut.ai
In this video, I show the complete workflow behind experiments such as Kage, a cinematic night walk through a Kyoto mountain temple.
You will learn how to:
– organize local projects and quick HTML studies
– use the browser to research live websites, motion, and scroll behavior
– give Claude Code a reference URL and one short starting prompt
– choose a higher effort setting for design-heavy work
– turn a reference study into a different visual direction
– add Three.js scenes, camera movement, falling leaves, wisps, and scroll transitions
– build foreground depth with transparent PNGs and parallax
– improve stone, wood, grass, and lighting with texture references
– prototype typography, color, content, and layout choices before committing them
– save successful effects and workflows as reusable agent skills
– publish the source on GitHub so other designers can study it
The starting prompt:
“Recreate this in a single HTML file. Self-verify until it’s perfect.”
That prompt creates the study. Your references, taste, tests, and art direction create the finished work.
Chapters:
00:00 Three.js websites inside the browser
01:59 Why Claude Code desktop matters
03:47 Set up the local desktop workflow
06:04 Organize projects and HTML experiments
08:15 Give the agent a browser and references
10:07 Use GitHub for history and open source
11:59 Find inspiration with video and MCP
14:54 Start the reference-first build
16:01 Copy the URL and use one short prompt
17:15 Choose the automatic permission mode
17:53 Why Opus 5 needs extra effort
19:27 Let the agent inspect motion and scroll
21:49 Turn the reference into Kage
24:01 Add Three.js, orbit, leaves, and scene changes
26:37 Build depth with transparent layers and parallax
30:13 Save repeatable visual decisions as skills
35:39 Prototype typography, color, and layout options
39:05 Make it yours and share the source
Canvas UI: https://canvasui.dev/
Agent Skills Directory: https://www.skills.sh/
