Reference notes. Source retained; historical claims may need rechecking.
Claude + 3D animations: build $10,000 AI websites in 15 mins
Video.
Claude + 3D Animations: Build $10,000 AI Websites in 15 mins · id 9RiV-_MUiCI · 15:47 · reviewed 02-08-2026 · author Viktor Oddy
Note. Despite the title, the builder in this video is bolt.new, not Claude: his Fable 5 access had been pulled, and bolt's "max" model here runs Opus 4.8.
The process he shows
- Pinterest. Find a creature or subject looking at the camera (or ask AI to turn a side view into a front portrait).
- Two end frames. In the image chat, from the portrait: "make the creature look to the right side", then one looking left.
- Seedance 2.0 with start frame + end frame. Prompt: "the creature slowly and smoothly turns his head from left to right, steady neutral pace; body stays mostly still; keep the same expression." The result plays as if the page tracked the visitor's mouse — a 3D feel with no WebGL, no Blender.
- Builder: bolt.new (model "max"). He starts from a full recreation prompt kept on motionsites.ai, then strips that prompt's video and keeps a pure black background.
- Video in. Paste the hosted head-turn video: "add behind all content, no overlay, 100% opacity."
- Swap the UI by prompt. He pastes only the UI part of a different motionsites prompt ("neural interface") to replace the navbar and hero content wholesale.
- Text effect from a screenshot. A Dribbble text animation, screenshotted: "add this kind of text effect above the hero."
- Second section. Animate a minimal background image (Seedance, "just animate this", 8-10 seconds), set it as the section background, no overlay.
- Seamless seam. Sample the hero's color in Figma, then: "from the top of section 2, a gradient from this color at 100% opacity to 0" — the sections melt together.
- Scroll text. A "cinematic parallax animated text block" prompt from his library gives the text animation over the video.
- Rest of the page in one prompt. Three to four minimal black sections, same text style, little content each.
- Subject continuity. Character image + background image → ChatGPT: "show this character from the back, on this background" → animate → the third section's video. One actor across the whole page.
- Fix cramped layout. Pin content to the edges of the section instead of one center column.
- His argument for AI builders over Framer and Webflow. They carry a database and auth, so the site can grow into an app.
What is genuinely new for us
- The head-turn hero. Two still end frames plus start/end-frame conditioning in Seedance make a subject that seems to follow the visitor. Our doctrine already says 3D = video, not WebGL; this is the concrete recipe that turns a single still into an interactive-feeling hero.
- Subject continuity by compositing. The same creature seen from the back on the next scene keeps one actor across sections. It extends our "one style reference per page" rule from style to subject.
What we skip and why
- bolt.new and the database/auth pitch — we build in Claude Code; not our stack.
- The color-matched gradient seam — our doctrine already holds the bottom gradient fade into the page background.
- Reusing motionsites.ai prompts — his product; our contracts are our own recreation prompts.
- "$10,000 in 15 minutes" — sales.
Fold-in candidates
- Head-turn hero (portrait → left-look and right-look stills → Seedance start/end-frame video; body still, head turns) →
9 - System/ui-ux/motion/motion-design.md §3 technique shelf, beside frame-sequence scrub.
- Subject continuity (keep one character across sections by compositing new views, e.g. the back view on the next background) →
9 - System/ui-ux/motion/motion-design.md §6 taste rules, next to unity of style.
Deserves a full reference page with frames: yes
The head-turn trick is pure frames: the left-look still, the right-look still, the resulting motion on the page. Three frames teach it; text alone undersells the effect.