Slit Scan
A word is slit-scanned into view through fluted slices, with a speed stat in the caption
$ pnpm dlx shadcn@latest add @remocn/slit-scanUsage
// src/Root.tsx
import { Composition } from "remotion";
import { SlitScan } from "@/components/remocn/slit-scan";
const SlitScanScene = () => (
<SlitScan word="Faster." caption="First render in 1.8s, down from 4.7s" />
);
export const RemotionRoot = () => (
<Composition
id="SlitScan"
component={SlitScanScene}
durationInFrames={125}
fps={30}
width={1280}
height={720}
/>
);A word streaks through vertical fluted slices and resolves into clean type, then a caption with a stat fades in under it. Pass word, caption and slices; it ships light and dark.
Props6
| Prop | Type | Default |
|---|---|---|
| word | string"Faster." The word that resolves from the scan. | |
| caption | string"First render in 1.8s, down from 4.7s" Stat line under the word. | |
| slices | number120 Number of vertical slices in the scan. | |
| accent | string"#3B5BFD" Accent colour (any CSS colour). | |
| theme | "dark" | "light""dark" Colour scheme; ships light and dark. | |
| speed | number1 Playback multiplier; above 1 plays faster. | |
- wordstring
The word that resolves from the scan.
Default
"Faster." - captionstring
Stat line under the word.
Default
"First render in 1.8s, down from 4.7s" - slicesnumber
Number of vertical slices in the scan.
Default
120 - accentstring
Accent colour (any CSS colour).
Default
"#3B5BFD" - theme"dark" | "light"
Colour scheme; ships light and dark.
Default
"dark" - speednumber
Playback multiplier; above 1 plays faster.
Default
1