Year in Review

A five-chapter story card walks through yearly stats and ends on a share button tap

Installation

$ pnpm dlx shadcn@latest add @remocn/year-in-review

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { YearInReview } from "@/components/remocn/year-in-review";
 
const YearInReviewScene = () => (
  <YearInReview
    stats={{ year: "2026", product: "Kitebase", videos: 42, percentile: 3 }}
    device="phone"
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="YearInReview"
    component={YearInReviewScene}
    durationInFrames={480}
    fps={30}
    width={1280}
    height={720}
  />
);

A phone (or flat card) plays five slides with a chapter rail: your year, videos shipped, top component, builder rank and a share card whose button gets tapped. Override any field of stats (year, product, videos, topComponent, runnersUp, percentile, minutes, crew, url) and rename the chapters with chapters. It has a single look and no theme prop.

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

Props7

Prop	Type	Default
stats	Partial<YearInReviewStats>— Partial stats to override: year, product, videos, topComponent and more.
accent	string"#3B5BFD" Accent color.
speed	number1 Playback speed multiplier for the whole timeline.
device	"phone" \| "card""phone" Show the story in a phone frame or as a flat card.
chapters	string[]— Five chapter titles shown on the progress rail.
ground	GshPresetId— gradients.sh preset id for the animated ground.
groundParams	Partial<GradientParams>— Overrides for the ground shader parameters.

statsPartial<YearInReviewStats>
Partial stats to override: year, product, videos, topComponent and more.
accentstring
Accent color.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
device"phone" | "card"
Show the story in a phone frame or as a flat card.
Default"phone"
chaptersstring[]
Five chapter titles shown on the progress rail.
groundGshPresetId
gradients.sh preset id for the animated ground.
groundParamsPartial<GradientParams>
Overrides for the ground shader parameters.