Combo Counter
A gradient hit counter climbs to '12 HIT COMBO' with rating words like 'PERFECT'
$ pnpm dlx shadcn@latest add @remocn/combo-counterUsage
// src/Root.tsx
import { Composition } from "remotion";
import { ComboCounter } from "@/components/remocn/combo-counter";
const ComboCounterScene = () => (
<ComboCounter
hits={["Captions", "Transitions", "Charts", "Templates"]}
/>
);
export const RemotionRoot = () => (
<Composition
id="ComboCounter"
component={ComboCounterScene}
durationInFrames={132}
fps={30}
width={1280}
height={720}
/>
);Feature names hit one after another with a star flash and slash, each hit faster than the last, while a combo meter on the left counts up and its rating swaps from Nice to Great to PERFECT. After the final hit the frame flashes, the meter glides to the centre as a poster with a gradient number, and the logo rises in. Pass hits and optionally ratings. It ships light and dark through the theme prop.
Props5
| Prop | Type | Default |
|---|---|---|
| hits | string[]— One hit per feature, in order. The combo count is the number of hits landed. | |
| ratings | ComboRating[]— Ratings, swapped in as the count passes `from`. The last one is the poster's. | |
| accent | string"#3B5BFD" Small marker next to the rating. | |
| theme | "dark" | "light""dark" Ships light and dark. | |
| speed | number1 Playback speed multiplier; 1 is the designed pace. | |
- hitsstring[]
One hit per feature, in order. The combo count is the number of hits landed.
- ratingsComboRating[]
Ratings, swapped in as the count passes `from`. The last one is the poster's.
- accentstring
Small marker next to the rating.
Default
"#3B5BFD" - theme"dark" | "light"
Ships light and dark.
Default
"dark" - speednumber
Playback speed multiplier; 1 is the designed pace.
Default
1