# Remotion Video

> Remotion video production best practices — spring animations, interpolation patterns, SVG draw-on effects, scene transitions, chart animations, audio integration, and rendering. Use when building programmatic videos with Remotion, creating animated content, or producing marketing videos with code.

- **Type:** Skill
- **Install:** `agentstack add skill-thatrebeccarae-claude-marketing-remotion-video`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [thatrebeccarae](https://agentstack.voostack.com/s/thatrebeccarae)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [thatrebeccarae](https://github.com/thatrebeccarae)
- **Source:** https://github.com/thatrebeccarae/claude-marketing/tree/main/skills/remotion-video

## Install

```sh
agentstack add skill-thatrebeccarae-claude-marketing-remotion-video
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Remotion Video Production

Best practices for building programmatic videos with Remotion — animations, transitions, charts, and rendering.

## Install

```bash
git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/remotion-video ~/.claude/skills/
```

## Core Capabilities

- Spring animation presets (bouncy, smooth, crisp, staggered)
- Interpolation patterns (camera zoom, parallax, scroll simulation)
- SVG draw-on animations (path tracing, stroke reveal)
- Scene transitions via TransitionSeries
- AbsoluteFill layering for compositing
- Chart animations (bar grow, line draw-on, pie reveal, count-up numbers)
- Audio integration and sync
- Rendering configuration

## Spring Presets

Use `spring()` from Remotion for physics-based animations:

| Preset | Config | Use Case |
|--------|--------|----------|
| Bouncy | `mass: 0.5, damping: 8, stiffness: 120` | Playful reveals, logo bounces |
| Smooth | `mass: 1, damping: 15, stiffness: 80` | UI transitions, slide-ins |
| Crisp | `mass: 0.8, damping: 20, stiffness: 200` | Snappy interactions, toggles |
| Staggered | Any preset with frame offset per item | List reveals, grid animations |

```tsx
import { spring, useCurrentFrame, useVideoConfig } from "remotion";

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

const scale = spring({
  frame,
  fps,
  config: { mass: 0.5, damping: 8, stiffness: 120 },
});
```

## Interpolation Patterns

### Camera Zoom

```tsx
import { interpolate } from "remotion";

const zoom = interpolate(frame, [0, 30], [1, 1.5], {
  extrapolateRight: "clamp",
});
```

### Parallax Layers

```tsx
const bgX = interpolate(frame, [0, 100], [0, -50]);
const fgX = interpolate(frame, [0, 100], [0, -150]);
```

### Scroll Simulation

```tsx
const scrollY = interpolate(frame, [0, 90], [0, -800], {
  extrapolateRight: "clamp",
});
```

## SVG Draw-On

Animate `strokeDashoffset` to reveal SVG paths:

```tsx
const pathLength = 500;
const draw = interpolate(frame, [0, 60], [pathLength, 0], {
  extrapolateRight: "clamp",
});

```

## Chart Animation Patterns

| Pattern | Technique |
|---------|-----------|
| Bar grow | Animate height from 0 to target, stagger each bar by 3-5 frames |
| Line draw-on | SVG path with strokeDashoffset animation |
| Pie/donut reveal | Animate conic-gradient stop or SVG arc path |
| Count-up numbers | Interpolate from 0 to target, `Math.round()` for display |

## Scene Transitions

```tsx
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

  
    
  
  
  
    
  

```

## Performance Rules

1. **No `useEffect` for animations.** Use `useCurrentFrame()` + `interpolate()`.
2. **Memoize static components.** `React.memo` for anything that does not depend on frame.
3. **Preload assets.** `staticFile()` for local, `prefetch()` for remote URLs.
4. **Keep compositions under 30s** for fast render iteration during development.
5. **Test at target resolution** (1920x1080 or 1080x1080) before final render.

## Anti-Patterns

- No CSS `transition` or `animation` — use Remotion `interpolate()` and `spring()`
- No `setTimeout` or `setInterval` — frame-based timing only
- No absolute pixel positioning for responsive layouts — use `AbsoluteFill` + flex
- No inline `style` objects recreated every frame — extract to constants or `useMemo`
- No uncontrolled audio — always set explicit `volume` and `startFrom`

For complete code examples and composition templates, see [REFERENCE.md](REFERENCE.md).

## Source & license

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

- **Author:** [thatrebeccarae](https://github.com/thatrebeccarae)
- **Source:** [thatrebeccarae/claude-marketing](https://github.com/thatrebeccarae/claude-marketing)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-thatrebeccarae-claude-marketing-remotion-video
- Seller: https://agentstack.voostack.com/s/thatrebeccarae
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.