Rejilla viva

Campo de puntos que se aparta y se ilumina alrededor del cursor con resorte, y que también puede ondular por sí solo.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { RejillaViva } 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
spacing	number	28	Distancia entre un punto y el siguiente, en px.
dotSize	number	3	Diámetro de cada punto en reposo, en px.
radius	number	170	Radio de influencia del cursor o del dedo, en px.
strength	number	1	Cuánto se apartan los puntos del cursor.
baseColor	string	"#4A4A62"	Color de los puntos en reposo.
activeColor	string	"#8C9BFF"	Color de los puntos que el cursor ilumina.
ambientWave	boolean	true	Lanza una onda suave de vez en cuando si no hay cursor.
listenTo	"parent" \| "window"	"parent"	Dónde escucha el cursor: su contenedor o toda la ventana (para usarla de fondo detrás de otro contenido).
className	string	""	Clase extra para el contenedor.
style	CSSProperties	undefined	Estilos extra para el contenedor.
children	ReactNode	undefined	Contenido que se dibuja encima de la rejilla, centrado.