# Riddle Clues
URL: https://remocn.dev/docs/typography/riddle-clues

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

- Install: `npx shadcn@latest add @remocn/riddle-clues`
- Vibe: playful
- Natural length: 214f @ 30fps

## Installation

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

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `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` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A teaser campaign beat that hints at the product through a few what it has but what it lacks riddles.
- A countdown-style moment where the last line gives the reveal date.

## Don't use when
- You want a single hesitant line answered by a reply — use `no-buts`.
- The tease should reveal a sliver of the real product image — use `peek-shut`.
- There is one quiet line and no riddle structure — use `coy-denial`.