4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T18d0,// author: Khoa Phan "use client" import React, { ElementType, HTMLAttributes, useEffect, useMemo } from "react" import type { DOMKeyframesDefinition, AnimationOptions } from "motion" import { useAnimate } from "motion/react" import { cn } from "@/lib/utils" interface ImageTrailProps extends HTMLAttributes { /** * The content to be displayed */ children: React.ReactNode /** * HTML Tag */ as?: ElementType /** * How much distance in pixels the mouse has to travel to trigger of an element to appear. */ threshold?: number /** * The intensity for the momentum movement after showing the element. The value will be clamped > 0 and <= 1.0. Defaults to 0.3. */ intensity?: number /** * Animation Keyframes for defining the animation sequence. Example: { scale: [0, 1, 1, 0] } */ keyframes?: DOMKeyframesDefinition /** * Options for the animation/keyframes. Example: { duration: 1, times: [0, 0.1, 0.9, 1] } */ keyframesOptions?: AnimationOptions /** * Animation keyframes for the x and y positions after showing the element. Describes how the element should try to arrive at the mouse position. */ trailElementAnimationKeyframes?: { x?: AnimationOptions y?: AnimationOptions } /** * The number of times the children will be repeated. Defaults to 3. */ repeatChildren?: number /** * The base zIndex for all elements. Defaults to 0. */ baseZIndex?: number /** * Controls stacking order behavior. * - "new-on-top": newer elements stack above older ones (default) * - "old-on-top": older elements stay visually on top */ zIndexDirection?: "new-on-top" | "old-on-top" } interface ImageTrailItemProps extends HTMLAttributes { /** * HTML Tag */ as?: ElementType /** * The content to be displayed */ children: React.ReactNode } /** * Helper functions */ const MathUtils = { // linear interpolation lerp: (a: number, b: number, n: number) => (1 - n) * a + n * b, // distance between two points distance: (x1: number, y1: number, x2: number, y2: number) => Math.hypot(x2 - x1, y2 - y1), } const ImageTrail = ({ className, as = "div", children, threshold = 100, intensity = 0.3, keyframes, keyframesOptions, repeatChildren = 3, trailElementAnimationKeyframes = { x: { duration: 1, type: "tween", ease: "easeOut" }, y: { duration: 1, type: "tween", ease: "easeOut" }, }, baseZIndex = 0, zIndexDirection = "new-on-top", ...props }: ImageTrailProps) => { const allImages = React.useRef>(undefined) const currentId = React.useRef(0) const lastMousePos = React.useRef({ x: 0, y: 0 }) const cachedMousePos = React.useRef({ x: 0, y: 0 }) const [containerRef, animate] = useAnimate() const zIndices = React.useRef([]) const clampedIntensity = useMemo( () => Math.max(0.0001, Math.min(1, intensity)), [intensity] ) useEffect(() => { allImages.current = containerRef?.current?.querySelectorAll( ".image-trail-item" ) as NodeListOf zIndices.current = Array.from( { length: allImages.current.length }, (_, index) => index ) }, [containerRef, allImages]) const handleMouseMove = (e: React.MouseEvent) => { const containerRect = containerRef?.current?.getBoundingClientRect() const mousePos = { x: e.clientX - (containerRect?.left || 0), y: e.clientY - (containerRect?.top || 0), } cachedMousePos.current.x = MathUtils.lerp( cachedMousePos.current.x || mousePos.x, mousePos.x, clampedIntensity ) cachedMousePos.current.y = MathUtils.lerp( cachedMousePos.current.y || mousePos.y, mousePos.y, clampedIntensity ) const distance = MathUtils.distance( mousePos.x, mousePos.y, lastMousePos.current.x, lastMousePos.current.y ) if (distance > threshold && allImages?.current) { const N = allImages.current.length const current = currentId.current if (zIndexDirection === "new-on-top") { // Shift others down, put current on top for (let i = 0; i < N; i++) { if (i !== current) { zIndices.current[i] -= 1 } } zIndices.current[current] = N - 1 } else { // Shift others up, put current at bottom for (let i = 0; i < N; i++) { if (i !== current) { zIndices.current[i] += 1 } } zIndices.current[current] = 0 } allImages.current[current].style.display = "block" allImages.current.forEach((img, index) => { img.style.zIndex = String(zIndices.current[index] + baseZIndex) }) animate( allImages.current[currentId.current], { x: [ cachedMousePos.current.x - allImages.current[currentId.current].offsetWidth / 2, mousePos.x - allImages.current[currentId.current].offsetWidth / 2, ], y: [ cachedMousePos.current.y - allImages.current[currentId.current].offsetHeight / 2, mousePos.y - allImages.current?.[currentId.current].offsetHeight / 2, ], ...keyframes, }, { ...trailElementAnimationKeyframes.x, ...trailElementAnimationKeyframes.y, ...keyframesOptions, } ) currentId.current = (current + 1) % N lastMousePos.current = { x: mousePos.x, y: mousePos.y } } } const ElementTag = as ?? "div" return ( {Array.from({ length: repeatChildren }).map(() => ( <>{children} ))} ) } export const ImageTrailItem = ({ className, children, as = "div", ...props }: ImageTrailItemProps) => { const ElementTag = as ?? "div" return ( {children} ) } export default ImageTrail 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"fancy/image/image-trail.tsx","content":"$51","type":"registry:ui","target":"components/fancy/image/image-trail.tsx"}],"className":"h-[70svh] min-h-80"}]]}]