Render filmstripPro

The frames of a render as they arrive, left to right, each resolving out of the paper through the dither reveal. Counts, time left, Stop, and Retry on a frame that failed.

Markdown

On this page

ProA 6 s clip renders: every ninth frame lands left to right and resolves out of the paper through the dither reveal. Pick a frame once it is in.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/render-filmstrip

Usage

tsx

import { RenderFilmstrip } from "@/components/ui/chatcn/pro/render-filmstrip"

<RenderFilmstrip frames={frames} status="rendering" eta={eta} onStop={cancel} />

frames lists every frame the job will make; fill in src as each arrives. The first frame without one is shown as rendering. Use frameStep when the strip shows every nth frame.

Examples

States

ProWaiting for the first frame, half way, two frames failed, done with a frame picked and stopped.

Props

Prop	Type	Notes
`frames`	`FilmstripFrame[]`	`src`, `status`, `alt`
`status`	`"idle" \| "rendering" \| "done" \| "error" \| "canceled"`
`fps`, `frameStep`, `eta`
`layout`, `columns`, `aspectRatio`		`row` or `grid`
`selected`, `onFrameSelect`
`onStop`, `onRetry`, `onRetryFrame`, `error`

Keyboard

Key	Action
`Tab`	Moves through finished frames
`Enter`, `Space`	Pick a frame

Accessibility

Waiting and failed frames say so in text; completion is announced once.

Motion

Each frame resolves in 900 ms when its pixels land. Reduced motion fades instead.