create-motion-graphics-storyboard

create-motion-graphics-storyboard

Purpose

Build a storyboard.html that fully specifies a motion graphic before render. Unlike the generic create-storyboard-html, every scene is annotated with a concrete animation primitive that the Remotion renderer can implement deterministically. This atom is the second human gate in the motion-graphics workflow — when it passes, the renderer should be able to produce the video without further design decisions.

Inputs

• A concept brief (core message, hook, scene beats, CTA, target duration, music vibe).
• An approved brand board (brand-board.html + manifest.json from create-brand-design-board) that defines palette, typography, and aesthetic direction.
• Output directory.

Workflow

1. Read the concept brief and brand-board manifest.
2. Decompose the concept into ordered scenes. Default to 3–8 scenes for short-form (under 15s); more is usually wrong.
3. For each scene, fill in: scene id, start/end timecode, on-screen copy, voiceover (if any), animation primitive (one of: pop-in, scale-bounce, kinetic-typography, slide, camera-pan, data-viz-reveal, mask-wipe, crossfade, hold, bg-swap, icon-rotate-cycle, character-loop, card-stagger-slide, count-up), easing (spring, ease-out, linear, bezier), and music cue marker (hit, swell, silence).
   • Multi-element scenes. If a scene has more than one animated element (e.g. headline + icon + supporting shape), list each as its own row under the scene with its own primitive. The renderer composes them inside one <Scene> component.
   • Persistent / shared elements. If an element should persist across scene boundaries and animate its position/color/rotation rather than unmount-remount (e.g. a circle that lives in scene 1 bottom-left then translates to scene 2 bottom-right with a color change), declare it once in a top-level sharedLayers array on the storyboard manifest. Each shared layer specifies an element kind (circle, icon, pill, image) and per-scene keyframes (position, color, rotation, scale, opacity). Shared layers render above scene content via an overlay composition. This is the correct way to spec the element-handoff motion.
4. Write storyboard.html as a single self-contained page. Each scene gets a row: timecode column, CSS-only mockup of the frame in the chosen aspect ratio, copy/VO column, and an animation-spec column listing primitive + easing + duration + music cue.
5. Mockups must use the brand-board palette and typography exactly. For 9:16 outputs, mockup frames must render vertically — never substitute a horizontal frame.
6. Write manifest.json with a structured scenes array (machine-readable for the Remotion renderer) and verification.md.

Output

• storyboard.html — self-contained HTML, openable in a browser.
• manifest.json with scenes: [{id, start, end, copy, vo, elements: [{kind, primitive, easing, ...}], music_cue, ...}] and an optional top-level sharedLayers: [{id, kind, perScene: {sceneId: {x, y, rotation, color, scale, opacity}}}].
• verification.md.

Quality Checks

• Total scene duration matches the brief's target duration (within ±0.5s).
• Every scene has an animation primitive from the supported list.
• Mockups use the brand-board palette and typography only.
• Vertical aspect ratio is preserved for vertical briefs.
• Copy fits within the 88% safe area at the chosen type scale.
• Spring overshoot fit. For every scale-bounce or pop-in scene, the specified font-size must satisfy estimated text-width × 1.15 ≤ 88% × canvas-width. The mockup should not just check the static size — it should show or note the peak size. If the math fails, reduce the font-size in the storyboard before downstream render, not after.

Failure Modes

• Brief asks for an animation primitive not in the supported list — propose the nearest supported primitive and flag in the manifest.
• Brief calls for an element that persists across scenes (e.g. a logo or arrow circle that moves from one scene to the next) — model it as a sharedLayer rather than duplicating the element in each scene's elements array.
• Brief involves a numeric value that "ticks up" on screen (price, percentage, count) — use the count-up primitive with from, to, prefix, suffix, and decimals fields.
• Total scene duration drifts more than 0.5s from the target — re-balance scene durations before writing.
• Copy overflows the safe area — reduce copy or step down the type scale and surface the change in the manifest.
• A scale-bounce scene specifies a font-size that fits statically but will clip at the 1.15x spring peak — reduce the font-size at storyboard time so the renderer never produces a broken frame.
• Brand board manifest missing — mark blocked and request the brand-board step run first.