Reflector

Rejilla de tarjetas cuyo borde se ilumina donde pasa el cursor, con una sola luz compartida entre todas.

Vista previa en vivo

Solo React. Sin GSAP, sin Three y sin sorpresas en el peso de tu página.

Props tipadas, comentarios en español y código que da gusto leer.

Se pausa fuera de pantalla y cuida la batería de quien te visita.

Ajusta cada prop en vivo y copia el código cuando ya te encante.

Quien lo pide recibe un cuadro quieto, igual de bonito.

Licencia MIT en los gratis y proyectos ilimitados con Pro.

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { Reflector } from "furin";

También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.

Prop	Tipo	Por defecto	Descripción
items	{ title: string; text: string; icon?: ReactNode }[]	"6 de ejemplo"	Tarjetas con título, texto e ícono opcional.
columns	number	3	Cuántas columnas tiene la rejilla; en pantallas angostas se reducen solas.
color	string	"#7C8BFF"	Color de la luz.
radius	number	260	Radio de la luz, en px.
gap	number	16	Espacio entre tarjetas, en px.
className	string	""	Clase extra para el contenedor.
style	CSSProperties	undefined	Estilos extra; también sirve para cambiar los colores de las tarjetas con variables CSS.
children	ReactNode	undefined	Tarjetas propias: cada hijo se envuelve en una tarjeta (si no hay items).