51: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"] 52: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"] 53:T2c72,"use client"; import { Sparkles } from "lucide-react"; import type React from "react"; import { useEffect, useMemo, useRef, useState } from "react"; interface LiquidMetalButtonProps { label?: string; onClick?: () => void; viewMode?: "text" | "icon"; } export function LiquidMetalButton({ label = "Get Started", onClick, viewMode = "text", }: LiquidMetalButtonProps) { const [isHovered, setIsHovered] = useState(false); const [isPressed, setIsPressed] = useState(false); const [ripples, setRipples] = useState< Array<{ x: number; y: number; id: number }> >([]); const shaderRef = useRef(null); // biome-ignore lint/suspicious/noExplicitAny: External library without types const shaderMount = useRef(null); const buttonRef = useRef(null); const rippleId = useRef(0); const dimensions = useMemo(() => { if (viewMode === "icon") { return { width: 46, height: 46, innerWidth: 42, innerHeight: 42, shaderWidth: 46, shaderHeight: 46, }; } else { return { width: 142, height: 46, innerWidth: 138, innerHeight: 42, shaderWidth: 142, shaderHeight: 46, }; } }, [viewMode]); useEffect(() => { const styleId = "shader-canvas-style-exploded"; if (!document.getElementById(styleId)) { const style = document.createElement("style"); style.id = styleId; style.textContent = ` .shader-container-exploded canvas { width: 100% !important; height: 100% !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; border-radius: 100px !important; } @keyframes ripple-animation { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(4); opacity: 0; } } `; document.head.appendChild(style); } const loadShader = async () => { try { const { liquidMetalFragmentShader, ShaderMount } = await import( "@paper-design/shaders" ); if (shaderRef.current) { if (shaderMount.current?.destroy) { shaderMount.current.destroy(); } shaderMount.current = new ShaderMount( shaderRef.current, liquidMetalFragmentShader, { u_repetition: 4, u_softness: 0.5, u_shiftRed: 0.3, u_shiftBlue: 0.3, u_distortion: 0, u_contour: 0, u_angle: 45, u_scale: 8, u_shape: 1, u_offsetX: 0.1, u_offsetY: -0.1, }, undefined, 0.6, ); } } catch (error) { console.error("[v0] Failed to load shader:", error); } }; loadShader(); return () => { if (shaderMount.current?.destroy) { shaderMount.current.destroy(); shaderMount.current = null; } }; }, []); const handleMouseEnter = () => { setIsHovered(true); shaderMount.current?.setSpeed?.(1); }; const handleMouseLeave = () => { setIsHovered(false); setIsPressed(false); shaderMount.current?.setSpeed?.(0.6); }; const handleClick = (e: React.MouseEvent) => { if (shaderMount.current?.setSpeed) { shaderMount.current.setSpeed(2.4); setTimeout(() => { if (isHovered) { shaderMount.current?.setSpeed?.(1); } else { shaderMount.current?.setSpeed?.(0.6); } }, 300); } if (buttonRef.current) { const rect = buttonRef.current.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const ripple = { x, y, id: rippleId.current++ }; setRipples((prev) => [...prev, ripple]); setTimeout(() => { setRipples((prev) => prev.filter((r) => r.id !== ripple.id)); }, 600); } onClick?.(); }; return (

{viewMode === "icon" && ( )} {viewMode === "text" && ( {label} )}

); } 50:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}],["$","li","@paper-design/shaders",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40paper-design%2Fshaders","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":"@paper-design/shaders"}]]}]}]]}],["$","$L51",null,{"namespace":"@jolyui","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/liquid-metal-button.tsx","content":"$53","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]