---
name: remotion-marketing-videos
description: Create marketing videos with Remotion using React-based compositions, reusable scene systems, and programmatic rendering. Use when building promo videos, product explainers, social clips, ad variants, launch teasers, captions, simple motion graphics, or repeatable branded video templates in code.
---

# Remotion Marketing Videos

Use this skill for code-driven marketing videos in Remotion.

## Core approach

- Build videos as reusable React compositions.
- Prefer scene-based structure over one giant file.
- Separate content, timing, and styling.
- Start with stills and short preview renders before full exports.
- Optimize for repeatable templates, not one-off chaos.

## Official-tooling baseline

Remotion is installed locally in this workspace.
Useful commands:
- `npx remotion studio <entry-point.ts>`
- `npx remotion compositions <entry-point.ts>`
- `npx remotion still <entry-point.ts> <comp-id> <still.png>`
- `npx remotion render <entry-point.ts> <comp-id> <output-file.mp4>`

## Recommended workflow

1. Define the marketing goal and target aspect ratio.
2. Choose a composition format: ad, explainer, teaser, testimonial, feature reveal, or social cutdown.
3. Build scenes as composable React components.
4. Keep timing explicit with frames, sequences, and transitions.
5. Preview in Studio.
6. Render a still frame first for layout sanity.
7. Render a short draft before the final export.

## Good defaults

- Keep typography bold and readable.
- Use short scenes and clear visual hierarchy.
- Design for silent understanding first, then add audio or VO.
- Keep branding tokens reusable across projects.
- Use templates when many variants are needed.

## Read references as needed

- For setup and project structure, read `references/setup.md`.
- For marketing-video composition patterns, read `references/patterns.md`.
- For rendering and iteration habits, read `references/rendering.md`.

## Scope rule

Use this skill for rendered videos and motion graphics.
If the user wants animated site sections or web-native motion instead of exported video, use the separate `remotion-animated-websites` skill.


---

# Setup

## Official-doc takeaways

Based on the official Remotion docs:
- install `remotion` and `@remotion/cli`
- install `@remotion/player` when embedding in React apps
- create an entry point that calls `registerRoot()`
- define compositions in a root component
- use `npx remotion studio <entry-point>` to preview
- use `npx remotion render <entry-point> <comp-id> <output>` to export

## Suggested structure

```text
remotion/
  index.ts
  Root.tsx
  compositions/
    Promo.tsx
    Testimonial.tsx
  scenes/
  components/
  styles/
  data/
```

## Minimal pattern

- `index.ts` registers the root
- `Root.tsx` declares compositions
- each composition file owns a format or template
- scenes are smaller blocks inside a composition

## Practical advice

- separate reusable brand components from per-video content
- store copy, timing, and media references in data objects when possible
- make compositions easy to duplicate for ad variants


---

# Marketing Video Patterns

## Best use cases

Use Remotion marketing videos for:
- product promos
- feature announcements
- paid-social video ads
- launch teasers
- customer quote videos
- animated explainers
- repurposable branded templates

## Scene system

Prefer scenes like:
- hook
- problem
- solution
- proof
- CTA

Keep each scene modular so copy and timing can change without rewriting the whole composition.

## Useful visual ingredients

- headline + subhead stacks
- animated screenshots or mockups
- stat callouts
- icon rows
- testimonials or quote cards
- progress bars, highlights, underlines, and simple motion accents

## Template mindset

For marketing work, create templates instead of one-off comps:
- 16:9 explainer
- 9:16 social ad
- square promo cutdown
- testimonial card video
- feature launch template

## Copy rules

- write for short on-screen reading windows
- keep one idea per scene
- support silent autoplay with captions or strong text hierarchy
- avoid overstuffing a frame


---

# Rendering and Iteration

## Preview-first habit

Before full rendering:
1. run Studio
2. inspect composition list
3. render a still frame
4. render a short draft clip if timing is uncertain

## Useful commands

```bash
npx remotion studio remotion/index.ts
npx remotion compositions remotion/index.ts
npx remotion still remotion/index.ts Promo out/frame.png
npx remotion render remotion/index.ts Promo out/promo.mp4
```

## Quality habits

- validate dimensions and fps early
- check text safe zones for social crops
- test dark and light backgrounds for legibility
- keep asset paths organized and deterministic
- tune layout in stills before burning full renders

## Rendering mindset

Rendering is the expensive step.
Do not use full renders to discover basic layout mistakes.