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:T16a1,"use client"; import * as React from "react"; import { motion, useMotionValue, useSpring, type MotionValue, } from "framer-motion"; import { cn } from "@/lib/utils"; export type WordMagnetProps = { text?: string; radius?: number; force?: number; damping?: number; returnDelay?: number; disableOnMobile?: boolean; overflow?: React.CSSProperties["overflow"]; className?: string; wordClassName?: string; style?: React.CSSProperties; }; type MagneticWordProps = { word: string; mouseX: MotionValue; mouseY: MotionValue; containerRef: React.RefObject; radius: number; force: number; damping: number; returnDelay: number; disabled: boolean; className?: string; }; function useIsMobile(disabled: boolean) { const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { if (!disabled || typeof window === "undefined") return; const check = () => { setIsMobile(window.innerWidth < 768 || "ontouchstart" in window); }; check(); window.addEventListener("resize", check); return () => window.removeEventListener("resize", check); }, [disabled]); return isMobile; } function MagneticWord({ word, mouseX, mouseY, containerRef, radius, force, damping, returnDelay, disabled, className, }: MagneticWordProps) { const wordRef = React.useRef(null); const returnTimeout = React.useRef(null); const x = useSpring(0, { damping, stiffness: 200 }); const y = useSpring(0, { damping, stiffness: 200 }); React.useEffect(() => { if (disabled) { x.set(0); y.set(0); return; } const updatePosition = () => { const wordNode = wordRef.current; const containerNode = containerRef.current; if (!wordNode || !containerNode) return; const wordRect = wordNode.getBoundingClientRect(); const containerRect = containerNode.getBoundingClientRect(); const wordCenterX = wordRect.left - containerRect.left + wordRect.width / 2; const wordCenterY = wordRect.top - containerRect.top + wordRect.height / 2; const dx = wordCenterX - mouseX.get(); const dy = wordCenterY - mouseY.get(); const distance = Math.hypot(dx, dy); if (distance < radius) { const angle = Math.atan2(dy, dx); const strength = ((radius - distance) / radius) * force * 100; x.set(Math.cos(angle) * strength); y.set(Math.sin(angle) * strength); if (returnTimeout.current !== null) { window.clearTimeout(returnTimeout.current); } returnTimeout.current = window.setTimeout(() => { x.set(0); y.set(0); }, returnDelay); } }; const unsubscribeX = mouseX.on("change", updatePosition); const unsubscribeY = mouseY.on("change", updatePosition); return () => { unsubscribeX(); unsubscribeY(); if (returnTimeout.current !== null) { window.clearTimeout(returnTimeout.current); } }; }, [containerRef, damping, disabled, force, mouseX, mouseY, radius, returnDelay, x, y]); if (disabled) { return ( {word} ); } return ( {word} ); } export function WordMagnet({ text = "Magnetic words react to your cursor and snap back into place", radius = 130, force = 0.45, damping = 28, returnDelay = 360, disableOnMobile = true, overflow = "visible", className, wordClassName, style, }: WordMagnetProps) { const containerRef = React.useRef(null); const mouseX = useMotionValue(-9999); const mouseY = useMotionValue(-9999); const rafRef = React.useRef(null); const isMobile = useIsMobile(disableOnMobile); const words = React.useMemo( () => text.split(" ").filter((word) => word.trim().length > 0), [text], ); const disabled = disableOnMobile && isMobile; React.useEffect(() => { return () => { if (rafRef.current !== null) { window.cancelAnimationFrame(rafRef.current); } }; }, []); function handlePointerMove(event: React.PointerEvent) { if (disabled) return; const rect = event.currentTarget.getBoundingClientRect(); const nextX = event.clientX - rect.left; const nextY = event.clientY - rect.top; if (rafRef.current !== null) { window.cancelAnimationFrame(rafRef.current); } rafRef.current = window.requestAnimationFrame(() => { mouseX.set(nextX); mouseY.set(nextY); }); } function handlePointerLeave() { mouseX.set(-9999); mouseY.set(-9999); } return (

{words.map((word, index) => ( ))}

); } export default WordMagnet; 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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}],["$","li","react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react","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":"react"}]]}]}]]}],["$","$L50",null,{"namespace":"@nexus-labs","registryDependencies":["https://www.nexus-ui.com/api/registry/nexus-font","utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"next-ui/word-magnet/index.ts","content":"export { WordMagnet } from \"./word-magnet\";\nexport type { WordMagnetProps } from \"./word-magnet\";\n","type":"registry:lib","target":"components/word-magnet/index.ts"},{"path":"next-ui/word-magnet/word-magnet.tsx","content":"$52","type":"registry:component","target":"components/word-magnet/word-magnet.tsx"}],"className":"h-[70svh] min-h-80"}]]}]