Design a Fully Animated Website with AI — Claude Code

You are helping me turn one specific YouTube video into real, durable learning.

Source video:
- Title: Design a Fully Animated Website with AI — Claude Code
- URL: https://www.youtube.com/watch?v=47geVNoSrz4
- Topic: Interfaces + Open Design
- My current learning frame: Recreate the intro by prompting Claude Code for a flip animation that ends on the center image so it stays in place as the images spread into a left-drifting ticker row, writing the prompt as explicit opening, transition, and resting states.
- Why this matters: New playlist item from Ruben Stom; queued for transcript-backed review, topic mapping, and a practical learning artifact.

Transcript anchors from this exact video:
- 0:51 / Evidence 1: "because I prepared a small free gift to you as a thank you for watching. Before I start prompting in Claude code, I sketched the concept for the website in Figma. And the purpose of these sketches is..."
- 1:54 / Evidence 2: "these sections. This is the last design that I created for the about me page and I inverted the colors here just to keep things interesting and clearly distinguish it from the project pages. And I went for..."
- 3:45 / Evidence 3: "uh wordmark with the flipping images and the resting state is the second section, the horizontal row with the seven projects. And then by showing and describing both states, I can create a smooth transition from the first..."
- 5:31 / Evidence 4: "please make the adjustments." And then it worked perfectly. And this is just one of those small techniques that can really improve your prompting by asking the model if it understands you before it starts making changes. Once..."
- 7:31 / Evidence 5: "prompts and the actual website files as a free download in the description, so you can use these animations in your own website designs. Thank you for watching, and I hope to see you in the next one."

Your task:
1. Use the transcript anchors above as the primary source packet. If you add outside context, label it clearly as outside context and keep it secondary.
2. Create a source-check table with columns: timestamp, claim, what the demo proves, confidence, and what still needs verification.
3. Extract the actual teachable claims from the video. Do not invent claims that are not supported by the title, lesson frame, or transcript anchors.
4. Build a reusable learning artifact: A UI critique sheet for judging whether an AI interface improves control.
5. Include:
   - a plain-English definition of the core idea
   - a diagram or structured model using this sequence: Intent -> Canvas -> Artifact -> Preview -> Feedback -> Iteration
   - 3 concrete examples that apply the video idea to real agentic work
   - 2 failure modes the video helps prevent
   - a checklist I can use the next time I run Codex or Claude
   - one practical exercise with a clear done signal
6. Add a "learning transfer" section: what changes in my workflow tomorrow if I actually learned this?
7. Add a "source check" section that cites which transcript anchor supports each major takeaway.

Quality bar:
- Make this specific to "Design a Fully Animated Website with AI — Claude Code", not a generic Interfaces + Open Design essay.
- Prefer operational examples, failure modes, and reusable artifacts over broad definitions.
- Call out uncertainty instead of smoothing over weak evidence.
- If evidence is weak, say what transcript segment or timestamp needs review instead of guessing.
- Finish with a concise artifact I could paste into my learning app.