remotion
Remotion
Overview
Remotion enables programmatic video creation using React components. Compositions define renderable videos with explicit width, height, fps, and duration. All animations must be driven by useCurrentFrame() -- CSS animations and Tailwind animation classes are forbidden as they cause rendering artifacts. Use this skill for Remotion compositions, animations, audio, captions, transitions, media handling, or rendering. Not intended for general React UI development.
Quick Reference
| Pattern | API / Approach | Key Points |
|---|---|---|
| Basic animation | useCurrentFrame() + interpolate() |
Always clamp with extrapolateRight: 'clamp' |
| Spring animation | spring({ frame, fps }) |
{ damping: 200 } for smooth, no-bounce motion |
| Composition | <Composition id, component, durationInFrames, fps, width, height> |
Always set explicit dimensions |
| Dynamic metadata | calculateMetadata on <Composition> |
Set duration, dimensions, props before render |
| Sequencing | <Sequence from, durationInFrames> |
useCurrentFrame() returns local frame (starts at 0) |
| Series | <Series> with <Series.Sequence> |
Sequential playback; negative offset for overlaps |
| Transitions | <TransitionSeries> with fade(), slide(), wipe() |
Total duration = sum of scenes minus transition durations |
| Audio/Video | <Audio> / <Video> from @remotion/media |
Use staticFile() for local assets |
| Captions | createTikTokStyleCaptions() |
Token-level word highlighting via page.tokens |
More from oakoss/agent-skills
playwright
|
200ui-ux-polish
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
153find-skills
|
118knowledge-graph-builder
>
101tailwind
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
85pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78