erikghandClaude Opus 5
5b400cb161
Diez primitivas que dan a la landing el "gráfico y movimiento" que pidió la dueña, todas con guarda de prefers-reduced-motion: - FondoPuntos / PatronPuntos — el patrón de puntos del manual - TarjetaSpotlight, TextoDesenfoque, ContadorNumero — realce y reveal - Carrusel — deslizable, con contador, autoplay pausable - Icono, SimboloTresLineas, IlustracionInflexion — línea, sin relleno - FondoFoto — duotono azul/dorado sobre foto useAutoStep en lib/motion.ts comparte la forma del autoplay del carrusel para indicadores de paso que no son carrusel. IlustracionInflexion documenta un detalle que muerde: motion.path aplica su propio andamiaje de dasharray aunque no reciba initial/animate, así que la rama de reduced motion renderiza <path> planos en vez de intentar neutralizar los animados. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useRef, type ReactNode } from 'react';
|
|
|
|
// Adapted from React Bits' SpotlightCard (reactbits.dev, MIT) — a soft glow
|
|
// that follows the cursor, recoloured to the brand's dorado instead of the
|
|
// original's plain white. Pure CSS custom properties + a `before:` pseudo
|
|
// element, so no separate stylesheet is needed.
|
|
export function TarjetaSpotlight({
|
|
children,
|
|
className = '',
|
|
spotlightColor = 'rgba(196, 148, 46, 0.16)', // dorado, low alpha
|
|
}: {
|
|
children: ReactNode;
|
|
className?: string;
|
|
spotlightColor?: string;
|
|
}) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
const rect = el.getBoundingClientRect();
|
|
el.style.setProperty('--spot-x', `${e.clientX - rect.left}px`);
|
|
el.style.setProperty('--spot-y', `${e.clientY - rect.top}px`);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
onMouseMove={handleMouseMove}
|
|
style={{ ['--spot-color' as string]: spotlightColor }}
|
|
className={`group relative overflow-hidden
|
|
before:absolute before:inset-0 before:pointer-events-none before:opacity-0 before:transition-opacity before:duration-500
|
|
before:[background:radial-gradient(circle_at_var(--spot-x,50%)_var(--spot-y,50%),var(--spot-color),transparent_70%)]
|
|
hover:before:opacity-100 focus-within:before:opacity-100 motion-reduce:before:hidden
|
|
${className}`}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|