Blocks

Zoom tour block

A product tour told with a camera. The whole interface sits on the stage; choosing a stop moves the camera in to that part while a short note explains it, and Overview pulls back out.

Pro

pnpm dlx shadcn@latest add @caliper/zoom-tour-block

Product tour

One screen for the whole close

Installs components/ui/zoom-tour-block.tsxDepends on lucide-reactMotion none in component source

When to use

Use it for

Introducing a dense screen one region at a time.
Landing pages that show the real product instead of illustrations.

Skip it when

Screens that are already simple; show them whole.
Tours longer than five stops.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

The words are in the notes: The interface on the stage is inert and hidden; each stop's note carries what it shows and is announced.

Styling

The edges never show: The camera's move is clamped so the stage is always filled, whatever stop and zoom you give it.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/zoom-tour-block

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from ZoomTourBlock and tourTransform.

example.tsx

import { ZoomTourBlock, tourTransform } from "@/components/ui/zoom-tour-block"

The worked example comes with Pro

The 59-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

ZoomTourBlock

component

PropTypeDefault

eyebrowstring—

title *string—

leadstring—

stage *ReactNode—

stops *readonly TourStop[]—

classNamestring—

tourTransform

component

No props of its own; it accepts the native props of its root element.

It exposes status and group semantics, with aria-hidden, aria-label and aria-pressed kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.