Image Trail

Move across the area and a trail of images unfurls behind the pointer. Pooled DOM nodes and the Web Animations API — no re-renders.

pointerwaapi2 files · 102 locdeps: clsx, tailwind-merge

MOVE · FAST

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/image-trail.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs image-trail

import { ImageTrail } from "@/components/opus/effects/image-trail";

<ImageTrail images={["/a.jpg", "/b.jpg"]} className="h-96" />

Prop	Type	Default	Description
images	string[]	—	Image URLs, cycled.
threshold	number	80	Pointer distance between drops (px).
width	number	160	Image width (px).
life	number	900	ms each image lives.
max	number	12	Pool size.