Riddle Clues

A numbered clue sets up a line, an accent twist completes it, and the clues repeat before a closing reveal.

Installation

$ pnpm dlx shadcn@latest add @remocn/riddle-clues

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { RiddleClues } from "@/components/remocn/riddle-clues";
 
const RiddleCluesScene = () => (
  <RiddleClues
    clues={[
      { line: "It has scenes,", turn: "but no camera." },
      { line: "It has a timeline,", turn: "but no editor." },
    ]}
    closer={{ line: "Give up?", turn: "Answer on the 14th." }}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="RiddleClues"
    component={RiddleCluesScene}
    durationInFrames={230}
    fps={30}
    width={1280}
    height={720}
  />
);

Each clue shows a small numbered label and a line in white; a beat later its turn rises in the accent color beside or below it, then the clue lifts out and the next arrives. The closer is the last frame and stays on screen. Pass clues and closer as { line, turn } pairs. Timing compresses if the composition is shorter than the 214 frames plus a short hold. It ships light and dark.

Props7

Prop	Type	Default
clues	{ line: string; turn: string }[]DEFAULT_CLUES Riddle clues played in order, each a setup line and an accent twist.
closer	{ line: string; turn: string }DEFAULT_CLOSER Final reveal frame that stays on screen after the clues.
label	string"Clue" Word used in the small numbered label above each clue.
accent	string— Color of the twist lines; overrides the theme accent.
background	string— Background fill; pass "transparent" to drop it.
speed	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Light or dark palette.

clues{ line: string; turn: string }[]
Riddle clues played in order, each a setup line and an accent twist.
DefaultDEFAULT_CLUES
closer{ line: string; turn: string }
Final reveal frame that stays on screen after the clues.
DefaultDEFAULT_CLOSER
labelstring
Word used in the small numbered label above each clue.
Default"Clue"
accentstring
Color of the twist lines; overrides the theme accent.
backgroundstring
Background fill; pass "transparent" to drop it.
speednumber
Playback speed multiplier for the whole timeline.
Default1
theme"dark" | "light"
Light or dark palette.
Default"dark"