Blink Cut

Words blink in a fixed rhythm across changing layouts and grounds, then cut to the logo and a tagline.

Installation

$ pnpm dlx shadcn@latest add @remocn/blink-cut

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { BlinkCut } from "@/components/remocn/blink-cut";
 
const BlinkCutScene = () => (
  <BlinkCut
    words={["Cut", "Fast", "Loud", "Snap"]}
    framesPerWord={6}
    brand="remocn"
    line="Launch films, built in Remotion."
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="BlinkCut"
    component={BlinkCutScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Words cut in one per beat in changing sizes, positions and backgrounds, then the frame cuts to the closing lockup with a one-line tagline. Pass words (strings, or objects to set layout, ground and beats), framesPerWord, brand and line. The cut part lasts words.length times framesPerWord frames and the lockup settles about 18 frames after it. Ships light and dark.

Props8

Prop	Type	Default
words	Array<string \| BlinkWord>DEFAULT_WORDS Words to cut through; strings or objects with layout, ground and beats.
framesPerWord	number6 Frames per beat; 5 to 7 reads at speed without strobing.
brand	string"remocn" Wordmark on the closing lockup.
line	string"Launch films, built in Remotion." One line under the wordmark; empty hides it.
logo	React.ReactNode— Mark that replaces the default in the closing lockup.
accent	string"#3B5BFD" Accent colour for the mark and highlights; any CSS colour.
speed	number1 Playback multiplier for the whole timeline; 1 is normal speed.
theme	"dark" \| "light""dark" Dark or light palette and ground.

wordsArray<string | BlinkWord>
Words to cut through; strings or objects with layout, ground and beats.
DefaultDEFAULT_WORDS
framesPerWordnumber
Frames per beat; 5 to 7 reads at speed without strobing.
Default6
brandstring
Wordmark on the closing lockup.
Default"remocn"
linestring
One line under the wordmark; empty hides it.
Default"Launch films, built in Remotion."
logoReact.ReactNode
Mark that replaces the default in the closing lockup.
accentstring
Accent colour for the mark and highlights; any CSS colour.
Default"#3B5BFD"
speednumber
Playback multiplier for the whole timeline; 1 is normal speed.
Default1
theme"dark" | "light"
Dark or light palette and ground.
Default"dark"