Enhance Count

A blurred, thin line sharpens in place into a heavier weight, with the last word in the accent.

Installation
$ pnpm dlx shadcn@latest add @remocn/enhance-count

Usage

tsx
// src/Root.tsx
import { Composition } from "remotion";
import { EnhanceCount } from "@/components/remocn/enhance-count";
 
const EnhanceCountScene = () => (
  <EnhanceCount text={"Draft it fast.\nFinish it sharp."} highlight="sharp." />
);
 
export const RemotionRoot = () => (
  <Composition
    id="EnhanceCount"
    component={EnhanceCountScene}
    durationInFrames={120}
    fps={30}
    width={1280}
    height={720}
  />
);

The text enters thin and blurred, then each glyph sharpens and gains weight in a quick sweep so the line reads as finished. Pass text (use a newline for a second line) and highlight for the accented words; it ships light and dark through theme.

Props6

PropTypeDefault
text
string"Draft it fast.\nFinish it sharp."

Text to show; newline starts a new line

highlight
string"sharp."

Word or words shown in the accent color

accent
string—

Accent color (any valid CSS color)

background
string—

Overrides the theme's stage color

speed
number1

Playback speed multiplier

theme
"dark" | "light""dark"

Ships light and dark palettes

  • textstring

    Text to show; newline starts a new line

    Default"Draft it fast.\nFinish it sharp."

  • highlightstring

    Word or words shown in the accent color

    Default"sharp."

  • accentstring

    Accent color (any valid CSS color)

  • backgroundstring

    Overrides the theme's stage color

  • speednumber

    Playback speed multiplier

    Default1

  • theme"dark" | "light"

    Ships light and dark palettes

    Default"dark"