5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60:T2452,"use client"; import { useEffect, useId, useRef, useState } from "react"; import type { CSSProperties, ReactNode } from "react"; import "./GlassButton.css"; /* ---------- Refracción real (solo Chromium): mapa de desplazamiento generado en canvas ---------- */ /** Solo Chromium acepta url(#filtro) dentro de backdrop-filter; el resto cae al desenfoque simple. */ function canRefract(): boolean { if (typeof CSS === "undefined" || typeof navigator === "undefined") return false; return /Chrome\//.test(navigator.userAgent) && CSS.supports("backdrop-filter", "url(#a)"); } interface RefractionMap { url: string; scale: number; w: number; h: number } /** Mapa de desplazamiento: en el bisel la luz se curva hacia adentro y, con zoom > 1, el centro también amplía. */ function buildRefractionMap(w: number, h: number, radius: number, bezel: number, zoom = 1): RefractionMap | null { if (w < 4 || h < 4) return null; const c = document.createElement("canvas"); c.width = w; c.height = h; const ctx = c.getContext("2d"); if (!ctx) return null; const img = ctx.createImageData(w, h); const vx = new Float32Array(w * h); const vy = new Float32Array(w * h); const hw = w / 2, hh = h / 2, r = Math.min(radius, hw, hh); const k = 1 - 1 / zoom; let max = 0.001; for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { const px = x + 0.5 - hw, py = y + 0.5 - hh; const qx = Math.abs(px) - (hw - r), qy = Math.abs(py) - (hh - r); const sdf = Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - r; if (sdf > 0) continue; let nx: number, ny: number; if (qx > 0 && qy > 0) { const l = Math.hypot(qx, qy) || 1; nx = (Math.sign(px) * qx) / l; ny = (Math.sign(py) * qy) / l; } else if (qx > qy) { nx = Math.sign(px); ny = 0; } else { nx = 0; ny = Math.sign(py); } const t = Math.min(1, -sdf / bezel); const m = Math.pow(1 - t, 2.2) * bezel; const dx = -nx * m - px * k, dy = -ny * m - py * k; const i = y * w + x; vx[i] = dx; vy[i] = dy; max = Math.max(max, Math.abs(dx), Math.abs(dy)); } } const d = img.data; for (let i = 0; i < w * h; i++) { d[i * 4] = Math.round(127.5 + (127.5 * vx[i]) / max); d[i * 4 + 1] = Math.round(127.5 + (127.5 * vy[i]) / max); d[i * 4 + 2] = 128; d[i * 4 + 3] = 255; } ctx.putImageData(img, 0, 0); return { url: c.toDataURL("image/png"), scale: max * 2, w, h }; } /** Mide el elemento y mantiene su mapa de refracción al día (solo si el navegador lo soporta). */ function useRefractionMap(ref: React.RefObject, radius: number, bezel: number, zoom = 1): RefractionMap | null { const [mapa, setMapa] = useState(null); useEffect(() => { if (!canRefract()) return; const el = ref.current; if (!el) return; let raf = 0; const run = () => { const m = buildRefractionMap(el.offsetWidth, el.offsetHeight, radius, bezel, zoom); if (m) setMapa((p) => (p && p.w === m.w && p.h === m.h ? p : m)); }; const ro = new ResizeObserver(() => { cancelAnimationFrame(raf); raf = requestAnimationFrame(run); }); ro.observe(el); run(); return () => { ro.disconnect(); cancelAnimationFrame(raf); }; }, [ref, radius, bezel, zoom]); return mapa; } /** Filtro SVG: desenfoque, desplazamiento por el mapa y saturación; con dispersión separa los canales RGB como un cristal real. */ function RefractionFilter({ id, mapa, strength, blur = 0, saturate = 1.6, dispersion = 0 }: { id: string; mapa: RefractionMap; strength: number; blur?: number; saturate?: number; dispersion?: number }) { const s = mapa.scale * strength; const disp = (scale: number, result: string) => ( ); return ( ); } /** Valor de backdrop-filter: el filtro SVG si hay refracción; desenfoque + saturación si no. */ function glassBackdrop(id: string, mapa: RefractionMap | null, blur: number, saturate = 1.6): string { return mapa ? `url(#${id})` : `blur(${blur}px) saturate(${saturate}) brightness(1.06)`; } export interface GlassButtonProps { /** Texto del botón. */ children?: ReactNode; /** Alto del botón: pequeño, mediano o grande. */ size?: "sm" | "md" | "lg"; /** Muestra una flecha al final del texto. */ arrow?: boolean; /** Desenfoque del fondo detrás del vidrio, en px. */ blur?: number; /** Fuerza de la refracción en el borde (0 = sin curvar la luz). */ refraction?: number; /** Color del tinte del vidrio. */ tint?: string; /** Color del texto. */ color?: string; /** Pinta una escena de color animada detrás (para verlo refractar). */ scene?: boolean; /** Desactiva el botón. */ disabled?: boolean; /** Se llama al hacer clic. */ onClick?: (e: React.MouseEvent) => void; /** Clase extra para el botón. */ className?: string; /** Estilos extra para el botón. */ style?: CSSProperties; } const HEIGHT = { sm: 40, md: 54, lg: 68 } as const; /** Botón de vidrio líquido: refracta el fondo, brilla donde lo toca la luz y se aplasta como una gota al pulsar. */ export function GlassButton({ children, size = "md", arrow = true, blur = 1.2, refraction = 1, tint = "rgba(255,255,255,0.12)", color = "#fff", scene = false, disabled = false, onClick, className = "", style, }: GlassButtonProps) { const btn = useRef(null); const glass = useRef(null); const fid = "furin-glass-button-" + useId().replace(/[^a-zA-Z0-9]/g, ""); const h = HEIGHT[size]; const mapa = useRefractionMap(glass, h / 2, h * 0.3); const [onda, setOnda] = useState(0); // La luz sigue al cursor sobre el botón (sin resorte: es un destello, no una masa). useEffect(() => { const el = btn.current; if (!el) return; const move = (e: PointerEvent) => { const b = el.getBoundingClientRect(); el.style.setProperty("--furin-glass-button-mx", `${e.clientX - b.left}px`); el.style.setProperty("--furin-glass-button-my", `${e.clientY - b.top}px`); }; el.addEventListener("pointermove", move); el.addEventListener("pointerdown", move); return () => { el.removeEventListener("pointermove", move); el.removeEventListener("pointerdown", move); }; }, []); const vars = { "--furin-glass-button-h": `${h}px`, "--furin-glass-button-tint": tint, color } as CSSProperties; const back = glassBackdrop(fid, mapa, blur); return ( <> {scene ? : null} {mapa ? : null} ); } function Scene() { return ( ); } export default GlassButton; 61:T158e,.furin-glass-button { --furin-glass-button-mx: 30%; --furin-glass-button-my: -20px; position: relative; z-index: 1; display: inline-grid; place-items: center; height: var(--furin-glass-button-h); padding: 0 calc(var(--furin-glass-button-h) * 0.55); border: 0; border-radius: 999px; background: none; font: 600 16px/1 Geist, system-ui, -apple-system, sans-serif; letter-spacing: -0.01em; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; transform: scale(1); /* Resorte con rebote: sube, se pasa un poco y se asienta. */ transition: transform 0.55s cubic-bezier(0.3, 1.7, 0.5, 1); } .furin-glass-button--sm { font-size: 14px; } .furin-glass-button--lg { font-size: 19px; } .furin-glass-button:hover { transform: scale(1.06); } .furin-glass-button:active { transform: scale(0.93, 0.9); transition-duration: 0.14s; transition-timing-function: ease-out; } .furin-glass-button:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); } .furin-glass-button:disabled { cursor: not-allowed; opacity: 0.45; } .furin-glass-button__glass { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.1)), var(--furin-glass-button-tint); /* Sombra de contacto fuera del borde (un filter en el padre rompería el backdrop-filter). */ box-shadow: 0 14px 22px -10px rgba(5, 8, 30, 0.55), 0 3px 6px -1px rgba(5, 8, 30, 0.3), inset 0 -8px 14px -6px rgba(255, 255, 255, 0.22), inset 0 10px 14px -10px rgba(255, 255, 255, 0.4); } .furin-glass-button__sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(90px circle at var(--furin-glass-button-mx) var(--furin-glass-button-my), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 0.3s; } .furin-glass-button:hover .furin-glass-button__sheen { opacity: 1; } .furin-glass-button__onda { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--furin-glass-button-mx) var(--furin-glass-button-my), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 55%); } .furin-glass-button__onda.is-on { animation: furin-glass-button-onda 0.75s ease-out; } @keyframes furin-glass-button-onda { from { opacity: 0.9; clip-path: circle(0 at var(--furin-glass-button-mx) var(--furin-glass-button-my)); } to { opacity: 0; clip-path: circle(260px at var(--furin-glass-button-mx) var(--furin-glass-button-my)); } } .furin-glass-button__rim { position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.05) 62%, rgba(255, 255, 255, 0.6) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .furin-glass-button__label { position: relative; display: inline-flex; align-items: center; gap: 9px; text-shadow: 0 1px 10px rgba(10, 14, 50, 0.4); white-space: nowrap; } .furin-glass-button__arrow { transition: transform 0.45s cubic-bezier(0.3, 1.7, 0.5, 1); } .furin-glass-button:hover .furin-glass-button__arrow { transform: translateX(4px); } @media (prefers-reduced-motion: reduce) { .furin-glass-button, .furin-glass-button__arrow { transition: none; } .furin-glass-button__onda.is-on { animation: none; } } /* Escena de color: formas con borde nítido para que la refracción se note (solo se pinta con scene). */ .furin-glass-button-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(160deg, #0d1236 0%, #1b0f3d 55%, #0b2335 100%); } .furin-glass-button-scene i { position: absolute; border-radius: 50%; animation: furin-glass-button-flota var(--t, 14s) ease-in-out infinite alternate; } .furin-glass-button-scene i:nth-child(1) { --t: 13s; --dx: 80px; --dy: 40px; width: 190px; height: 190px; left: 6%; top: 10%; background: radial-gradient(circle at 32% 28%, #ffd0ea 0, #ff5aa5 42%, #c21f78 100%); } .furin-glass-button-scene i:nth-child(2) { --t: 17s; --dx: -70px; --dy: -50px; width: 230px; height: 230px; right: 0%; top: 28%; background: radial-gradient(circle at 34% 30%, #bcd3ff, #4f7dff 45%, #2437c9); } .furin-glass-button-scene i:nth-child(3) { --t: 11s; --dx: 90px; --dy: -60px; width: 150px; height: 150px; left: 30%; bottom: -4%; background: radial-gradient(circle at 34% 30%, #d3fff3, #37e0b9 45%, #0a8e86); } .furin-glass-button-scene i:nth-child(4) { --t: 9s; --dx: -60px; --dy: 70px; width: 90px; height: 90px; right: 28%; top: 4%; background: radial-gradient(circle at 34% 30%, #fff2cc, #ffb347 50%, #e6700f); } .furin-glass-button-scene b { position: absolute; inset: -10% -14%; background: repeating-linear-gradient(105deg, transparent 0 44px, rgba(255, 255, 255, 0.22) 44px 47px); animation: furin-glass-button-lineas 12s ease-in-out infinite alternate; } @keyframes furin-glass-button-flota { to { transform: translate(var(--dx), var(--dy)) scale(1.1); } } @keyframes furin-glass-button-lineas { to { transform: translateX(-70px); } } @media (prefers-reduced-motion: reduce) { .furin-glass-button-scene i, .furin-glass-button-scene b { animation: none; } } 5e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L5f",null,{"files":[{"path":"registry/glass-button/GlassButton.tsx","content":"$60","type":"registry:component","target":"components/furin/glass-button/GlassButton.tsx"},{"path":"registry/glass-button/GlassButton.css","content":"$61","type":"registry:file","target":"components/furin/glass-button/GlassButton.css"}],"className":"h-[70svh] min-h-80"}]]}]