4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T1370,"use client"; import { useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; export type ImageTrailItem = { id: string; src: string; alt: string; label?: string }; export type ImageTrailProps = { images: readonly ImageTrailItem[]; label?: string; threshold?: number; maxVisible?: number; className?: string }; type TrailEntry = ImageTrailItem & { key: number; x: number; y: number; rotation: number }; export function ImageTrail({ images, label = "Image trail", threshold = 54, maxVisible = 5, className = "" }: ImageTrailProps) { const reduced = useReducedMotion() === true; const titleId = useId(); const rootRef = useRef(null); const lastRef = useRef<{ x: number; y: number } | null>(null); const sequenceRef = useRef(0); const timeoutsRef = useRef(new Set()); const [trail, setTrail] = useState([]); useEffect(() => () => { timeoutsRef.current.forEach((timeout) => window.clearTimeout(timeout)); timeoutsRef.current.clear(); }, []); const clearTrail = () => setTrail([]); const add = (clientX: number, clientY: number) => { if (reduced || images.length === 0) return; const root = rootRef.current; if (!root) return; const rect = root.getBoundingClientRect(); const point = { x: clientX - rect.left, y: clientY - rect.top }; const previous = lastRef.current; if (previous && Math.hypot(point.x - previous.x, point.y - previous.y) < threshold) return; lastRef.current = point; const key = sequenceRef.current++; const item = images[key % images.length]; const entry: TrailEntry = { ...item, key, x: point.x, y: point.y, rotation: ((key * 17) % 18) - 9 }; setTrail((current) => [...current.slice(-(Math.max(1, maxVisible) - 1)), entry]); const timeout = window.setTimeout(() => { timeoutsRef.current.delete(timeout); setTrail((current) => current.filter((candidate) => candidate.key !== key)); }, 980); timeoutsRef.current.add(timeout); }; const active = images[0]; if (!active) return

No images available.

; return

{ if (event.pointerType === "mouse") add(event.clientX, event.clientY); }} onPointerDown={(event) => { event.currentTarget.setPointerCapture(event.pointerId); add(event.clientX, event.clientY); }} onPointerUp={(event) => { if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId); }} onPointerLeave={() => { lastRef.current = null; }} className="relative min-h-[360px] overflow-hidden rounded-[13px] bg-[#243127] outline-none" tabIndex={0} onKeyDown={(event) => { if (event.key === "Escape") clearTrail(); }}> {active.alt}

Editorial interaction

Follow the quiet movement.

Move through the frame to collect fragments. Touch or click creates a single trace.

{!reduced && trail.map((entry) =>

{entry.label ?

{entry.label}

: null})}

; } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/image-trail.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/image-trail","itemId":"@motion-lexicon/image-trail"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/image-trail.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/image-trail.tsx"}]}]]}],"$L53"]}]

Image Trail

Installation

Files

components

Styles