Docs·Sticker Trail

Sticker Trail

Cursor trail of stickers that spawn, drift, and fade on pointer movement.

Installation

$pnpm dlx shadcn@latest add @spiderui/sticker-trail

Requires motion. Manual install: pnpm add motion

Usage

Inspired by Image cursor trail from Skiper UI. Stickers spawn, drift, and fade as the pointer moves.

API Reference

PropTypeDefault
dataItems cycled through on each spawn.
T[]—
renderItemRenders each spawned sticker.
(item: T) => ReactNode—
spawnDistancePointer travel in px before spawning the next sticker.
number76
driftAmountHow far each sticker drifts from its spawn point in px.
number36
removeDelaySeconds before a sticker is removed.
number1
maxItemsMaximum stickers visible at once. Oldest are dropped when exceeded.
number8
classNameClasses on the trail container when not using containerRef.
string—
containerRefOptional host element for pointer tracking and positioning.
RefObject<HTMLElement>—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Drag your mouse around.

import { StickerTrail } from "@/components/ui/sticker-trail"
const stickers = ["/svgStickers/1.svg", "/svgStickers/2.svg", "/svgStickers/3.svg"]

export default function Page() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      <StickerTrail
        data={stickers}
        renderItem={(src) => (
          <img src={src} alt="" className="size-36 object-contain" draggable={false} />
        )}
      />
    </div>
  )
}