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.
Modules5 modules
Last updated2026-06-02
Audience and outcomes
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.
- Explain how code-defined video changes the cost and iteration speed of motion work.
- Build Remotion-based videos and hyperframe-style sequences with an agent doing the implementation.
- Produce narrated explainers and decks from a written script and content source, with the narration treated as a first-class artifact.
- Apply motion inside product UI with rules for duration, easing, and restraint that an agent can follow.
- Run a motion production pipeline with review gates, brand checks, and accessibility considerations.
- Know where agent-produced motion still falls short and when to bring in a motion specialist.
Modules
Modules marked Available have full slide decks with speaker notes and narration scripts. The rest show their planned outline until production catches up.
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.
- Explain code-defined video and why it suits agent workflows.
- Identify which video tasks fit the approach: product explainers, data stories, repeatable formats.
- Recognise the tasks where timeline tools and motion specialists still win.
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.
- Set up a Remotion project an agent can work in: compositions, props, and assets.
- Use hyperframe-style sequences for lighter motion without a full video pipeline.
- Brief motion work in terms of timing, hierarchy, and emphasis rather than tool operations.
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.
- Treat the script as the primary artifact and generate slides and narration from it.
- Keep one content source feeding written, slide, and video versions of the same material.
- Edit generated narration for voice, pacing, and honesty before it ships.
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.
- Define a product motion system: durations, easings, and what motion is for.
- Encode motion rules so agents apply them consistently instead of inventing animation.
- Review motion for purpose, performance, and accessibility, including reduced-motion support.
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.
- Set up a render and delivery pipeline for recurring video formats.
- Define QA gates for motion: brand, accuracy, accessibility, and platform requirements.
- Decide when a motion specialist is needed and what to hand them.
Books and articles behind this course
The course teaches the practice; the books and articles carry the depth, the sources, and the worked runs it draws on.
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.
- Motion 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.
- Four 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.