Ko Count

A ten-count of hard-cut numerals ends in a full-frame gradient word slam with a serif subline.

Installation

$ pnpm dlx shadcn@latest add @remocn/ko-count

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { KoCount } from "@/components/remocn/ko-count";
 
const KoCountScene = () => <KoCount word="Shipped" subline="The old workflow did not get up." />;
 
export const RemotionRoot = () => (
  <Composition
    id="KoCount"
    component={KoCountScene}
    durationInFrames={130}
    fps={30}
    width={1280}
    height={720}
  />
);

Numerals one to ten hard-cut in with tightening gaps, each as a different crop and tilt, then the word slams in from large with a short knockout flash and shake. A serif subline wipes in and the logo rises. Pass word, subline and label to make it yours; it ships light and dark through theme.

Props6

Prop	Type	Default
word	string"Knockout" The full-frame word that slams in after the count.
subline	string"The old workflow did not get up." Serif italic line that wipes in under the word.
label	string"The count" Small label next to the count, bottom left.
accent	string"#3B5BFD" Color of the count ticks.
theme	"dark" \| "light""dark" Light or dark ground; ships both.
speed	number1 Playback speed multiplier.

wordstring
The full-frame word that slams in after the count.
Default"Knockout"
sublinestring
Serif italic line that wipes in under the word.
Default"The old workflow did not get up."
labelstring
Small label next to the count, bottom left.
Default"The count"
accentstring
Color of the count ticks.
Default"#3B5BFD"
theme"dark" | "light"
Light or dark ground; ships both.
Default"dark"
speednumber
Playback speed multiplier.
Default1