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:T2f19,"use client"; import { useEffect, useId, useRef, useState } from "react"; import type { CSSProperties, ReactNode } from "react"; import "./LensCursor.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 LensCursorProps { /** Contenido que la lupa amplía (se muestra dos veces: el real y el de la lente). */ children?: ReactNode; /** Cuánto amplía la lupa. */ zoom?: number; /** Diámetro de la lupa, en px. */ size?: number; /** Fuerza de la refracción en el borde de la lente (0 = sin curvar la luz). */ refraction?: number; /** Rigidez del resorte con el que la lupa persigue al cursor. */ stiffness?: number; /** Oculta el cursor del sistema dentro del área. */ hideCursor?: boolean; /** Pinta una lámina con texto diminuto y formas de color para ver la ampliación. */ scene?: boolean; /** Texto de la lámina (con `scene`): se repite hasta llenarla. */ sceneText?: string; /** Clase extra para el contenedor. */ className?: string; /** Estilos extra para el contenedor. */ style?: CSSProperties; } const MICRO = "Glass is not a material so much as a state: a liquid that stopped flowing. Passing through it, light bends, and what seemed far away comes closer. A lens is just glass with curvature, and the curvature decides how close the world gets. This magnifier chases the cursor on a spring, enlarges what lies beneath with real text, never pixelating it, and bends light at its rim like true crystal."; function Mundo({ scene, text, children }: { scene: boolean; text: string; children?: ReactNode }) { return (

