Peek Shut

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

Installation

$ pnpm dlx 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.

Props11

Prop	Type	Default
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	number0.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	number3.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	number1 Playback speed multiplier for the whole timeline.
theme	"dark" \| "light""dark" Light or dark palette.

questionstring
Line above the slit.
Default"Want a peek?"
refusalstring
First line below the slit, in the base ink color.
Default"That’s all you get."
whenstring
Second line below, in the accent color; usually a date.
Default"The rest, Monday."
srcstring
Image shown through the slit; defaults to a file that only exists in the Remocn repo.
focusYnumber
Vertical focus point in the image, from 0 to 1.
Default0.5
pan[number, number]
Horizontal focus at the start and end of the pan, each 0 to 1.
DefaultDEFAULT_PAN
zoomnumber
How much the image is magnified inside the slit.
Default3.2
accentstring
Color of the when line.
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"