Pro
Image trail
Moving the pointer over an area leaves a trail of photos that pop in where it is, lean with the direction of travel and fall away a moment later. The trail sits behind your content and never takes clicks.
pnpm dlx shadcn@latest add @caliper/image-trailWhen to use
Use it for
- Portfolio, studio and editorial heroes with a strong photo set.
- Event and campaign pages where the pictures are the message.
Skip it when
- Product UI; it is decoration for marketing surfaces.
- Photos people need to see properly; each one is gone in under a second.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Distance, not time
- A new photo appears after the pointer travels a set distance, so a slow pass leaves a sparse trail and a quick one a full one.
- Short and capped
- At most nine photos are on screen; the oldest leave first when the pointer races.
Usage
- Mouse and pen only
- Touch scrolling is untouched and reduced motion turns the trail off; the photos have no alt text because they repeat what is in the content.
Installation
pnpm dlx shadcn@latest add @caliper/image-trail
Adds its 2 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.
import { ImageTrail } from "@/components/ui/image-trail"
The worked example comes with Pro
The 13-line example behind the preview opens here, ready to copy.
- 602 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
API reference
ImageTrail
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements and keeps aria-hidden in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- Hover image linksA list of links that shows each one's picture beside the pointer. The preview trails on a soft spring, leans with its speed and crossfades between pictures as you move down the list.
- Photo pilePhotos dropped in a loose pile that spreads into a grid. Each photo travels from the pile to its cell, straightening as it goes, and gathers back the same way. The pile shows the top three and a count.
- Cursor labelA small pill follows the pointer over a labelled area and says what a click does there: Drag, Play, Open. On touch it becomes a label in the corner.