Image trail
ProMoving the pointer leaves a curated trail of photos that pop in, lean, and fade away.
Live · keyboard ready
Lisbon, in passing
- A portfolio or agency hero that should feel alive on first move.
- Travel, food, or product stories told through a sequence of photos.
- Launch pages that want an instantly playful surface.
- Use photo-grid or lightbox-gallery when people need to look at each photo.
- Use hover-image-list to preview one image per row in a list.
- Avoid it behind long text that people need to read.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { ImageTrail } from "@/components/arc/image-trail/image-trail"; const images = [ { src: "/photos/tram.jpg", alt: "A yellow tram in Lisbon" }, { src: "/photos/rooftops.jpg", alt: "Terracotta rooftops" }, { src: "/photos/sea.jpg", alt: "The sea at dusk" },]; export function Hero() { return ( <ImageTrail images={images} style={{ height: 420 }}> <h1>Lisbon, in passing</h1> </ImageTrail> );}ImageTrail
An area that leaves a trail of photos behind the pointer. Photos pop in at the pointer, lean toward the direction of travel, drift on with its momentum, and fade.
PropTypeDefaultDescription
imagesRequired{ src: string; alt?: string }[]–Photos shown in order along the trail. Pass small renditions; a photo is never shown larger than size.childrenReactNode–Content laid over the trail, such as a headline. Links and buttons inside stay clickable.spacingnumber90Pointer travel between photos, in px.lifetimenumber700How long a photo stays before it fades, in ms.sizenumber168Photo width in px.aspectRationumber4 / 5Photo width divided by height.maxTiltnumber10Largest lean in degrees at full pointer speed.poolSizenumber14How many photos can be on screen at once.introbooleanfalsePlays one short S-curve sweep of photos the first time the area scrolls into view, hinting at the effect. Skipped with reduced motion or once the pointer has moved in.disabledbooleanfalseStops new photos and gives touch scrolling back to the page.classNamestring–Extra class on the root. Give the root a height.styleCSSProperties–Inline styles on the root.- Trail photos are decorative and aria-hidden; put anything people need in children.
- Children stay in normal reading order and remain interactive.
- The effect is pointer only and adds nothing a keyboard or screen reader user misses.
- A new photo appears only after the pointer has travelled spacing px, and never faster than every 40ms, so the trail stays curated.
- Each photo enters on the shared spring curve from 60% scale, leans with horizontal speed plus a small fixed variation, then drifts along the pointer's path as it shrinks and fades.
- Photos are pooled DOM nodes animated with the Web Animations API on transform and opacity only.
- Reduced motion keeps the trail as a calm crossfade in place, with no scale, tilt, or drift, and wider spacing.
- Works at any size; the demo drops to 360px tall and a smaller headline on phones.
- Touch drags draw the trail with the finger; taps do nothing.
- A fixed pool of image nodes is reused, so a long trail never grows the DOM.
- Images are preloaded on mount. Animations run on the compositor through WAAPI.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for portfolio, travel, or studio heroes where photos are the story.
- Pass 8 to 14 small images (about 384px wide) in a deliberate order; the trail shows them in sequence.
- Give the root a height. A white headline with mix-blend-mode: difference reads over the photos in both themes.
- The area sets touch-action: none so a finger drag draws the trail; keep it to a hero sized block, or set disabled on small screens if scrolling matters more.
The full library index for assistants is at /llms.txt.