What Sticks

A column of claims dims one by one until a single line stays highlighted.

Installation

$ pnpm dlx shadcn@latest add @remocn/what-sticks

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { WhatSticks } from "@/components/remocn/what-sticks";
 
const WhatSticksScene = () => (
  <WhatSticks lines={["Scenes install with one command.", "You own every file."]} keep={1} />
);
 
export const RemotionRoot = () => (
  <Composition
    id="WhatSticks"
    component={WhatSticksScene}
    durationInFrames={230}
    fps={30}
    width={1280}
    height={720}
  />
);

A stack of claims appears while timeline captions mark what you remember tonight, tomorrow and next week. Lines fade away until one is left bright. Pass lines, and use keep to pick the survivor. It ships in light and dark through the theme prop.

Props8

Prop	Type	Default
lines	string[]DEFAULT_LINES Claims shown in the column.
keep	number— Index of the line that stays highlighted; defaults to about 70 percent down.
moments	string[]DEFAULT_MOMENTS Time captions marking each stage of forgetting.
forget	number[]— Indices of lines that fade out first.
accent	string— Accent color override; falls back to the theme accent.
background	string— Background color override; falls back to the theme background.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Ships light and dark; picks the palette.

linesstring[]
Claims shown in the column.
DefaultDEFAULT_LINES
keepnumber
Index of the line that stays highlighted; defaults to about 70 percent down.
momentsstring[]
Time captions marking each stage of forgetting.
DefaultDEFAULT_MOMENTS
forgetnumber[]
Indices of lines that fade out first.
accentstring
Accent color override; falls back to the theme accent.
backgroundstring
Background color override; falls back to the theme background.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Ships light and dark; picks the palette.
Default"dark"