- Scene
- 19
- Take
- 01
- Level
- Advanced
- Runtime
- ~2 h
Interviews and Capstone
Answer motion interview questions with measured facts, build a toast, an accordion and a modal live, find four bugs with the timeline, and pass a launch audit.
This last phase turns what you learned into things you can show and defend: model interview answers checked against this course's measurements, three timed builds with automatic checks, a page with four motion bugs to debug with the Motion Timeline, and a five-rule launch audit.
The build assembles every earlier phase into one project, builds it with Vite, runs the audit in real Chromium and writes the portfolio README.
▶ Roll: 19.1Scene 19 · the brief from Lumen
Tomás, founder of Lumen Bikes
“Launch is in four days. I want one answer to the question: is the site's motion ready, yes or no?”
Four days before launch, Tomás asks for a yes or no. Ama likes how the site feels and Kofi is sure the code is clean, but nobody can show a result.
Lena wants a pass or fail she can run on every build. Ravi lists what he checks by hand: no layout property animated, a calm version of everything that moves, nothing long and automatic without a pause, no jump when a motion is interrupted, nothing left running after a part is removed. Kofi turns the list into a script.
Meanwhile Mei is interviewing a motion engineer, and Kofi helps write the questions. In this phase you answer them, build under a clock, hunt four bugs and write the audit that tells Tomás yes.
In this scene
You will learn
- Answer rendering, performance, motion-design and accessibility questions with a mechanism, a measured number, an edge case and a trade-off
- Build a toast, an accordion to
height: autoand an accessible modal against the clock - Find layout, thrashing, leak and reduced-motion bugs with the timeline, and prove each fix
- Run a five-rule launch audit on the finished site and present the project
You write code in
In your lumen-motion project (npm run dev) and in the editor on this page
Files you touch
- index.html
- package.json
- playwright.config.js
- README.md
- src/js/main.js
- src/js/components/mascot.js
- src/styles/components.css
- tests/audit.spec.js
- tests/launch-audit.js
Shot list · 6 shots, widths by reading time
- 19.1Interview: Rendering and PerformanceInterviewers ask why
transformis cheap, what layout thrashing is and how you would find jank. A strong answer gives the mechanism, a number you measured, an edge case and a trade-off. Here are six model answers checked against this course. 16 min 1 live - 19.2Interview: Motion Design and AccessibilityDesign interviews ask why 220 ms, why a spring, when you would not animate, how you handle reduced motion and what the WCAG numbers are. Six model answers, each tied to something this course measured. 15 min 1 live
- 19.3Interview: Live Build RoundsA live round gives you 10 to 15 minutes to build one small piece of motion while you talk. Here are three rounds, a toast, an accordion to
height: autoand an accessible modal, with a plan and automatic checks (the first three exercises). 19 min 3 live - 19.4Debug the JankA small panel with four motion bugs: a layout animation, layout thrashing, a leak and no reduced-motion version. Find each one with the Motion Timeline and a counter, fix it and prove it. 20 min 2 live
- 19.5The Launch AuditA motion audit that runs in the page and checks five rules: no layout properties animated, reduced motion respected, nothing long and automatic without a pause, interrupts that do not jump, and nothing left running after a part is removed. It fails first, then passes. 32 min 2 live
- 19.6Build: The Finished Launch Site and Portfolio READMEbuildAssemble every phase into one project, build it with Vite, run the launch audit in Chromium and write the README you present in an interview. 23 min 1 live
Dailies · 4 checked exercises
A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.
showToast() adds a message, but nothing moves and the message never leaves.AdvancedD02Round 2: the accordion to height: autoA timed round. The panel opens and closes instantly with display. A browser cannot animate height: auto.AdvancedD03Round 3: the accessible modalA timed round. The <dialog> opens and closes instantly. Make it fade and rise in, and fade out on Close and on Esc.AdvancedD04Fix the four bugsThis panel has four motion bugs: the meter moves with a layout property, Tidy reads and writes in turn, Clear hides the sparkles but leaves them animating, and the badge pulses for ever with no reduced-motion rule and no pause control.Advanced