# Peek Shut
URL: https://remocn.dev/docs/typography/peek-shut

A question sits above a thin line that opens on an image sliver, snaps shut, then a refusal lands.

- Install: `npx shadcn@latest add @remocn/peek-shut`
- Vibe: clean
- Natural length: 126f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/peek-shut
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PeekShut } from "@/components/remocn/peek-shut";

const PeekShutScene = () => (
  <PeekShut
    question="Want a peek?"
    refusal="That is all you get."
    when="The rest, Monday."
    src="/product-shot.png"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="PeekShut"
    component={PeekShutScene}
    durationInFrames={150}
    fps={30}
    width={1280}
    height={720}
  />
);
```

The question rises above a hairline that opens into a narrow slit showing a slow-panning crop of an image, then the slit snaps shut and the `refusal` and `when` lines rise below it, the last in the accent color. The default image is `hero.png` from the Remocn repo, so pass your own 16:9 screenshot through `src`. Timing compresses if the composition is shorter than about 160 frames. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `question` | `string` | `"Want a peek?"` | Line above the slit. |
| `refusal` | `string` | `"That’s all you get."` | First line below the slit, in the base ink color. |
| `when` | `string` | `"The rest, Monday."` | Second line below, in the accent color; usually a date. |
| `src` | `string` | — | Image shown through the slit; defaults to a file that only exists in the Remocn repo. |
| `focusY` | `number` | `0.5` | Vertical focus point in the image, from 0 to 1. |
| `pan` | `[number, number]` | `DEFAULT_PAN` | Horizontal focus at the start and end of the pan, each 0 to 1. |
| `zoom` | `number` | `3.2` | How much the image is magnified inside the slit. |
| `accent` | `string` | — | Color of the when line. |
| `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 beat that shows a sliver of the product and then withholds the rest until launch day.
- A coming-soon moment where a cheeky refusal and a release date close the scene.

## Don't use when
- You want the full feature shown, not a glimpse — use `photo-fill-type`.
- The tease is a single quiet line with no image — use `riddle-clues`.
- A line should be cut off by a reply card instead of a shutter — use `cut-off`.