# StaggerCascade

Reveal a collection one item at a time without moving its final layout.

Page: https://20cuts.com/docs/components/stagger-cascade

## Installation

Run from your product repository:

```sh
npx -y https://20cuts.com/releases/v0.3.0/20cuts-create-0.3.0.tgz video/20cuts
cd video/20cuts
npm ci
npm run studio
```

The installer includes this component, its source dependencies, runnable examples,
and skills for Codex and Claude Code. If 20cuts is already installed, import the
component from its existing source directory.

## Usage

```tsx
import { StaggerCascade } from "./system/motion";

export default function VideoScene() {
  return (
    <StaggerCascade at={0.3} stagger={0.12} style={{display: "grid", gap: 20}}>{["Plan", "Build", "Launch"].map(label => <div key={label}>{label}</div>)}</StaggerCascade>
  );
}
```


## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| children (required) | ReactNode | None | React content to display. |
| at | number | 0 | Start time in seconds within the current Remotion Sequence. |
| duration | number | 0.55 | Entrance duration for each item, in seconds. |
| stagger | number | 0.09 | Delay between consecutive items, in seconds. |
| distance | number | 24 | Travel distance in pixels. |
| style | CSSProperties | None | Styles applied to the component wrapper. |
| itemStyle | CSSProperties | None | Styles applied to each item's animation wrapper. |



## Complete example

This is the source of the fictional component demonstration. Replace its content
with supported behavior and assets from your product.

```tsx
import React, { type CSSProperties, type ReactNode } from "react";

import { AbsoluteFill } from "remotion";

import { StaggerCascade } from "./system";

const ink = "#141414", lime = "#b6f36b";

const center: CSSProperties = { display: "flex", alignItems: "center", justifyContent: "center" };

const card: CSSProperties = { background: "#fff", border: "1px solid #ddd", borderRadius: 20, padding: 32 };

function Stage({ children, dark = false, style }: {
    children: ReactNode;
    dark?: boolean;
    style?: CSSProperties;
}) {
    return <AbsoluteFill style={{ fontFamily: "Arial, Helvetica, sans-serif", color: dark ? "#fff" : ink, background: dark ? ink : "#f7f7f5", ...center, ...style }}>{children}</AbsoluteFill>;
}

export function StaggerCascadeExample() { return <Stage><StaggerCascade at={0.3} stagger={0.22} duration={0.8} distance={36} style={{ display: "grid", gap: 18, width: 820 }}>{["Write the story", "Show the product", "Make the cut", "Ship the video"].map((text, i) => <div key={text} style={{ ...card, display: "flex", alignItems: "center", gap: 28, padding: "26px 32px", fontSize: 32 }}><span style={{ color: "#888" }}>0{i + 1}</span>{text}<span style={{ marginLeft: "auto", color: "#62972d" }}>✓</span></div>)}</StaggerCascade></Stage>; }
```

Save it as src/StaggerCascadeExample.tsx. This demonstration uses
1280×720, 30fps and 180 frames.
For a separate entry point, replace src/index.tsx with this registration, then
run npm run studio:

```tsx
import { Composition, registerRoot } from "remotion";
import { StaggerCascadeExample } from "./StaggerCascadeExample";

registerRoot(() => (
  <Composition
    id="StaggerCascadeExample"
    component={StaggerCascadeExample}
    width={1280}
    height={720}
    fps={30}
    durationInFrames={180}
  />
));
```

## Source

- https://20cuts.com/animation-system/library/source/motion/effects.tsx
- https://20cuts.com/animation-system/library/source/motion/core.ts

## Agent instructions

Use the 20cuts StaggerCascade component in this project's Remotion composition. Reveal the feature rows in reading order with a 0.12-second stagger; keep each row as one atomic visual beat. Keep motion frame-driven and put timing in seconds relative to the current Sequence. Use the product's actual copy and assets. Preview the composition before rendering.