01
Remotion and hyperframe-style sequences with an agent implementing
Motion and Storytelling with Agents
Treat motion and video as agent outputs your brand can stand behind.
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-10-09
Curriculum
5 modules
Slides are the lesson; study guide and transcript come with each module.
Time commitment
≈3h 45m
About ≈4 hours across the full outline — work at your pace.
Access
US$39
Pay once. Yours to keep, with updates.
What you will build / 01
Artefacts you can take back to the team.
Code-defined video, narrated explainers, product motion with restraint rules, and QA pipelines — without pretending a specialist is obsolete.
02
Narrated explainers and decks from a shared content source
03
Product UI motion rules an agent can follow
04
A motion production pipeline with brand and accessibility checks
05
A clear line for when to bring in a motion specialist
Curriculum / 02
Module outline
Open the first module you have not finished. The slides are the lesson. The study guide and the transcript are the same module if you would rather read.
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.
Inside the materials / 03
Sample lesson & slide previews
Titles and diagrams from early modules — the same materials you open after checkout.
Video as an Agent Output · comparison
Timeline tools vs code-defined video: what each is for
Video as an Agent Output · concept
Why agents and code-defined video fit
Video as an Agent Output · diagram
Two paths to the same MP4
Video as an Agent Output · concept
The formats that benefit
Video as an Agent Output · checklist
The formats that do not benefit
Video as an Agent Output · comparison
Cost and iteration: what a revision actually costs
Audience and outcomes / 04
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.
01
Explain how code-defined video changes the cost and iteration speed of motion work.
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.
Who it is for
This is for you if…
- Product, brand, and content designers who need motion regularly without a dedicated team
- Motion designers curious what agents change in their pipeline
Who should skip it
This is not for you if…
- Teams that will ship generative video with no brand or accessibility review
- Beginners who have not yet run a basic agent session on product UI
Why register now
The practice compounds. Waiting does not.
01
Motion is still staffed as scarce craft while draft volume rises elsewhere.
02
Code-defined video changes iteration cost — if review gates exist.
03
Brand risk shows up fast when generated motion ships without QA.
Price and checkout
Pay once. Keep the course, with updates.
Prefer the full designer catalogue, or designer plus leadership? Upsell paths use the same checkout you already trust.
FAQ
Before you register
Does this replace a motion designer?
No. It changes cost and iteration for many outputs, and it names where specialist craft still wins. The course keeps that line explicit.
Is this a subscription?
Pay once. Yours to keep, with updates. There is no renewing membership for new purchases.
What do updates cover?
All edits and new lessons in an owned course, for the life of the course. Bundles include new courses added to that track for 12 months.
What if a course is retired?
Course retirement gives access to its replacement.
Related material / 05
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 and Agents: Decisions for the CEO
The three leadership courses are sold together for US$300. Designer courses and bundles don't include them, except the Everything bundle, which does. This purchase doesn't open the designer courses.
View courseDesign-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