Ensamble de píxeles

El texto se arma desde una nube de partículas con resortes; el cursor las dispersa y vuelven solas a su sitio.

Vista previa en vivo

Pixels

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { PixelAssemble } 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
children	string	"Pixels"	El texto que se arma con partículas (acepta saltos de línea).
size	number	150	Tamaño máximo de la letra, en px (se reduce solo si no cabe).
height	number	260	Alto del lienzo, en px.
gap	number	3	Separación entre partículas, en px: más chico, más fino.
radius	number	84	Radio del cursor que dispersa las partículas, en px.
repel	number	1	Fuerza con que el cursor empuja.
replay	number	9	Cada cuántos segundos el texto se deshace y se vuelve a armar (0 = nunca).
color	string	"#F4F5F7"	Color de las partículas.
accent	string	"#7CF5C6"	Color que toman las partículas cuando se mueven.

Glitch RGB
Gratis
Texto limpio que cada tanto se parte en ráfagas cortas: canales RGB separados y franjas desplazadas.
Texto
Lámina dorada
Gratis
Texto en lámina de oro con relieve y destello especular al mover el cursor.
Texto
Letras magnéticas
Gratis
Cada letra es atraída por el cursor con un resorte con rebote, y se tiñe y crece al acercarse.
Texto