← Studio library

Digest: the head-turn hero

Reference notes. Source retained; historical claims may need rechecking.

Studio reference illustration

Claude + 3D animations: build $10,000 AI websites in 15 mins

Video. Related Studio referenceClaude + 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

  1. Pinterest. Find a creature or subject looking at the camera (or ask AI to turn a side view into a front portrait).
  2. Two end frames. In the image chat, from the portrait: "make the creature look to the right side", then one looking left.
  3. 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.
  4. 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.
  5. Video in. Paste the hosted head-turn video: "add behind all content, no overlay, 100% opacity."
  6. 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.
  7. Text effect from a screenshot. A Dribbble text animation, screenshotted: "add this kind of text effect above the hero."
  8. Second section. Animate a minimal background image (Seedance, "just animate this", 8-10 seconds), set it as the section background, no overlay.
  9. 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.
  10. Scroll text. A "cinematic parallax animated text block" prompt from his library gives the text animation over the video.
  11. Rest of the page in one prompt. Three to four minimal black sections, same text style, little content each.
  12. 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.
  13. Fix cramped layout. Pin content to the edges of the section instead of one center column.
  14. 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

What we skip and why

Fold-in candidates

  1. 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.
  2. 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.

Source previewDownload original source