Image Trail

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface ImageTrailProps extends React.ComponentProps<"div"> {
8  /** Sources dropped along the pointer's path, in order and on a loop. */
9  images: string[]
10  /** Pixels the pointer must travel before the next image is dropped. */
11  distance?: number
12  /** Milliseconds an image takes to arrive, hold and fade. */
13  life?: number
14  /** Most images alive at once. Older ones are dropped first. */
15  max?: number
16  /** Largest tilt either side of straight, in degrees. */
17  tilt?: number
18  /** Classes for each dropped image. Size and radius belong here. */
19  imageClassName?: string
20}
21 
22interface Drop {
23  id: number
24  x: number
25  y: number
26  src: string
27  tilt: number
28}
29 
30/**
31 * Images are dropped by distance travelled rather than on a timer, so a slow
32 * drag leaves the same trail a fast one does and a still pointer leaves none.
33 */
34export function ImageTrail({
35  images,
36  children,
37  className,
38  distance = 90,
39  life = 900,
40  max = 12,
41  tilt = 14,
42  imageClassName,
43  onPointerMove,
44  ...props
45}: ImageTrailProps) {
46  const [drops, setDrops] = React.useState<Drop[]>([])
47  const last = React.useRef<{ x: number; y: number } | null>(null)
48  const nextId = React.useRef(0)
49 
50  const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
51    onPointerMove?.(event)
52 
53    if (
54      images.length === 0 ||
55      window.matchMedia("(prefers-reduced-motion: reduce)").matches
56    ) {
57      return
58    }
59 
60    const rect = event.currentTarget.getBoundingClientRect()
61    const x = event.clientX - rect.left
62    const y = event.clientY - rect.top
63    const previous = last.current
64 
65    if (previous && Math.hypot(x - previous.x, y - previous.y) < distance) {
66      return
67    }
68 
69    last.current = { x, y }
70    const id = nextId.current++
71 
72    setDrops((current) =>
73      [
74        ...current,
75        {
76          id,
77          x,
78          y,
79          src: images[id % images.length],
80          // Seeded off the id, so a given image in the trail always lands at
81          // the same angle instead of jittering on re-render.
82          tilt: ((id * 37) % (tilt * 2 + 1)) - tilt,
83        },
84      ].slice(-max)
85    )
86  }
87 
88  const drop = React.useCallback((id: number) => {
89    setDrops((current) => current.filter((item) => item.id !== id))
90  }, [])
91 
92  return (
93    <div
94      data-slot="image-trail"
95      onPointerMove={handlePointerMove}
96      onPointerLeave={() => {
97        last.current = null
98// … truncated