4e: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"] 4f: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"] 50:T144c,"use client"; import { motion, useInView, useMotionValue, useReducedMotion, useSpring, useTransform } from "motion/react"; import { type ComponentProps, type PointerEvent, useEffect, useId, useRef } from "react"; import { cn } from "@/lib/utils"; export interface LavaLampBlob { size: number; color: string; x: number[]; y: number[]; duration: number; } const palette = ["--color-violet-500", "--color-fuchsia-500", "--color-rose-500", "--color-orange-500", "--color-amber-400"]; const c = (n: number) => `var(${palette[n - 1]})`; const defaultBlobs: LavaLampBlob[] = [ { size: 34, color: c(2), x: [16, 40, 28, 10], y: [30, 58, 80, 52], duration: 19 }, { size: 28, color: c(1), x: [82, 60, 72, 92], y: [24, 50, 78, 50], duration: 16 }, { size: 20, color: c(3), x: [50, 66, 38, 30], y: [12, 38, 44, 18], duration: 13 }, { size: 26, color: c(4), x: [36, 20, 54, 62], y: [88, 62, 52, 80], duration: 21 }, { size: 17, color: c(5), x: [68, 86, 56, 46], y: [84, 64, 68, 92], duration: 11 }, { size: 14, color: c(1), x: [90, 72, 94, 78], y: [10, 30, 40, 16], duration: 9 }, { size: 13, color: c(3), x: [6, 24, 14, 30], y: [10, 20, 36, 12], duration: 12 }, ]; export interface LavaLampProps extends ComponentProps<"div"> { blobs?: LavaLampBlob[]; followPointer?: boolean; pointerColor?: string; goo?: number; intensity?: number; } const LEG = "cubic-bezier(0.37, 0, 0.63, 1)"; function Blob({ blob, running }: { blob: LavaLampBlob; running: boolean }) { const ref = useRef(null); const anim = useRef(null); const reduce = useReducedMotion(); const { x, y, duration } = blob; const path = x.map((v, i) => `${v},${y[i] ?? y[0]}`).join(" "); useEffect(() => { const el = ref.current; if (!el || reduce) return; const points = path.split(" ").map((p) => p.split(",").map(Number)); const frames = [...points, points[0]].map(([px, py]) => ({ transform: `translate(${px}%, ${py}%)`, easing: LEG })); anim.current = el.animate(frames, { duration: duration * 1000, iterations: Number.POSITIVE_INFINITY }); return () => { anim.current?.cancel(); anim.current = null; }; }, [path, duration, reduce]); useEffect(() => { if (running) anim.current?.play(); else anim.current?.pause(); }, [running]); return (

); } export function LavaLamp({ blobs = defaultBlobs, followPointer = true, pointerColor = c(3), goo = 10, intensity = 0.85, className, children, onPointerMove, onPointerLeave, ...props }: LavaLampProps) { const filterId = `lava-lamp-${useId().replace(/:/g, "")}`; const ref = useRef(null); const inView = useInView(ref); const reduce = useReducedMotion(); const px = useMotionValue(0); const py = useMotionValue(0); const present = useMotionValue(0); const sx = useSpring(px, { stiffness: 38, damping: 14, mass: 1.2 }); const sy = useSpring(py, { stiffness: 38, damping: 14, mass: 1.2 }); const swell = useSpring(present, { stiffness: 120, damping: 20 }); const scale = useTransform(swell, [0, 1], [0.3, 1]); const opacity = useTransform(swell, [0, 0.25], [0, 1]); const handleMove = (e: PointerEvent) => { onPointerMove?.(e); if (!followPointer || reduce || e.pointerType === "touch") return; const r = e.currentTarget.getBoundingClientRect(); if (present.get() === 0) { sx.jump(e.clientX - r.left); sy.jump(e.clientY - r.top); } px.set(e.clientX - r.left); py.set(e.clientY - r.top); present.set(1); }; const handleLeave = (e: PointerEvent) => { onPointerLeave?.(e); present.set(0); }; return (

{blobs.map((b, i) => ( ))} {followPointer && ( )}

{children}

); } 4d:["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@devl","registryDependencies":["utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/devl/lava-lamp.tsx","content":"$50","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]