Components

Cursor Trail

A container whose pointer movement leaves a trail of small image cards: every `threshold` px of travel a card pops in at the cursor with a spring and a slight deterministic rotation, then fades and shrinks away ~700ms later.

Sweep your cursor across this surface.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add cursor-trail

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { CursorTrail } from "@lumora/ui/components/cursor-trail";
// or from the barrel:
import { CursorTrail } from "@lumora/ui";

Props worth knowing

images cycle in order as cards spawn; threshold is pointer travel in px between spawns (default 28). maxItems caps the live cards (default 8) and cardWidth sizes them in px (default 96, 4:5 ratio). Cards are decorative and render beneath the children; reduced motion spawns none. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.