Image Trail
betaImages dropped along the pointer's path as it crosses a section, each landing, holding a moment and fading — scoped to its box, the cursor left alone.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add image-trailnpm packages installed: class-variance-authority.
import { ImageTrail } from "@/components/ui/image-trail";<ImageTrail>
| Prop | Type | Default |
|---|---|---|
images (required)Image URLs, dropped in turn. | readonly string[] | — |
layer | "behind" | "above" | "behind" |
lifetimeHow long each image stays, in milliseconds. Default 900. | number | 900 |
poolSizeHow many images can be on screen at once. Default 10. | number | 10 |
ratioHeight as a share of width. Default 1.25 (portrait, 4:5). | number | 1.25 |
sizeWidth of each image, in pixels. Default 160. | number | 160 |
spacingPointer travel between drops, in pixels. Default 80. | number | 80 |
tiltLargest random tilt, in degrees. Default 8. | number | 8 |
Plus every attribute of <div>.
Decoration only: the images are alt-less and aria-hidden, take no pointer events, and sit behind the content by default, so nothing inside changes role, order or hit area. The system cursor is left alone and nothing happens outside the box. Off for touch, which has no hover path, and under reduced motion, where the images never appear. Do not put meaning in the images: anyone not using a mouse never sees them.
7/7
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes