use-stagger

remotionui/use-stagger

FreeHook

Hook for staggered child delays

Live preview

live · rendered by the registry

Rendered by remotionui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://remotionui.com/r/use-stagger.json

Source

registry/bases/default/hooks/use-stagger.tsremotionui.com/r/use-stagger.json

1import { staggerDelay } from "@/remotion/lib/timing";
2 
3export type UseStaggerOptions = {
4  index: number;
5  staggerInFrames?: number;
6  baseDelayInFrames?: number;
7};
8 
9export function useStagger({
10  index,
11  staggerInFrames = 8,
12  baseDelayInFrames = 0,
13}: UseStaggerOptions): number {
14  return staggerDelay(index, staggerInFrames, baseDelayInFrames);
15}