Motion Graphics

/motion-graphics

Motion graphics is designed motion: type, shape, colour and data moving on purpose. That makes it the opposite of generated footage in every way that matters — it has to be frame-exact, the words have to be spelled right, the brand colour has to be that hex, and it usually has to loop. A diffusion model is the wrong instrument for all four.

So the default deliverable here is a single-file html artifact that plays itself: canvas, SVG and CSS driven from one clock. It runs live in the artifact pane, the user can replay it and download the .html, it costs nothing, it has no length limit, and every frame is exactly what you specified.

Route before you build

Designed motion → build it here. Titles, kinetic type, logo stings, lower thirds, animated charts and counters, diagram reveals, hero loops, transition wipes. Recipes: references/recipes.md. Runtime contract and the clock pattern: references/artifact-runtime.md.

Photographed or photoreal motion → video-generation. A drone shot, a coffee pour, smoke, an abstract organic texture. Anything whose appeal is that it looks filmed. That path is paid per second; do not reach for it to animate a word.

A project they render to a real file themselves → remotion (React) or motion-canvas (TypeScript). This is the honest answer whenever the deliverable must be an mp4 at broadcast quality: they get code, they run the render. For a mathematical animation in the 3Blue1Brown idiom, manim.

A narrated, teaching sequence → explainer-video. If the point is to explain something rather than to make something move, that skill owns the structure, narration and assembly.

The boundary, stated plainly

Nothing in this product encodes a rendered page into an mp4. The render sandbox has ffmpeg and a font in it, no browser. So an artifact built here plays in the pane and downloads as .html; it does not come out the other side as a file to upload to a social platform.

Say that in one sentence when it matters, and offer the two real routes: screen- record the artifact while it plays, or go the remotion / motion-canvas way and render properly. Never paper over it by generating footage that vaguely resembles the animation they asked for — the type will be wrong and they will be billed for it.

What the video timeline gives you, so you do not over-promise

If there is already footage in the conversation, edit_video can put static text overlays on it — nine-point grid placement, a size, a colour, an optional box, up to 8 per clip and 200 characters each — plus transitions between shots from a fixed set. That is titling, and for a subtitle or a name caption over video it is the right tool.

What the timeline does not have: keyframes, transforms, per-clip animation, pan or zoom on a still. Text there appears and disappears; it does not fly in, type on, or count up. So a title card is built here as an artifact; a name caption over footage goes on the timeline. If the user wants animated lettering burned into their video, that is the remotion route — say so rather than delivering a static overlay and calling it a motion title.

Craft that separates this from a CSS demo

• One clock, and timing in one table. A pile of @keyframes with staggered animation-delay cannot be replayed, paused, or re-timed, and a late webfont desynchronises all of it. Drive everything from a single requestAnimationFrame loop against a declarative list of beats. references/artifact-runtime.md has the pattern.
• Easing is the whole difference. Linear motion is what makes an animation look cheap, instantly. Nothing moves linearly: ease out for things arriving, ease in for things leaving, and a slight overshoot on anything that should feel physical. Never ease a fade the way you ease a move.
• Offset, do not synchronise. Six words arriving together is a block moving; the same six words 60–80ms apart is kinetic type. Stagger is the effect.
• Fast in, slow to settle. Entrances around 300–500ms, holds of at least 1.2s so the eye can actually read, exits faster than entrances.
• Type is the design. Weight, tracking, scale contrast and one accent colour carry a title card. Pull a real webfont from a CDN and name a fallback.
• Restraint. Animate one property per element where you can. Three elements moving deliberately beat nine moving at once, and the nine will also drop frames.
• Loops must actually loop. If it is a hero loop, the last frame has to equal the first — build the timeline modulo its own duration rather than ending and restarting.

Workflow

1. Get the content exact before animating it. The words, the numbers, the brand hex, the logo shape. Motion cannot rescue wrong copy, and re-animating after a copy fix is the commonest waste here.
2. Name the format. Aspect ratio and duration: a 16:9 title card, a 1:1 loop, a 9:16 opener. It changes the layout, not just the canvas.
3. Write the beat table first — element, in-time, duration, easing. Show it if the piece is complex; it is the thing the user actually has opinions about.
4. Build one fenced html artifact, self-contained, responsive, with a replay control.
5. Iterate one property at a time. "Slower" and "punchier" are timing and easing changes in the beat table, not rewrites.

Guardrails

• Never fake it. No invented video link, no screenshot passed off as an animation, no "the animation is attached". The artifact is written out in full or it does not exist.
• Use the user's own marks. Their logo, their colours, their type. Do not reconstruct another company's logo or a copyrighted character, and do not pull in copyrighted music.
• Carry visuals with inline SVG, CSS and type. Never invent an image URL or host — a made-up src paints a broken block.
• No fixed width past ~360px; the artifact must not overflow at 390px.
• Animate transform and opacity, nothing else. width, height, top, left, margin and box-shadow force layout or paint on every frame. A bar that grows is scaleY on a transform-origin: bottom rect with the label counter-scaled, never an animated height; a wipe is a translate or a clip-path, never an animated width.
• Honour prefers-reduced-motion, in the clock and not only in CSS. Read it once with matchMedia("(prefers-reduced-motion: reduce)") and, when it is set, paint the FINAL composed frame and never start the loop. A CSS media query cannot save you here: the loop writes inline styles every frame, and an inline style outranks any rule you wrote — *{animation-duration:.01s} does not stop a requestAnimationFrame timeline at all. Freezing on frame zero is the other failure; frame zero is usually opacity: 0, which shows the viewer nothing.
• Audible audio does not autoplay in the artifact frame, so never build a piece whose timing depends on sound starting by itself.

Usage

/motion-graphics $ARGUMENTS