Remotion Video

Remotion Video Skill

Captures hard-won lessons from building a series of short social-media videos in Remotion. Covers conceptual design thinking, layout modes, talking-head integration, motion grammar, kinetic typography, character moments, and measurable self-review.

If your project keeps companion reference files, read them when you need specifics beyond this skill:

• a brand-tokens / CLAUDE.md file — colors, fonts, architecture overview, animation anti-patterns
• a production playbook — pacing, transitions, audio, messaging craft
• a frame-review process doc — how to QA rendered frames
• a video-template README — the full template workflow

This skill focuses on the design thinking and technical patterns that make scenes work. Anywhere it shows specific colors, fonts, or asset names, treat them as placeholders to swap for your own brand tokens.

Tone target: design-forward with real personality. The failure mode to push back on is "competent SaaS" — restrained, corporate, forgettable. Type should perform. Small moments should have character. Motion should feel deliberately designed, not improvised. Aim for craft and confidence over polish-for-its-own-sake.

---

The Most Important Lesson

The visuals must tell the same story as the voiceover, not illustrate it abstractly.

When the speaker says "our tool handles thousands of customer conversations," the temptation is to show a dashboard with a "Conversations: 12,847" metric card. That's illustration — a visual footnote. The strong version shows the actual conversation happening — real chat bubbles, a real phone screen, real notification banners. The story unfolds in the UI, not in abstract charts about the UI.

Ask yourself: "If I muted the audio, would someone watching understand what's happening?" If the answer is "they'd see some cards with numbers changing" — the concept is wrong. If the answer is "they'd see the product actually working in real-time" — you're on track.

---

Conceptual Design Rules

1. Show the thing, not metrics about the thing

Bad: A dashboard card showing "Success Rate: 73%" while the VO describes the product handling work. Good: An actual stream of that work happening — items appear, some succeed, some fail, and the viewer can see the pattern.

Audiences connect with concrete stories, not abstract measurements. Metrics can appear as supporting UI elements (a small status bar, a subtle counter), but they should never be the main event.

2. When using two panels, they must tell one story from two angles

If your layout has two visual regions (left/right, main/overlay), they should be coupled — what happens in one triggers, references, or responds to what happens in the other. If they could exist independently without losing meaning, the layout is wrong.

Good coupling:

• Left: a chat transcript → Right: the customer's phone showing the same conversation
• Left: a process with a failure → Right: a diagnostic trace showing why that specific step failed
• Main: a diagram showing a structure → PiP: the speaker explaining what we're looking at

Bad coupling:

• Left: an activity stream → Right: aggregate metric cards (different stories)
• Left: chat messages → Right: an unrelated lifecycle gauge

3. UI should look like a real product, not a presentation slide

The most compelling scenes look like someone recorded their screen while using a real app. Think: messaging apps, phone screens, IDE code windows, terminal output, notification toasts — not PowerPoint cards with big numbers and progress bars.

This means: chat bubbles with realistic padding and speaker differentiation, status indicators that look like real app UI (small dots, inline badges), system events styled as notification toasts, subtle chrome (thin borders, backdrop blur, small text labels), and overflow: hidden on containers because real apps clip their content.

---

Canvas & Safe Areas

The skill supports two canvas sizes. Choose canvas first, layout mode second.

Square (1080×1080)

For LinkedIn, X, embedded web. Full canvas is usable. No platform UI occlusion.

Vertical (1080×1920)

For vertical X, Instagram feed (if vertical), or as a from-scratch alternative to the TikTok-edit workflow. Safe area: all important content (text, focal UI, speaker face) must sit within the central 1080×1280 region (y=300 to y=1580). Outside that band is for decorative background only — assume platform UI will occlude it on TikTok/Shorts/Reels.

Talking-head framing for vertical: speaker's eyes must sit at y=640-720 (upper third). Headroom (top of head to top of safe area) should be 80-140px. Speaker fills 60-75% of frame width.

Layouts don't directly translate from square to vertical. Side TH becomes Top TH (speaker upper half, content lower half), not a narrow side-by-side. Two-Column becomes Stacked (top panel + bottom panel). When in doubt, choose vertical canvas and design layouts native to it rather than letterboxing a square composition.

---

Layout Modes

Six distinct layout modes. Choose the right one for each scene.

1. Side Talking Head (TH left + content right) — square only

The workhorse for scenes where the speaker introduces a concept while visuals build beside them.

|← 72px →|← 360px video →|← 48px gap →|← remaining →|← 72px →|

• Video: 360×936px, positioned at (72, 72), borderRadius 16
• Right content: starts at x=480, width ≈ 528px
• Video slides in with enter-snap (-80px), content slides in with enter-snap (+40px), staggered by 3 frames

Best for explanatory talking-head beats where supporting visuals build alongside the speaker.

2. Center / Top Talking Head (full-frame or upper-frame speaker)

For high-energy moments — hooks, pivots, emotional beats.

