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:T148c,"use client"; import { useEffect, useRef } from "react"; import type { CSSProperties, PointerEvent, ReactNode } from "react"; import "./ShineCard.css"; export interface ShineCardProps { /** Título de la tarjeta. */ title?: string; /** Rótulo pequeño sobre el título. */ eyebrow?: string; /** Texto de la tarjeta. */ children?: ReactNode; /** Línea inferior en tipografía mono. */ footer?: string; /** Acabado del metal de la tarjeta. */ tone?: "titanium" | "aluminum" | "graphite"; /** Muestra el disco pulido de la esquina. */ badge?: boolean; /** Fuerza del brillo. */ intensity?: number; /** Radio de las esquinas, en px. */ radius?: number; /** Un barrido de luz cruza la tarjeta cada pocos segundos aunque no haya cursor. */ idle?: boolean; /** Segundos entre barridos automáticos. */ interval?: number; /** Clase extra para la tarjeta. */ className?: string; /** Estilos extra para la tarjeta. */ style?: CSSProperties; } const limitar = (v: number, a: number, b: number) => Math.min(b, Math.max(a, v)); /** Tarjeta de metal satinado: borde cromado que se enciende hacia el cursor, reflejo suave bajo la luz y un barrido de brillo diagonal al entrar. */ export function ShineCard({ title = "Grade 5 titanium", eyebrow = "Series 04", children, footer = "No. 0427", tone = "titanium", badge = true, intensity = 1, radius = 22, idle = true, interval = 6, className = "", style, }: ShineCardProps) { const raiz = useRef(null); const brillo = useRef(null); const angulo = useRef(-45); // ángulo continuo de la luz del borde (para no girar de más al cruzar 360°) const visible = useRef(true); const quieto = useRef(false); // Un barrido: la franja cruza de izquierda a derecha con una curva suave. const barrer = (dur = 1100) => { const el = brillo.current; if (!el || quieto.current || typeof el.animate !== "function") return; el.animate( [ { backgroundPosition: "100% 0", opacity: 1, offset: 0 }, { backgroundPosition: "0% 0", opacity: 1, offset: 1 }, ], { duration: dur, easing: "cubic-bezier(0.4, 0.05, 0.2, 1)" }, ); }; useEffect(() => { quieto.current = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const el = raiz.current; if (!el) return; const io = new IntersectionObserver(([e]) => { visible.current = e.isIntersecting; }); io.observe(el); let id = 0; const tick = () => { if (idle && !quieto.current && visible.current && !el.matches(":hover")) barrer(1500); id = window.setTimeout(tick, Math.max(2, interval) * 1000); }; if (idle && !quieto.current) id = window.setTimeout(tick, 1400); return () => { io.disconnect(); window.clearTimeout(id); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [idle, interval]); const seguir = (e: PointerEvent) => { const el = raiz.current; if (!el) return; const r = el.getBoundingClientRect(); const x = limitar((e.clientX - r.left) / r.width, 0, 1); const y = limitar((e.clientY - r.top) / r.height, 0, 1); // Ángulo del cursor respecto al centro; se desenrolla para que la transición tome siempre el camino corto. let a = (Math.atan2(e.clientX - (r.left + r.width / 2), -(e.clientY - (r.top + r.height / 2))) * 180) / Math.PI; a += Math.round((angulo.current - a) / 360) * 360; angulo.current = a; el.style.setProperty("--sc-x", x.toFixed(3)); el.style.setProperty("--sc-y", y.toFixed(3)); el.style.setProperty("--sc-a", `${a.toFixed(1)}deg`); }; const soltar = () => { const el = raiz.current; if (!el) return; el.style.removeProperty("--sc-x"); el.style.removeProperty("--sc-y"); el.style.removeProperty("--sc-a"); angulo.current = -45; }; const vars = { "--sc-i": intensity, "--sc-r": `${radius}px` } as CSSProperties; return (

{ seguir(e); barrer(); }} onPointerMove={seguir} onPointerLeave={soltar} > {/* El recorte vive en una capa plana interior: la tarjeta (con transform 3D y sombra) no recorta nada, y todo el brillo queda dentro de esta capa. */}

); } export default ShineCard; 61:T1eda,/* Luz del cursor (0 a 1) y su ángulo: registradas para que el navegador las interpole con suavidad. */ @property --sc-x { syntax: ""; inherits: true; initial-value: 0.28; } @property --sc-y { syntax: ""; inherits: true; initial-value: 0.12; } @property --sc-a { syntax: ""; inherits: true; initial-value: -45deg; } .furin-shine-card { --sc-i: 1; --sc-r: 22px; --sc-grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.004%200.75'%20numOctaves='3'%20seed='41'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200.33%200.33%200.33%200%200%200%200%200%200%201'/%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type='linear'%20slope='2.2'%20intercept='-0.6'/%3E%3CfeFuncG%20type='linear'%20slope='2.2'%20intercept='-0.6'/%3E%3CfeFuncB%20type='linear'%20slope='2.2'%20intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'/%3E%3C/svg%3E"); position: relative; width: min(380px, 92%); border-radius: var(--sc-r); isolation: isolate; color: #e9ecf0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 2px 2px rgba(0, 0, 0, 0.5), 0 16px 22px -8px rgba(0, 0, 0, 0.6), 0 38px 52px -22px rgba(0, 0, 0, 0.85), 0 44px 70px -34px rgba(190, 205, 225, 0.18); transform: perspective(900px) rotateX(calc((var(--sc-y) - 0.5) * -5deg)) rotateY(calc((var(--sc-x) - 0.5) * 7deg)); transition: --sc-x 0.35s cubic-bezier(0.2, 0.75, 0.25, 1), --sc-y 0.35s cubic-bezier(0.2, 0.75, 0.25, 1), --sc-a 0.35s cubic-bezier(0.2, 0.75, 0.25, 1); } .furin-shine-card--titanium { --sc-body: linear-gradient(158deg, #4a4e55 0%, #2d3036 38%, #23262b 62%, #33373d 100%); --sc-rim: #fff; --sc-title: linear-gradient(180deg, #ffffff 0%, #c4c9d1 55%, #8f96a0 100%); --sc-text: #b4bac3; --sc-eyebrow: #9aa1ab; } .furin-shine-card--aluminum { --sc-body: linear-gradient(158deg, #d6dae0 0%, #b3bac3 40%, #a3aab4 62%, #c4c9d1 100%); --sc-rim: #fff; --sc-title: linear-gradient(180deg, #2a2e34 0%, #14161a 100%); --sc-text: #3a3f46; --sc-eyebrow: #5b626c; } .furin-shine-card--graphite { --sc-body: linear-gradient(158deg, #2a2d33 0%, #17191d 45%, #101214 62%, #1d2024 100%); --sc-rim: #dfe3e8; --sc-title: linear-gradient(180deg, #f4f6f8 0%, #aab1ba 100%); --sc-text: #8f96a0; --sc-eyebrow: #6c737d; } /* Capa de recorte: aquí viven el metal y todas las capas de luz (grano, foco, barrido, borde). Recorta al radio de la tarjeta de tres formas a la vez, para que ningún motor deje salir el brillo por la esquina aunque la capa esté compuesta o mezclada: border-radius + overflow, clip-path redondeado (también recorta capas compuestas) y una máscara opaca que obliga a Safari a usar un recorte redondeado real. Está aparte de la tarjeta para que su sombra y su transform 3D no se recorten ni lo estorben. */ .furin-shine-card__clip { position: relative; border-radius: inherit; overflow: hidden; isolation: isolate; -webkit-clip-path: inset(0 round var(--sc-r)); clip-path: inset(0 round var(--sc-r)); -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(#fff, #000); /* Velo satinado fijo sobre el metal. */ background: linear-gradient(112deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.05) 58%, rgba(255, 255, 255, 0) 80%), var(--sc-body); } /* Cepillado: ruido SVG estirado en horizontal, mezclado con el metal de abajo. */ .furin-shine-card__grain { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: var(--sc-grain) 0 0 / 300px 300px; mix-blend-mode: soft-light; opacity: 0.6; } /* Borde de metal: un anillo de cromo cuya luz gira hacia el cursor. */ .furin-shine-card__border { position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient( from calc(var(--sc-a) - 90deg) at 50% 50%, rgba(255, 255, 255, calc(0.95 * var(--sc-i))) 0deg, rgba(190, 198, 208, 0.7) 40deg, rgba(90, 96, 106, 0.55) 100deg, rgba(40, 43, 48, 0.9) 170deg, rgba(90, 96, 106, 0.55) 240deg, rgba(190, 198, 208, 0.7) 320deg, rgba(255, 255, 255, calc(0.95 * var(--sc-i))) 360deg ); -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); } /* Foco suave bajo el cursor. */ .furin-shine-card__glow { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: radial-gradient(300px circle at calc(var(--sc-x) * 100%) calc(var(--sc-y) * 100%), rgba(255, 255, 255, calc(0.2 * var(--sc-i))), rgba(255, 255, 255, 0) 70%); mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.35s ease; } .furin-shine-card:hover .furin-shine-card__glow { opacity: 1; } /* Barrido de brillo satinado: una franja ancha con borde suave y una veta oscura detrás. */ .furin-shine-card__sheen { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient( 106deg, transparent 38%, rgba(255, 255, 255, calc(0.05 * var(--sc-i))) 43%, rgba(255, 255, 255, calc(0.24 * var(--sc-i))) 49%, rgba(255, 255, 255, calc(0.34 * var(--sc-i))) 50.5%, rgba(255, 255, 255, calc(0.08 * var(--sc-i))) 55%, transparent 60%, rgba(0, 0, 0, 0.16) 66%, transparent 74% ) 100% 0 / 260% 100% no-repeat; opacity: 0; } /* Disco pulido de la esquina. */ .furin-shine-card__badge { position: absolute; z-index: 2; top: 22px; right: 22px; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.5) 0 18%, rgba(255, 255, 255, 0) 19%), radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 38%), conic-gradient(from calc(var(--sc-a) + 30deg), #f1f4f7, #7d848e, #fafbfc, #5b626b, #eef1f4, #8a919b, #f1f4f7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 5px 8px rgba(0, 0, 0, 0.55), inset 0 -3px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.8); } .furin-shine-card__body { position: relative; z-index: 2; display: grid; gap: 10px; padding: 26px 26px 22px; min-height: 200px; align-content: start; } .furin-shine-card__eyebrow { font: 600 10.5px / 1 ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-eyebrow); } .furin-shine-card__title { margin: 4px 0 0; max-width: calc(100% - 52px); font: 700 28px / 1.12 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.02em; color: transparent; background: var(--sc-title); -webkit-background-clip: text; background-clip: text; } .furin-shine-card__text { margin: 0; max-width: 30ch; font: 400 14.5px / 1.55 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--sc-text); } .furin-shine-card__footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); font: 600 11px / 1 ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-eyebrow); } .furin-shine-card--aluminum .furin-shine-card__footer { border-top-color: rgba(0, 0, 0, 0.14); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5); } @media (prefers-reduced-motion: reduce) { .furin-shine-card { transform: none; transition: 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/shine-card/ShineCard.tsx","content":"$60","type":"registry:component","target":"components/furin/shine-card/ShineCard.tsx"},{"path":"registry/shine-card/ShineCard.css","content":"$61","type":"registry:file","target":"components/furin/shine-card/ShineCard.css"}],"className":"h-[70svh] min-h-80"}]]}]