Utilities

use-stagger

Hook for per-child delayInFrames in custom components.

Install

npx remotion-ui@latest add use-stagger

import { useStagger } from "@/remotion/hooks/use-stagger";

function ListItem({ index, label }: { index: number; label: string }) {
  const delayInFrames = useStagger({ index, staggerInFrames: 8 });

  return (
    <FadeIn delayInFrames={delayInFrames} durationInFrames={20}>
      <span>{label}</span>
    </FadeIn>
  );
}

For wrapping existing children, prefer the stagger-children primitive instead.

Layout

Video-safe padding and responsive font scaling.

Motion Tokens

Shared durations, delays, stagger steps, and Bézier curves.