• Square: 720×720px (margin=180) or 820×820px (margin=130), borderRadius 16, centered
• Vertical: 880×1100px positioned at (100, 300) — top of safe area, leaves bottom 320px for caption/headline space
• Scene opacity: enter-soft in (12f), exit-fade out (8f)

Best for hooks and pivots where the speaker should command the frame.

3. PiP (Picture-in-Picture) overlay

Speaker shrinks to a small thumbnail while the full canvas shows animated content. The speaker stays present without dominating.

• Square: 120×180px at (24, 24), borderRadius 20
• Vertical: 140×200px at (32, 320) — top-left of safe area
• Border thickens as PiP shrinks: borderWidth = 1 + (1 - sizeRatio) × 2 (≈2.7px at PiP size)
• Shadow intensifies at small sizes: alpha 0.15 + (1 - sizeRatio) × 0.4
• objectPosition: "center 35%" to keep face framed above center
• Morph transition from side→PiP via morph primitive

Best for demo scenes where the speaker narrates over full-canvas content.

4. Full-Screen Animated (no speaker visible)

For demo scenes, code evolution, activity streams, geometric diagrams. The full canvas is available for content (respecting safe area on vertical).

Best for product demos, code walkthroughs, and the longest "hero" beats.

5. Text-Centered

For punchline moments — big typography, no graphics. Let the words land.

• Centered on canvas with 72-80px horizontal padding (square) or within safe area (vertical)
• Headlines at 9-12% of frame height, display weight (600-700)
• enter-punch entrance, 30+ frame hold after the line lands before transitioning

Best for one-line punchlines that need to land, not unfold.

6. Two-Column / Stacked (content + content)

Parallel perspectives or cause-and-effect. Both regions contain animated content (no speaker video).

• Square (Two-Column): 560px left + 20px gap + 460px right + 40px margin
• Vertical (Stacked): 1080×640 top panel + 40px gap + 1080×640 bottom panel, vertically centered in safe area
• Critical: each panel must be a clipped container with overflow: hidden
• Every overlap bug comes from elements using position: absolute; inset: 0 (full canvas) instead of being contained within their panel
• Phase crossfades must overlap: incoming panel starts fading in 10 frames before outgoing finishes

Best for side-by-side comparisons like a chat transcript next to a phone screen.

---

Talking Head Integration

SceneTalkingHead component

Shared component rendering an AI talking-head / avatar video clip (e.g. HeyGen) with consistent styling:

• Accepts layout: "side" | "center" | "top" and canvas: "square" | "vertical"
• Handles scene-level fade in/out via enter-soft / exit-fade
• Slide-in animation: enter-snap primitive applied to video and text
• Placeholder card shown when clip file is missing (dashed circle + label + file path)
• Applies VIDEO_FILTER to all video elements

PipSpeaker component (morphing speaker pattern)

For videos where the speaker morphs between layout modes across scenes:

interface SpeakerSegment {
  clipFile: string;
  startFrame: number;
  durationFrames: number;
  mode: "side" | "pip" | "cta" | "top";
  videoStartFrom?: number;
  fadeInFrames?: number;
}

Key behaviors:

• Adjacent segments (no frame gap) trigger rect morph over 15 frames (morph primitive)
• Non-adjacent segments fade out/in (no morph — avoids jarring position jump)
• Only the outgoing clip morphs; incoming clip starts at its target rect
• Single clip can span multiple modes: use videoStartFrom for the second segment instead of splitting files

CTA mode

Centered, larger than PiP (240×360px square / 320×440px vertical), positioned slightly above center (y offset -80 square / -200 vertical) to clear the URL text below. Used for the final logo/CTA scene where the speaker's face appears with the brand URL.

Video filter (color grading)

AI-generated talking-head footage (HeyGen and similar) often skews warm/orange. Apply a consistent grade across all clips:

filter: "saturate(0.82) brightness(0.95) hue-rotate(-10deg) contrast(1.15)"

Tune the values to your footage — the point is one filter applied uniformly, so every clip matches.

Talking-head clip handling

• Trim at exact word boundaries from transcript JSON (not percentage-based)
• Leave 2-3 frames headroom after last word (codec padding eats 1 frame)
• Merge clips that share a continuous take — use videoStartFrom on the second segment
• Use fadeInFrames: 21 (0.7s) to mask idle-smile artifacts when a clip starts during another scene's audio
• Never re-encode video during audio-only processing (-c:v copy) — each re-encode degrades skin tones

---

Typography

Type sizes are expressed as % of frame height, not pixels. If a value drops below the minimum % for that platform, the layout is wrong, not the type size.

Pick two typefaces and stick to them: a display/body sans and a monospace. The values below use Inter (sans) and JetBrains Mono (mono) as free, shareable defaults — swap in your own brand fonts and keep the weights and size ratios.

Type scale

