Enhance Count
A blurred, thin line sharpens in place into a heavier weight, with the last word in the accent.
$ pnpm dlx shadcn@latest add @remocn/enhance-countUsage
// 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
| Prop | Type | Default |
|---|---|---|
| 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
Default
1 - theme"dark" | "light"
Ships light and dark palettes
Default
"dark"