Two Hit

A two-hit headline, "Streaming now.", in white then blue, right-aligned on black

Installation

$ pnpm dlx shadcn@latest add @remocn/two-hit

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { TwoHit } from "@/components/remocn/two-hit";
 
const TwoHitScene = () => (
  <TwoHit before="Premieres Friday." after="Streaming now." hitAt={34} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="TwoHit"
    component={TwoHitScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

The first line appears, then at hitAt it is hit and replaced by the second line in the accent colour, right-aligned on a flat background. Pass before, after and hitAt; it ships light and dark.

Props7

Prop	Type	Default
before	string"Premieres Friday." First line, shown in the base text colour.
after	string"Streaming now." Second line that replaces it in the accent colour.
hitAt	number34 Frame where the second hit lands.
accent	string— Accent colour (any CSS colour).
background	string— Overrides the theme background colour.
speed	number1 Playback multiplier; above 1 plays faster.
theme	"dark" \| "light""dark" Colour scheme; ships light and dark.

beforestring
First line, shown in the base text colour.
Default"Premieres Friday."
afterstring
Second line that replaces it in the accent colour.
Default"Streaming now."
hitAtnumber
Frame where the second hit lands.
Default34
accentstring
Accent colour (any CSS colour).
backgroundstring
Overrides the theme background colour.
speednumber
Playback multiplier; above 1 plays faster.
Default1
theme"dark" | "light"
Colour scheme; ships light and dark.
Default"dark"