# How I Build $5,000 3D Animated Websites with AI (Sonnet 5)

[youtube.com/watch?v=IeR5ZMKssSc](https://www.youtube.com/watch?v=IeR5ZMKssSc) · id `IeR5ZMKssSc` · 18:54 · reviewed 02-08-2026

## The process he shows

1. **One-shot a base site.** Paste a full motionsites.ai prompt ("pulse 3D") into Claude with **Sonnet 5** — the whole 3D site in one message.
2. **Reskin the image.** **Higgsfield** with two inputs: a screenshot of the current background plus one Pinterest image. Prompt: "replace the flower in the first image with the second one." Framing and style survive; only the subject changes.
3. **Reskin the motion.** **Seedance 2** with the original video plus the new image — it copies the original camera and movement onto the new subject. Match the seconds to the original (a 4 second reference stays 4 seconds). Pick 1080p for web, not 4K: it loads faster.
4. **Reskin the words.** "Replace all content — navbar, name, headline, buttons, cards — to be about an AI video editing agency. Keep the same number of characters as now." The layout never breaks.
5. **From scratch when needed.** Hero 100vh, pure black, minimal navbar, one giant uppercase headline that always fills the section width.
6. **Fonts.** Pick on Google Fonts, give Claude the name to import. His line: "design is about 50% about the fonts."
7. **Headline animation prompt.** The title splits into characters that fall down and fade one by one, left to right, with a slight squish — tied to scroll position, so scrolling back reverses it.
8. **Scrub prompt, near verbatim.** "A muted video element has its currentTime set each animation frame, so the video plays frame by frame and there is no lagging on any device."
9. **Reveal prompt.** "Fade in from a blurred, slightly scaled-down state to sharp and full size as they enter the viewport, staggered so each line animates in sequence."
10. **Second section.** A full-screen panel with a rounded top edge rises from the bottom, driven by scroll progress over the hero; behind it a scroll-scrubbed video; on the left a "text drum" — scroll-driven manifesto lines with keyword highlights, depth blur, opacity falloff.
11. **When words fail, screenshot.** For a hard effect he screenshots it and pastes the image: "it will recreate that exact thing."
12. **Distribution.** Same X advice as his other videos: record, post, tag the tool and him.

## What is genuinely new for us

- **The reskin chain as a business method.** One proven base site + image-pair swap + video-pair swap + same-character-count text swap = a "new" client site in minutes. We hold the Seedance video reskin ([AI Studio reference](/Users/unctad/Claude/9 - System/ui-ux/motion/reference-viktoroddy-aistudio.md)); the chain of all three, plus duration-matching, is the news.
- **Same-character-count content swap.** Rewriting every text to a new topic while keeping lengths — the cheapest way to change a page's subject without breaking its layout.
- **Character-fall headline.** A giant title whose letters fall and fade with scroll, reversible — a named grammar move we do not hold.
- **Rising rounded-top panel.** A full-screen panel sliding up over the hero on scroll progress — ditto.
- **Screenshot-the-effect prompting.** Extends our design-as-image pattern from stills to animations: paste a picture of the moving thing you want.

## What we skip and why

- **The scrub technique itself.** currentTime per animation frame is already specified, with smoothing and frame cache, in [the NovaAI prompt](/Users/unctad/Claude/9 - System/ui-ux/motion/reference-novaai-prompt.md).
- **His prompt library.** Our recreation-prompt discipline already produces the same contracts.
- **The X growth loop.** Held in [the award-winning-sites reference](/Users/unctad/Claude/9 - System/ui-ux/motion/reference-yt-award-winning-animated-sites.html); not our channel.

## Fold-in candidates

- **Reskin chain.** Name the three-step recipe (image pair → video pair → same-length text) as the fast path from one built site to the next — home: `/Users/unctad/.claude/skills/sitio-cinematico/SKILL.md`.
- **Same-character-count swap.** One line: when changing a page's topic, keep every text the same length — home: `/Users/unctad/.claude/skills/sitio-cinematico/SKILL.md`.
- **Character-fall headline and rising panel.** Two additions to the technique shelf — home: `9 - System/ui-ux/motion/motion-design.md` §3.
- **Screenshot-the-effect.** When an animation is hard to describe, paste a screenshot of it — home: `/Users/unctad/.claude/skills/sitio-cinematico/SKILL.md` (animation step).

## Deserves a full reference page with frames: no

The two heavy techniques (scroll-scrub, video reskin by reference) are already held with full specs in the NovaAI and AI Studio references. What is new here — the reskin chain, the text-length trick, two grammar moves — travels fine as text. This digest is the record.