{scene ? ( <>

{(text.trimEnd() + " ").repeat(14)}
) : null}
{children}

); } /** Lupa de vidrio que persigue al cursor con un resorte y amplía el contenido de debajo con texto real y borde refractante. */ export function LensCursor({ children, zoom = 2.2, size = 176, refraction = 1, stiffness = 420, hideCursor = true, scene = false, sceneText = MICRO, className = "", style, }: LensCursorProps) { const root = useRef(null); const lente = useRef(null); const dentro = useRef(null); const cristal = useRef(null); const fid = "furin-lens-cursor-" + useId().replace(/[^a-zA-Z0-9]/g, ""); const mapa = useRefractionMap(cristal, size / 2, size * 0.14); const [caja, setCaja] = useState({ w: 0, h: 0 }); // El mundo de la lente debe medir lo mismo que el área real para que la ampliación caiga exacta. useEffect(() => { const el = root.current; if (!el) return; const ro = new ResizeObserver(() => setCaja({ w: el.offsetWidth, h: el.offsetHeight })); ro.observe(el); setCaja({ w: el.offsetWidth, h: el.offsetHeight }); return () => ro.disconnect(); }, []); useEffect(() => { const el = root.current, len = lente.current, int = dentro.current; if (!el || !len || !int) return; const quieto = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const R = size / 2; const s = { x: 0, y: 0, vx: 0, vy: 0, k: 0, vk: 0, tx: 0, ty: 0, dentro: false, init: false }; let raf = 0, t0 = 0; const pinta = () => { len.style.transform = `translate(${(s.x - R).toFixed(2)}px, ${(s.y - R).toFixed(2)}px) scale(${Math.max(s.k, 0.001).toFixed(3)})`; len.style.opacity = String(Math.min(1, s.k * 1.6)); int.style.transform = `translate(${(R - s.x * zoom).toFixed(2)}px, ${(R - s.y * zoom).toFixed(2)}px) scale(${zoom})`; }; const tick = (t: number) => { const dt = Math.min(0.032, (t - t0) / 1000 || 0.016); t0 = t; const c = 2 * Math.sqrt(stiffness) * 0.85; for (let i = 0; i < 2; i++) { s.vx += (stiffness * (s.tx - s.x) - c * s.vx) * (dt / 2); s.vy += (stiffness * (s.ty - s.y) - c * s.vy) * (dt / 2); s.x += s.vx * (dt / 2); s.y += s.vy * (dt / 2); const ko = s.dentro ? 1 : 0; s.vk += (260 * (ko - s.k) - 19 * s.vk) * (dt / 2); s.k += s.vk * (dt / 2); } pinta(); const ko = s.dentro ? 1 : 0; const quietoYa = Math.abs(s.tx - s.x) + Math.abs(s.ty - s.y) < 0.15 && Math.abs(s.vx) + Math.abs(s.vy) < 0.5 && Math.abs(ko - s.k) < 0.004 && Math.abs(s.vk) < 0.02; if (quietoYa && !s.dentro) { s.k = 0; pinta(); raf = 0; return; } raf = quietoYa ? 0 : requestAnimationFrame(tick); }; const wake = () => { if (!raf) { t0 = performance.now(); raf = requestAnimationFrame(tick); } }; const aim = (e: PointerEvent) => { const b = el.getBoundingClientRect(); s.tx = e.clientX - b.left; s.ty = e.clientY - b.top; if (!s.init || !s.dentro) { s.x = s.tx; s.y = s.ty; s.vx = s.vy = 0; s.init = true; } s.dentro = true; if (quieto) { s.x = s.tx; s.y = s.ty; s.k = 1; pinta(); } else wake(); }; const out = () => { s.dentro = false; if (quieto) { s.k = 0; pinta(); } else wake(); }; el.addEventListener("pointermove", aim); el.addEventListener("pointerdown", aim); el.addEventListener("pointerleave", out); el.addEventListener("pointercancel", out); pinta(); return () => { el.removeEventListener("pointermove", aim); el.removeEventListener("pointerdown", aim); el.removeEventListener("pointerleave", out); el.removeEventListener("pointercancel", out); cancelAnimationFrame(raf); }; }, [size, zoom, stiffness]); const vars = { "--furin-lens-cursor-size": `${size}px` } as CSSProperties; const back = glassBackdrop(fid, mapa, 0.3, 1.3); return (
{mapa ? : null} {children}
); } export default LensCursor; 61:Te9e,.furin-lens-cursor { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: Geist, system-ui, -apple-system, sans-serif; color: #fff; touch-action: none; } .furin-lens-cursor.is-sin-cursor { cursor: none; } .furin-lens-cursor__mundo-contenido { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: linear-gradient(155deg, #10163a 0%, #1c1046 55%, #0b2638 100%); } .furin-lens-cursor__rejilla { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 14px 14px; } .furin-lens-cursor__formas i { position: absolute; border-radius: 50%; } .furin-lens-cursor__formas i:nth-child(1) { width: 150px; height: 150px; left: 4%; top: 8%; background: radial-gradient(circle at 32% 28%, #ffd0ea, #ff5aa5 45%, #c21f78); } .furin-lens-cursor__formas i:nth-child(2) { width: 190px; height: 190px; right: 2%; bottom: -8%; background: radial-gradient(circle at 34% 30%, #bcd3ff, #4f7dff 45%, #2437c9); } .furin-lens-cursor__formas i:nth-child(3) { width: 90px; height: 90px; right: 24%; top: 6%; background: radial-gradient(circle at 34% 30%, #fff2cc, #ffb347 50%, #e6700f); } .furin-lens-cursor__formas i:nth-child(4) { width: 70px; height: 70px; left: 26%; bottom: 6%; background: radial-gradient(circle at 34% 30%, #d3fff3, #37e0b9 45%, #0a8e86); } .furin-lens-cursor__micro { position: absolute; inset: 0; padding: 10px 12px; column-count: 4; column-gap: 12px; overflow: hidden; font-size: 7px; line-height: 1.5; font-weight: 500; text-align: justify; color: rgba(255, 255, 255, 0.55); user-select: none; } .furin-lens-cursor__titulo { position: relative; padding: 10px 18px; border-radius: 16px; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; text-align: center; text-shadow: 0 2px 18px rgba(5, 8, 40, 0.75), 0 0 2px rgba(5, 8, 40, 0.6); background: rgba(10, 14, 50, 0.28); } .furin-lens-cursor__titulo:empty { display: none; } .furin-lens-cursor__lente { position: absolute; left: 0; top: 0; width: var(--furin-lens-cursor-size); height: var(--furin-lens-cursor-size); border-radius: 50%; overflow: hidden; opacity: 0; transform: translate(-999px, -999px) scale(0.001); pointer-events: none; /* La sombra va en otra capa porque el overflow la recortaría: ver __rim. */ } .furin-lens-cursor__mundo { position: absolute; left: 0; top: 0; transform-origin: 0 0; } .furin-lens-cursor__cristal { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.1) 100%); box-shadow: inset 0 -14px 22px -10px rgba(255, 255, 255, 0.28), inset 0 12px 18px -12px rgba(255, 255, 255, 0.4), inset 0 0 26px rgba(10, 14, 60, 0.28); } .furin-lens-cursor__brillo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 34% 20% at 30% 18%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse 30% 14% at 74% 88%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 100%); } .furin-lens-cursor__rim { position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: conic-gradient(from 210deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0.05) 45%, rgba(255, 255, 255, 0.65) 75%, rgba(255, 255, 255, 0.95)); -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); } 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/lens-cursor/LensCursor.tsx","content":"$60","type":"registry:component","target":"components/furin/lens-cursor/LensCursor.tsx"},{"path":"registry/lens-cursor/LensCursor.css","content":"$61","type":"registry:file","target":"components/furin/lens-cursor/LensCursor.css"}],"className":"h-[70svh] min-h-80"}]]}]