Personal Brand Video

Overview

Design and implement high‑quality personal brand videos that feel premium, concise, and conversion‑oriented, typically built in Remotion.

Prerequisite: Remotion Skill

Install the Remotion best practices skill before using this skill:

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

Workflow Decision Tree

1. New build → use the full workflow below.
2. Existing Remotion project → jump to “Upgrade Pass” and “Implementation”.
3. Only script/storyboard requested → use “Script & Structure” + “Storyboard Template” reference.

Golden Rules

• Use Remotion rules: Always load and follow remotion-best-practices (no CSS animations, no CSS transitions; use useCurrentFrame() + useVideoConfig()).
• Premium over busy: Fewer elements, stronger hierarchy, precise motion, intentional spacing.
• One message per scene: Every scene should answer one question or show one proof point.
• Brand consistency: Typography, color, and icon style must be consistent across scenes.

Step 1 — Intake & Goals

Collect these before coding (ask succinctly):

• Audience & platform: LinkedIn, website hero, email, keynote?
• Length target: 20–30s, 30–45s, or 45–60s?
• CTA: hire, book a call, join waitlist, view portfolio?
• Visual style: minimal, dark, light, tech‑lux, etc.
• Assets: headshot, logo, brand colors, product UI, screenshots.

If details are missing, assume: 26–35s, vertical 1080×1920, premium dark theme, founder/engineer voice.

Step 2 — Script & Structure (Story Spine)

Default 6‑scene structure:

1. Hook (identity + domain)
2. What I build (capability)
3. Proof (metrics, case study, logos)
4. How (stack / workflow)
5. Impact (outcomes)
6. CTA (next step)

See references/storyboard-template.md for a concrete template.

Step 3 — Visual System (Design Tokens)

Define:

• Typography scale (display → body → meta)
• Color tokens (bg, surface, accent, success)
• Gradients, glows, shadows, depth rules
• Icon system style (stroke width, corner radius, palette)

If a design system exists, reuse it. Otherwise create a small token set and use everywhere.

Step 4 — Motion System

Use a small set of motion primitives:

• Reveal: opacity + translateY (ease out)
• Scale‑in: spring for hero elements
• Stagger: lists and badges
• Pulse: subtle for status/metrics

Document timing in frames (e.g., “hero reveal 0–18f”, “stagger 4f intervals”).

Step 5 — Implementation (Remotion)

Always:

• Drive animations via useCurrentFrame() and useVideoConfig().
• Use interpolate() or spring(), not CSS animations.
• Use staticFile() for assets.
• Keep each scene self‑contained and predictable.

Create shared components when repeating:

• Typography, Icons, Metric, Badge, Card, SceneTitle.

Step 6 — Upgrade Pass (Existing Project)

Look for these upgrades:

• Emoji → SVG icons
• Linear → eased motion
• Flat → depth (shadows, gradients)
• Numbers → formatted/tabular
• Inconsistent text → tokenized typography

Use references/quality-checklist.md to validate.

References

Load these only when needed:

• references/workflow.md for full step‑by‑step delivery
• references/storyboard-template.md for script/scene templates
• references/scene-patterns.md for reusable scene ideas
• references/remotion-integration.md for explicit Remotion constraints
• references/quality-checklist.md for final QA