# Streak Reward
URL: https://remocn.dev/docs/product-scenes/streak-reward

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

- Install: `npx shadcn@latest add @remocn/streak-reward`
- Vibe: playful
- Natural length: 150f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `streak` | `number` | `7` | 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` | `number` | `1` | 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 |

## Use when
- A learning, fitness or habit app launch where retention is the pitch.
- A celebratory beat with counters rolling up, such as XP, accuracy and time.
- A vertical clip with two captions: the streak, then the reward.

## Don't use when
- You want a gesture-driven card interaction — use `swipe-deck`.
- You want an achievement popup in a game-style UI, not a phone app — use `achievement-pop`.
- You want concentric rings and metrics counting up instead — use `activity-rings`.