remotion-video-creation

Drive all animations with the useCurrentFrame() hook combined with interpolate() or spring(). CSS transitions and Tailwind animation classes are forbidden because they do not render correctly during video export.

Use the Audio and Video components from @remotion/media with staticFile() for local files or remote URLs. They support trimming with trimBefore/trimAfter, volume callbacks, playbackRate, looping, and pitch adjustment via toneFrequency.

Use createTikTokStyleCaptions() from @remotion/captions to group captions into pages, then render each page inside a Sequence. Highlight the active word by comparing token timestamps against the current frame.

Yes, wrap 3D content in ThreeCanvas from @remotion/three with explicit width and height. All 3D animations must be driven by useCurrentFrame(); using useFrame() from @react-three/fiber causes flickering during rendering.

Flickering occurs when animations are not driven by useCurrentFrame(), such as CSS transitions, Tailwind animate classes, or self-animating Three.js models. Replace them with frame-based interpolation or spring animations.

Use the calculateMetadata function on a Composition to compute durationInFrames, dimensions, and props at render time. Combine it with Mediabunny to read video or audio durations and match the composition length to the media.