50: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/3j06ow7w40nxu.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"] 51: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/3j06ow7w40nxu.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"] 52:T1ee3,'use client'; import { cn } from '@/lib/utils'; import { type HTMLMotionProps, motion, useMotionValue, useSpring, useAnimationFrame, type MotionValue, useReducedMotion, } from 'motion/react'; import React from 'react'; interface FloatingElementsContextValue { pointerX: MotionValue /** Cursor X relative to the container's left edge */; pointerY: MotionValue /** Cursor Y relative to the container's top edge */; containerWidth: React.RefObject /** Container width (updated via ResizeObserver) */; containerHeight: React.RefObject /** Container height (updated via ResizeObserver) */; isInside: React.RefObject /** Whether the pointer is currently inside the container */; } const FloatingElementsContext = React.createContext< FloatingElementsContextValue | undefined >(undefined); function useFloatingElements() { const ctx = React.useContext(FloatingElementsContext); if (!ctx) { throw new Error( 'useFloatingElements must be used within a provider', ); } return ctx; } export function FloatingElements({ className, ...props }: React.ComponentPropsWithRef<'div'>) { const containerRef = React.useRef(null); // MotionValues — mutated directly, no setState, no re-renders const pointerX = useMotionValue(0); const pointerY = useMotionValue(0); const containerWidth = React.useRef(0); const containerHeight = React.useRef(0); const isInside = React.useRef(false); // Keep container dimensions up-to-date without re-renders React.useEffect(() => { const el = containerRef.current; if (!el) return; const observer = new ResizeObserver(([entry]) => { const { width, height } = entry.contentRect; containerWidth.current = width; containerHeight.current = height; }); observer.observe(el); return () => observer.disconnect(); }, []); const handlePointerMove = React.useCallback( (e: React.PointerEvent) => { const el = containerRef.current; if (!el) return; const rect = el.getBoundingClientRect(); pointerX.set(e.clientX - rect.left); pointerY.set(e.clientY - rect.top); }, [pointerX, pointerY], ); const handlePointerEnter = React.useCallback(() => { isInside.current = true; }, []); const handlePointerLeave = React.useCallback(() => { isInside.current = false; }, []); const ctxValue = React.useMemo( () => ({ pointerX, pointerY, containerWidth, containerHeight, isInside }), [pointerX, pointerY], ); return (

); } interface FloatingElementItemProps extends HTMLMotionProps<'div'> { intensity?: number /** Maximum pixel displacement when the cursor is right on top. Default 50 */; stiffness?: number /** Spring stiffness. Default 150 */; damping?: number /** Spring damping. Default 15 */; } export function FloatingElementItem({ style, intensity = 50, stiffness = 150, damping = 15, ...props }: FloatingElementItemProps) { const reducedMotion = useReducedMotion(); const ref = React.useRef(null); const { pointerX, pointerY, containerWidth, containerHeight, isInside } = useFloatingElements(); // Cached center position (relative to container) const centerX = React.useRef(0); const centerY = React.useRef(0); // Cache position on mount & resize React.useEffect(() => { const el = ref.current; if (!el) return; const cachePosition = () => { const parent = el.offsetParent as HTMLElement | null; if (!parent) return; centerX.current = el.offsetLeft + el.offsetWidth / 2; centerY.current = el.offsetTop + el.offsetHeight / 2; }; cachePosition(); const observer = new ResizeObserver(() => cachePosition()); observer.observe(el); if (el.offsetParent) observer.observe(el.offsetParent); return () => observer.disconnect(); }, []); const x = useMotionValue(0); const y = useMotionValue(0); const springX = reducedMotion ? x : useSpring(x, { stiffness, damping }); const springY = reducedMotion ? y : useSpring(y, { stiffness, damping }); useAnimationFrame(() => { if (!isInside.current) { // Smoothly return to origin when cursor leaves the container x.set(0); y.set(0); return; } const mx = pointerX.get(); const my = pointerY.get(); const dx = mx - centerX.current; const dy = my - centerY.current; const distance = Math.sqrt(dx * dx + dy * dy); // Max possible distance is the diagonal of the container const maxDist = Math.sqrt( containerWidth.current ** 2 + containerHeight.current ** 2, ); if (maxDist === 0) return; // Normalized proximity: 1 when on top, 0 at farthest corner const proximity = 1 - Math.min(distance / maxDist, 1); // Ease the proximity for a more natural curve (quadratic ease-in) const easedProximity = proximity * proximity; // Direction: repel away from cursor const angle = Math.atan2(dy, dx); const force = easedProximity * intensity; x.set(-Math.cos(angle) * force); y.set(-Math.sin(angle) * force); }); return ( ); } interface InfiniteFloatingItemProps extends HTMLMotionProps<'div'> { depth?: number /** Parallax depth factor. Higher = more mouse response. Default 0.03 */; amplitude?: number /** Amplitude of the infinite bob in px. Default 12 */; speed?: number /** Speed of the infinite bob (radians/sec). Default 1 */; phase?: number /** Phase offset in radians so items don't move in unison. Default 0 */; stiffness?: number /** Spring stiffness for parallax response. Default 80 */; damping?: number /** Spring damping for parallax response. Default 20 */; } export function InfiniteFloatingItem({ style, depth = 0.03, amplitude = 12, speed = 1, phase = 0, stiffness = 80, damping = 20, ...props }: InfiniteFloatingItemProps) { const { pointerX, pointerY, containerWidth, containerHeight, isInside } = useFloatingElements(); const reducedMotion = useReducedMotion(); const x = useMotionValue(0); const y = useMotionValue(0); const springX = reducedMotion ? x : useSpring(x, { stiffness, damping }); const springY = reducedMotion ? y : useSpring(y, { stiffness, damping }); useAnimationFrame((time) => { // time is in ms — convert to seconds const t = time / 1000; // Infinite floating bob (Lissajous-like) const bobX = Math.sin(t * speed + phase) * amplitude; const bobY = Math.cos(t * speed * 0.7 + phase + 1) * amplitude * 0.8; // Parallax offset based on mouse position relative to container center let parallaxX = 0; let parallaxY = 0; if (isInside.current && containerWidth.current > 0) { // Normalize pointer to -1…1 range from container center const normX = (pointerX.get() - containerWidth.current / 2) / (containerWidth.current / 2); const normY = (pointerY.get() - containerHeight.current / 2) / (containerHeight.current / 2); parallaxX = normX * depth * containerWidth.current; parallaxY = normY * depth * containerHeight.current; } x.set(bobX + parallaxX); y.set(bobY + parallaxY); }); return ( ); } 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@systaliko-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/blocks/floating-elements/index.tsx","content":"$52","type":"registry:block","target":"components/systaliko-ui/floating-elements.tsx"}],"className":"h-[70svh] min-h-80"}]]}]