Video Motion Studio

Video Motion Studio — video as code, cut for the web, watched before shipped.

Mission

Treat video as a build artifact, not an export: composed in code, versioned in git, re-rendered when data changes, and budgeted like any other page weight. A product film that stutters on load or plays silent-and-captionless to 85% of viewers is not a film — it is a liability with a soundtrack. This skill makes video that earns its bytes.

When NOT to use

• A CSS/GSAP animation would do. If the motion is UI responding to the user, it belongs in motion-choreography or signature-interactions — video is for authored, linear narrative.
• One-off, never-revised, effects-heavy footage. Live-action grading, particle sims, 3D camera work: a motion designer in a dedicated NLE beats programmatic video. Remotion wins when video is data-driven, versioned, or personalized — not always.
• The page already has a signature moment. Per ../../references/awwwards-scoring.md, one memory per page. Autoplaying hero video next to a WebGL scene is two things screaming.
• Background-texture video. Looping "ambience" video that carries no information is 4MB of decoration competing with content — the motion canon bans autoplaying loops near text for a reason.

Workflow

1. Script on paper first. Write the beat sheet: hook, 3–5 feature beats, end card. One sentence per beat, timestamp each. No timeline work until the beat sheet reads well aloud in under the target duration.
2. Pick the production path: Remotion (data-driven/versioned/multi-variant), screen-capture pipeline (product demo), Lottie/Rive (UI-embedded motion asset), or plain `` craft (footage already exists). Say which and why in one line.
3. Build the master composition at the longest cut (60s). Structure every beat as a reusable component so shorter cuts are re-sequencing, not re-authoring.
4. Author captions in parallel with picture — kinetic-type captions are part of the composition, not a post step, because muted autoplay is the default viewing condition.
5. Render all variants + poster set, run the render-verification ritual (below), record file sizes and durations.
6. Integrate on the page with poster, muted playsinline autoplay rules, lazy loading, and the ≤4MB above-the-fold budget from ../../references/performance-budgets.md.
7. Gate through award-judge before calling it done.

Technique library

Remotion fundamentals — React as timeline

Everything is a pure function of useCurrentFrame(). No hidden playhead state; a frame number in, pixels out. The three idioms that do 90% of the work:

const frame = useCurrentFrame();
const { fps, durationInFrames } = useVideoConfig();

// 1. interpolate — the workhorse. ALWAYS clamp; unclamped extrapolation is the #1 Remotion bug.
const opacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: "clamp" });

// 2. spring — for entrances with weight. damping 200 = settle-no-bounce (product-safe).
const scale = spring({ frame, fps, config: { damping: 200 } });

// 3. Sequence — shifts child time so beats are self-contained components starting at frame 0.

Supporting cast: ` for layer stacking (every beat is layers, like a comp), staticFile() for assets, ` to embed real footage (screen captures, b-roll) inside a composition frame-accurately — this is how the capture pipeline and Remotion meet.

Register each cut as its own ` (id teaser-60, teaser-30, teaser-15) sharing beat components — render with npx remotion render `. When programmatic beats After Effects: numbers change (pricing, stats, dates), variants multiply (per-locale, per-customer, per-length), or video must stay in lockstep with a product that ships weekly. When it doesn't: see "When NOT to use."

Product-teaser grammar

The structure that survives a feed:

• **Hook 5s gets a visible pause control (vestibular rule).
• Delivery encode: H.264 in yuv420p (the only universally-decodable pixel format — 4:4:4 renders black on many mobile players) with -movflags +faststart so playback starts before download finishes; offer AV1/HEVC as additional ` entries for browsers that take them. Reserve layout with an aspect-ratio` box — a late-arriving video that shoves the page is a CLS defect, not a loading state.
• Scroll-scrubbed video, two honest options:
• currentTime scrubbing of a `: small payload, but seek latency depends on keyframe density — re-encode with all-keyframes (e.g., ffmpeg -g 1`) or scrubbing stutters on long GOPs. Fine for short clips ( 5s autoplay, flash safety (≤ 3 flashes/sec — check strobe-y cuts), captions as content parity, contrast ≥ 4.5:1 for text over footage tested on the worst frame.
• ../../references/awwwards-scoring.md — video competes for the ONE signature moment; if it isn't the signature, it must be quiet. Content axis: a teaser with weak copy scores as weak content no matter the render quality.

Deliverables

• Composition source — Remotion project (or capture-pipeline project) with beats as components, variants as registered compositions, data as props.
• Rendered variants — 60/30/15s cuts at delivery resolutions, encode settings recorded (codec, bitrate, dimensions, file size per variant).
• Captions file — WebVTT (and/or SRT) matching the kinetic type, for players and platforms that ingest it.
• Poster set — chosen poster frame per variant plus 2–3 alternates, exported via npx remotion still or frame extraction.

Render-verification ritual (mandatory, before any "done"):

1. [HUMAN] Watch every rendered variant start-to-end at 1× — the rendered file, not the preview. The preview lies about frame drops, asset 404s, and font fallbacks; the file doesn't. This is a human-perception check (does it feel right, does anything look wrong at real playback speed) — an agent has no eyes on a moving image, so request a human watch-through; do not report a skipped watch as done.
2. [MEASURED] agent-runnable proxy when no human is available yet: ffmpeg -i -vf "fps=2" frame_%03d.png (or similar, e.g. one frame per second) to extract a frame sequence, then run the legibility check (step 3 below) against the extracted frames. Disclose this as sampling frames, not watching the film — it catches static defects a still frame reveals (a caption that's mush, a frame with a dropped asset, a broken end card) but it CANNOT catch what only shows in motion: stutter, mistimed cuts, audio/caption drift, or a beat that reads wrong at speed. Label any claim from this proxy [MEASURED via ffmpeg frame extraction], never [HUMAN].
3. Frame-check text legibility at 360p on every caption — if a caption aliases into mush at feed resolution, fix the type size, don't hope.
4. Confirm poster, first frame, and end card each compose as standalone stills.
5. Verify captions file timing against picture on at least the 60s cut.
6. Record per-variant codec, dimensions, duration, and file size in the report. Claims without recorded numbers don't count as verification — a variant nobody watched end-to-end, or at minimum frame-sampled with the method disclosed, is not rendered, it is hoped.

Related skills

• wow-director — orchestrates this skill; owns the call on whether the page's signature moment is video at all.
• motion-choreography — the same timing canon applied to UI motion; kinetic-type easing lives there first.
• ux-narrative — writes the beat sheet's copy; a teaser is a narrative before it is a render.
• design-dna-forge — type, color, and art direction the film must inherit; video is the brand at 24fps, not a separate brand.
• webgl-shader-fx — the competing hero medium; never ship both loud on one page.
• award-judge — gates the output against the scoring rubric and the slop list.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: praveentewatia26
• Source: praveentewatia26/award-grade
• License: MIT

Install and usage instructions live in the source repository linked above.