remotionlisted

# Remotion Remotion renders videos from React components. A video is a function of the current frame: every visual state derives from `useCurrentFrame()`. ## Core rules - All animation is driven by `useCurrentFrame()`. CSS transitions/animations and Tailwind `animate-*` / `transition-*` classes do not render correctly (frames are rendered independently, so time-based CSS produces flicker or static output). The same applies to self-animating third-party libraries (chart libs, `useFrame()` from React Three Fiber, Lottie autoplay). - Express durations in seconds and multiply by `fps` from `useVideoConfig()`. - Reference files in `public/` via `staticFile()`; remote URLs work directly. ## Composition A `<Composition>` (usually in `src/Root.tsx`) defines component, `width`, `height`, `fps`, `durationInFrames`: ```tsx import {Composition} from 'remotion'; export const RemotionRoot = () => ( <Composition id="MyComposition" component={MyComposition} durationInFrames={100} fps={30} width={1080} height={1080} defaultProps={{title: 'Hello'} satisfies MyCompositionProps} /> ); ``` - `defaultProps` values must be JSON-serializable (`Date`, `Map`, `Set`, and `staticFile()` are supported). Declare prop types with `type`, not `interface`, for `defaultProps` type safety. - `<Still>` defines a single-frame image; no `durationInFrames`/`fps` needed. - `<Folder name="...">` groups compositions in the Studio sidebar (names: letters, numbers, hyphens only).