Halftone Cut
A diagonal wave of halftone dots shrinks one serif headline away and grows the next in its place
$ pnpm dlx shadcn@latest add @remocn/halftone-cutUsage
// src/Root.tsx
import { Composition } from "remotion";
import { HalftoneCut } from "@/components/remocn/halftone-cut";
const HalftoneCutScene = () => (
<HalftoneCut
from="Draft one"
to="Final cut"
accent="#3B5BFD"
/>
);
export const RemotionRoot = () => (
<Composition
id="HalftoneCut"
component={HalftoneCutScene}
durationInFrames={108}
fps={30}
width={1280}
height={720}
/>
);The from headline, set in italic serif, is eaten away by a halftone dot pattern that shrinks along a diagonal wave. The dots then regrow to reveal the to headline in upright serif on a tinted gradient. Pass from and to as short strings; accent tints the gradient and it ships light and dark. The cut lands at frame 76.
Props5
| Prop | Type | Default |
|---|---|---|
| from | string"Draft one" Outgoing headline, set in italic serif | |
| to | string"Final cut" Incoming headline, set in upright serif | |
| accent | string"#3B5BFD" Tint color of the background gradient | |
| theme | "dark" | "light""dark" Light or dark stage | |
| speed | number1 Playback multiplier for the whole timeline | |
- fromstring
Outgoing headline, set in italic serif
Default
"Draft one" - tostring
Incoming headline, set in upright serif
Default
"Final cut" - accentstring
Tint color of the background gradient
Default
"#3B5BFD" - theme"dark" | "light"
Light or dark stage
Default
"dark" - speednumber
Playback multiplier for the whole timeline
Default
1