01
Explain how code-defined video changes the cost and iteration speed of motion work.
Course / Advanced
Motion and Storytelling with Agents
Video and motion are the design outputs most teams still treat as a specialist craft with specialist tools. This course covers what changes when motion becomes another agent output: video defined in code with Remotion and hyperframe-style approaches, narrated explainers and presentation decks generated from the same content source as the product, motion inside the product itself — transitions, micro-interactions, and the restraint rules that keep them useful — and the production pipelines and QA needed to ship motion work at a quality a brand can stand behind.
- Modules
- 5 modules
- Total time
- ≈3h 45m
- Last updated
- 2026-06-02
- Your progress
- 0/5 modules completed
Audience and outcomes / 01
By the end of this course you can…
Product designers, brand and content designers, and design technologists who need motion and video output regularly but cannot justify a dedicated motion team — and motion designers curious about what agents change in their own pipeline.
02
Build Remotion-based videos and hyperframe-style sequences with an agent doing the implementation.
03
Produce narrated explainers and decks from a written script and content source, with the narration treated as a first-class artifact.
04
Apply motion inside product UI with rules for duration, easing, and restraint that an agent can follow.
05
Run a motion production pipeline with review gates, brand checks, and accessibility considerations.
06
Know where agent-produced motion still falls short and when to bring in a motion specialist.
Curriculum / 02
Modules
Every module has a full slide deck with speaker notes and a narration script.
01
Video as an Agent Output
What changes when video is defined in code rather than assembled on a timeline: diffable, regenerable, data-driven motion that an agent can produce and revise — and the kinds of video work where this approach genuinely beats traditional tools.
02
Remotion and Hyperframes
The two working approaches in practice: Remotion compositions as React components the agent can write and revise, and hyperframe-style keyframe sequences for lighter-weight motion — with the project structure that keeps either maintainable.
03
Narrated Explainers and Decks
Explainers and decks generated from the same content source as the product or course material: scripts as first-class artifacts, narration and slide structure produced together, and the editing pass that keeps the result sounding like a person rather than a press release.
04
Motion in Product Design
Motion inside the interface: transitions, micro-interactions, and state changes that clarify rather than decorate — encoded as rules for duration, easing, and restraint that an agent applies consistently across the product.
05
Production Pipelines and QA for Motion
Shipping motion work repeatedly and at brand quality: render pipelines, versioning for video artifacts, review gates that include brand and accessibility checks, and an honest account of where agent-produced motion still needs a specialist's eye.
Related material / 03
The sources behind this course.
The course teaches the practice; the books and articles carry the depth, sources, and worked runs it draws on.
The Agentic Designer
The operating model for product designers, design leads, and builders who need to understand what changes when agents join design work.
Design-as-Code: Tokens, .pen, .op and the Diffable Design File
What changes when design decisions live as token JSON and design surfaces live as text files: a worked token-to-CSS case study with a real one-line diff, an honest look at the .pen and .op formats, and a same-day workflow for making design changes reviewable.
Read articleMotion for Product Designers: Remotion and Hyperframes with Agents
Programmatic video has become an agent output: a 30-second feature clip can be authored as code, reviewed like any other artifact, and rendered to MP4 from the terminal. This article compares Remotion and Hyperframes honestly — authoring model, render paths, agent integration, and licensing — and traces a real product feature clip from prompt to MP4, including the gate that caught the failures.
Read articleFour Agentic Design Workflows in Production: What Actually Happened
Four real agentic design workflows traced from their own repositories — an editorial site, a multi-agent book pipeline, a book-to-video pipeline, and the design system underneath the site — with the timelines git can prove, the configs that did the steering, the failures the gates caught, and the patterns that repeat across all four.
Read article