Achievement Pop

Achievement toasts unlock one after another in a stack, the last a rare card, then a total and wordmark land.

Installation

$ pnpm dlx shadcn@latest add @remocn/achievement-pop

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { AchievementPop } from "@/components/remocn/achievement-pop";
 
const AchievementPopScene = () => (
  <AchievementPop
    achievements={[{ label: "Unlocked · 64% of makers", title: "Shipped in one day", points: 100, icon: "trophy" }, { label: "Rare · 1.8% of makers", title: "Launch video shipped", points: 250, icon: "star" }]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="AchievementPop"
    component={AchievementPopScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);

Up to three achievement pills pop in one at a time, each with an icon, a rarity label, a title and points, while the stack shifts up and a total counts. After the last pill the camera pushes in and a wordmark lands. Pass your own achievements; it ships light and dark through theme.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props6

Prop	Type	Default
achievements	{ label: string; title: string; points: number; icon?: 'trophy' \| 'bolt' \| 'star' }[]— Up to three achievements. Icon is trophy, bolt or star.
theme	"dark" \| "light""dark" Color scheme. Ships light and dark.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.
speed	number1 Playback speed multiplier for the whole timeline.
accent	string— Declared but not used by the current source.

achievements{ label: string; title: string; points: number; icon?: 'trophy' | 'bolt' | 'star' }[]
Up to three achievements. Icon is trophy, bolt or star.
theme"dark" | "light"
Color scheme. Ships light and dark.
Default"dark"
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.
speednumber
Playback speed multiplier for the whole timeline.
Default1
accentstring
Declared but not used by the current source.