| Use | Font | Square (1080×1080) | Vertical (1080×1920) | Weight | |-----|------|---------------------|----------------------|--------| | Headlines | Inter | 96-128px (9-12% H) | 128-160px (7-9% H) | 600-700 | | Body text | Inter | 44-52px (4-5% H) | 60-72px (3.5-4% H) | 400 | | Chat bubbles | Inter | 44px | 60px | 400 | | Code / YAML | JetBrains Mono | 40-44px | 56-60px | 400 | | Eyebrow labels | Inter | 28px (2.5% H) | 36px | 600 | | Tags / badges | Inter | 28-32px | 36-40px | 600 | | System toasts | Inter | 32px | 44px | 600 | | Phone UI labels | Inter | 28-32px | 36-44px | 600 |

Density rule

Maximum 7 words on screen at once for body, 4 for headlines. If it doesn't fit, cut words — don't shrink type.

Preview rule

Preview at 1:1 pixel scale. What looks fine at 2× in a browser is tiny in the rendered video. When evaluating type sizing in stills, measure as % of frame height, not absolute pixels.

---

Kinetic Typography

Long-form lines must not land as a single static block. Use word-level Whisper timestamps to reveal text word-at-a-time or phrase-at-a-time, synced to spoken audio. This is the single highest-leverage motion technique for a design-forward tone — type that performs is what makes serious technical content feel alive without resorting to influencer theatrics.

Phrase reveal

Break the line at natural prosodic boundaries (use comma/clause boundaries from the transcript). Each phrase enters with enter-soft (4-frame variant): translateY(8→0) + opacity(0→1) over 4 frames, snappy easing. Trigger frame = word start frame from Whisper minus 3 frames (pre-cue, because eyes process faster than ears).

Keyword emphasis

Within a static line, animate the one keyword the speaker stresses. Apply the emphasis-pulse primitive: scale 1.0→1.08 over 6 frames with punch easing, hold for 8 frames, settle to 1.0 over 6 frames. Optionally shift color to an accent (e.g. #FBBF24 or #22D3EE) for the duration of the emphasis.

Rules

• Pick one mode per scene. Don't combine phrase-reveal and keyword-emphasis in the same scene — it becomes noise.
• Never reveal more than 7 body words or 4 headline words on screen at once. Earlier phrases fade to 60% opacity (not 0) as later ones enter, so the line stays legible as a whole.
• Sync to word start frames from Whisper, never to estimated VO timing.
• Don't kinetic-typography a punchline. Punchlines need to land, not unfold. Punchlines use enter-punch on the full line at once.

---

Easing Functions

Four custom easings defined in constants.ts:

| Name | Formula | Use | |------|---------|-----| | smooth | 1 - (1-t)³ (cubic ease-out) | General fades, scroll animations, scene opacity | | snappy | 1 - (1-t)⁴ (quartic ease-out) | Slide-in entrances, directional moves, UI elements | | punch | Overshoots to 1.1 at t=0.6, settles to 1.0 | Headline entrances synced to VO beats — makes text arrive | | spring | Exponential decay + sinusoidal overshoot | Pill/badge entrances, small elements that bounce into place |

Plus elasticOut (subtler elastic bounce) for secondary animations, and easeOutCubic for layout morphs.

Never use linear — it always looks mechanical.

---

Motion Primitives

Use this palette. Don't invent new durations or one-off animations. Every animation in the codebase should be one of these primitives; if a scene needs something not on this list, the primitive list is wrong, not the scene — extend the table, don't one-off it.

| Primitive | Use | Easing | Duration | Transform | |-----------|-----|--------|----------|-----------| | enter-soft | Body text, secondary elements, supporting UI | smooth | 12f | opacity 0→1 + translateY 12→0 | | enter-snap | Directional slides (TH videos, columns), structural elements | snappy | 9f | opacity 0→1 + translate from offset | | enter-punch | Headlines, keyword emphasis, beat-synced impacts | punch | 12f | opacity 0→1 + scale 0.85→1.0 (overshoot 1.1) + translateY 20→0 | | enter-spring | Pills, badges, small UI elements that bounce in | spring | 18f | opacity 0→1 + scale 0.6→1.0 | | exit-fade | Anything leaving without urgency | smooth | 8f | opacity 1→0 | | emphasis-pulse | Mid-shot keyword stress, single-frame attention | punch (up) + hold + smooth (down) | 6f + 8f + 6f | scale 1.0→1.08→1.0 | | morph | Layout-mode transitions (side→PiP, panel→panel) | easeOutCubic | 15f | lerpRect on x/y/w/h |

The consistency of using a small named palette is what makes motion read as designed rather than improvised. The best motion-design videos use a similarly small set.

---

Animation Patterns

Punch entrance (headlines synced to VO)

When the speaker says a key phrase, the headline should arrive on that beat — not before, not after. Pre-cue the visual trigger 4-8 frames before the spoken word (the eye processes faster than the ear, so sync feels late).

Apply enter-punch. Reserve scale + punch for big headlines only.

…

Source & license

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

• Author: hugobowne
• Source: hugobowne/show-us-your-agent-skills
• License: MIT
• Homepage: https://hugobowne.github.io/show-us-your-agent-skills/

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