Screenshot Tour

The camera pushes in on regions of a product screenshot in turn, dimming the rest and labelling each stop.

Installation

$ pnpm dlx shadcn@latest add @remocn/screenshot-tour

Usage

tsx

// src/Root.tsx
import { Composition } from "remotion";
import { ScreenshotTour } from "@/components/remocn/screenshot-tour";
 
const ScreenshotTourScene = () => (
  <ScreenshotTour
    src="/screens/dashboard.png"
    screenshotWidth={1440}
    screenshotHeight={900}
    stops={[{ x: 40, y: 120, width: 420, height: 200, label: "Every issue, grouped by status" }]}
  />
);
 
export const RemotionRoot = () => (
  <Composition
    id="ScreenshotTour"
    component={ScreenshotTourScene}
    durationInFrames={215}
    fps={30}
    width={1280}
    height={720}
  />
);

A framed screenshot rises in and the camera travels between stops, pushing in on each region while the rest dims and a caption names it. After the last stop it pulls back to the full shot when pullBack is on. Pass your own screenshot through src or children with its screenshotWidth and screenshotHeight, and list stops in screenshot pixels. With neither it shows a built-in issue-tracker mock. It ships light and dark through theme. The length is 18 + stops * framesPerStop + 24 for three stops at 45 frames.

The ground is a live gradients.sh shader (GshGround), installed with the component as @remocn/gsh. Pick another look with the ground preset prop.

Props13

Prop	Type	Default
src	string— Screenshot URL. Replaces the built-in mock.
children	React.ReactNode— Custom screen content. Used when src is not set.
screenshotWidth	numberMOCK_W Natural width of the screenshot in pixels.
screenshotHeight	numberMOCK_H Natural height of the screenshot in pixels.
stops	{ x: number; y: number; width: number; height: number; label: string }[]DEFAULT_STOPS Regions to visit, in screenshot pixels, each with a caption.
framesPerStop	number45 Frames spent on each stop.
dim	number0.55 Strength of the veil outside the focus, 0 to 1.
pullBack	booleantrue Pull back to the full screenshot after the last stop.
theme	"light" \| "dark""light" Color scheme. Ships light and dark.
accent	string"#3B5BFD" Accent color of the focus ring.
speed	number1 Playback speed multiplier for the whole timeline.
ground	GshPresetId— Shader preset id for the animated background.
groundParams	Partial<GradientParams>— Partial shader parameters that override the ground preset.

srcstring
Screenshot URL. Replaces the built-in mock.
childrenReact.ReactNode
Custom screen content. Used when src is not set.
screenshotWidthnumber
Natural width of the screenshot in pixels.
DefaultMOCK_W
screenshotHeightnumber
Natural height of the screenshot in pixels.
DefaultMOCK_H
stops{ x: number; y: number; width: number; height: number; label: string }[]
Regions to visit, in screenshot pixels, each with a caption.
DefaultDEFAULT_STOPS
framesPerStopnumber
Frames spent on each stop.
Default45
dimnumber
Strength of the veil outside the focus, 0 to 1.
Default0.55
pullBackboolean
Pull back to the full screenshot after the last stop.
Defaulttrue
theme"light" | "dark"
Color scheme. Ships light and dark.
Default"light"
accentstring
Accent color of the focus ring.
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline.
Default1
groundGshPresetId
Shader preset id for the animated background.
groundParamsPartial<GradientParams>
Partial shader parameters that override the ground preset.