cursor
Image Trail
Images that appear during a fast pointer sweep.
- cursor
Quick usage
import { ImageTrail } from "@pinky-ui/effects";
<ImageTrail />Install
Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/effectspnpm add @pinky-ui/effectsyarn add @pinky-ui/effectsnpx pinky-ui add image-trailPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Motion never carries the only meaning; the underlying content remains in the DOM.
- Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.
Reduced motion
The effect resolves to a static readable state when motion is reduced.
When to use
- As a restrained enhancement to meaningful content.
When not to use
- When the content or control would be unclear without motion.
Skill
Purpose
ImageTrail briefly cycles images along a fast pointer sweep inside a defined region. It is a signature treatment for a creative portfolio, editorial index or image-led introduction where the images add context rather than carry required information.
Use a meaningful sequence of 3–8 images and a velocity threshold around 80–160px/s. Keep the pool capped and the lifetime near 600–850ms. Do not trigger it on slow browsing, on a catalogue where every image matters, or alongside another trail/particle system.
The source content remains in normal DOM order and the trail images are empty-alt decorative layers. It disables on touch and reduced motion, cleans up animations, and never creates nodes per movement. Provide the same work links and image information through the underlying semantic content.