<\/Sequence> <Sequence from={15} durationInFrames={45}> <Subtitle \/> <\/Sequence> <Sequence from={30} durationInFrames={60}> <Content \/> <\/Sequence> <\/> ); }; ``` ## Frame Conversion Table | Token | Value | 24fps | 30fps | 60fps | |-------|-------|-------|-------|-------| | short-1 | 50ms | 1 | 2 | 3 | | short-4 | 200ms | 5 | 6 | 12 | | medium-1 | 250ms | 6 | 8 | 15 | | medium-2 | 300ms | 7 | 9 | 18 | | long-2 | 500ms | 12 | 15 | 30 | See `references\/interpolate-recipes.md` for common patterns. See `references\/spring-configs.md` for spring presets. </article></body></html>

--- name: remotion description: Remotion video rendering with motion design tokens. Use when creating programmatic videos, implementing motion token animations in Remotion, or building video templates. References Remotion documentation and M3 token integration. --- # Remotion Integration React-based video rendering with motion design tokens. ## Standards Reference | Standard | Documentation | |----------|---------------| | Remotion | remotion.dev\/docs | | M3 Tokens | Integrated via tokens\/ | ## Core Concepts ### Frame-Based Animation Remotion uses frames, not milliseconds. ```javascript \/\/ Convert ms to frames const msToFrames = (ms, fps = 30) => Math.round((ms \/ 1000) * fps); \/\/ medium-1 (250ms) at 30fps = 8 frames const frames = msToFrames(250, 30); ``` ### Token Integration ```javascript import tokens from '..\/tokens\/motion.tokens.json'; const getDuration = (tokenName, fps = 30) => { const ms = parseInt(tokens.motion.duration[tokenName].$value); return msToFrames(ms, fps); }; const getEasing = (tokenName) => { const [x1, y1, x2, y2] = tokens.motion.easing[tokenName].$value; return Easing.bezier(x1, y1, x2, y2); }; ``` ## Interpolation ### Basic Usage ```javascript import { interpolate, useCurrentFrame, Easing } from 'remotion'; const MyComponent = () => { const frame = useCurrentFrame(); const opacity = interpolate( frame, [0, 8], \/\/ 8 frames = 250ms at 30fps [0, 1], { easing: Easing.bezier(0.05, 0.7, 0.1, 1) } ); return

; }; ``` ### With Tokens ```javascript import { interpolate, useCurrentFrame, Easing } from 'remotion'; import tokens from '..\/tokens\/motion.tokens.json'; const MyComponent = () => { const frame = useCurrentFrame(); const fps = 30; const durationFrames = msToFrames( parseInt(tokens.motion.duration['medium-1'].$value), fps ); const [x1, y1, x2, y2] = tokens.motion.easing['emphasized-decelerate'].$value; const opacity = interpolate( frame, [0, durationFrames], [0, 1], { easing: Easing.bezier(x1, y1, x2, y2) } ); return

; }; ``` ## Spring Animation ```javascript import { spring, useCurrentFrame, useVideoConfig } from 'remotion'; import tokens from '..\/tokens\/spring.tokens.json'; const MyComponent = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const springConfig = tokens.motion.spring.enter.$value; const scale = spring({ frame, fps, config: { damping: springConfig.damping, stiffness: springConfig.stiffness, mass: springConfig.mass } }); return

; }; ``` ## Composition Structure ```jsx import { Composition } from 'remotion'; export const RemotionRoot = () => { return ( <> <\/> ); }; ``` ## Sequence Animation ```jsx import { Sequence } from 'remotion'; const MyVideo = () => { return ( <> <\/Sequence> <Sequence from={15} durationInFrames={45}> <Subtitle \/> <\/Sequence> <Sequence from={30} durationInFrames={60}> <Content \/> <\/Sequence> <\/> ); }; ``` ## Frame Conversion Table | Token | Value | 24fps | 30fps | 60fps | |-------|-------|-------|-------|-------| | short-1 | 50ms | 1 | 2 | 3 | | short-4 | 200ms | 5 | 6 | 12 | | medium-1 | 250ms | 6 | 8 | 15 | | medium-2 | 300ms | 7 | 9 | 18 | | long-2 | 500ms | 12 | 15 | 30 | See `references\/interpolate-recipes.md` for common patterns. See `references\/spring-configs.md` for spring presets. </article></body></html>