Halftone Cut

A diagonal wave of halftone dots shrinks one serif headline away and grows the next in its place

Installation
$ pnpm dlx shadcn@latest add @remocn/halftone-cut

Usage

tsx
// 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

PropTypeDefault
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

    Default1