Streak Reward

A phone shows a streak counting up with week dots, then a lesson-complete reward with medal and stat badges.

Installation

$ pnpm dlx shadcn@latest add @remocn/streak-reward

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { StreakReward } from "@/components/remocn/streak-reward";
 
const StreakRewardScene = () => (
  <StreakReward
    streak={7}
    title="Lesson complete"
    subtitle="No mistakes across 14 answers."
    cta="Continue"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="StreakReward"
    component={StreakRewardScene}
    durationInFrames={180}
    fps={30}
    width={1280}
    height={720}
  />
);

A phone shows a flame and a streak number counting up beside a row of week dots, then a tap swaps to a Lesson complete card with a medal, stat badges that count up and a Continue button. Pass streak, stats (label, value, kind), title and cta to match your app; lines are the two captions beside the phone. Ships light and dark.

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

Props12

Prop	Type	Default
streak	number7 Streak after today; the number counts up from one less
stats	StreakStat[]DEFAULT_STATS Stat badges: label, value, kind (xp, accuracy, time) and optional color
title	string"Lesson complete" Heading on the reward card
subtitle	string"No mistakes across 14 answers." Line under the reward heading
days	string[]["M", "T", "W", "T", "F", "S", "S"] Seven weekday letters in the week row
cta	string"Continue" Button label on the reward screen
lines	[string, string]— Two captions beside the phone: streak, then reward
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 Playback speed multiplier for the whole timeline
theme	"light" \| "dark""light" Light or dark palette
ground	GshPresetId— gradients.sh preset id for the backdrop shader
groundParams	Partial<GradientParams>— Overrides for the backdrop shader parameters

streaknumber
Streak after today; the number counts up from one less
Default7
statsStreakStat[]
Stat badges: label, value, kind (xp, accuracy, time) and optional color
DefaultDEFAULT_STATS
titlestring
Heading on the reward card
Default"Lesson complete"
subtitlestring
Line under the reward heading
Default"No mistakes across 14 answers."
daysstring[]
Seven weekday letters in the week row
Default["M", "T", "W", "T", "F", "S", "S"]
ctastring
Button label on the reward screen
Default"Continue"
lines[string, string]
Two captions beside the phone: streak, then reward
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
theme"light" | "dark"
Light or dark palette
Default"light"
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters