Letras magnéticas

Cada letra es atraída por el cursor con un resorte con rebote, y se tiñe y crece al acercarse.

Vista previa en vivo

Magnetic

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { MagneticLetters } 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	"Magnetic"	El texto (acepta saltos de línea).
size	number	96	Tamaño de la letra, en px.
radius	number	170	Radio de atracción del cursor, en px.
strength	number	0.3	Cuánto se acerca cada letra al cursor, en proporción al tamaño.
stiffness	number	210	Rigidez del resorte: más alto, más nervioso.
idle	boolean	true	Cuando no hay cursor cerca, un imán invisible pasea por el texto.
color	string	"#E9EBEF"	Color del texto.
accent	string	"#7CF5C6"	Color al que se tiñen las letras atraídas.

Máquina de escribir
Gratis
Escribe, borra y reescribe frases con ritmo humano, pausas en la puntuación y un cursor que parpadea.
Texto
Número con estela
Gratis
Número cuyas cifras ruedan hacia el nuevo valor con desenfoque de movimiento vertical, una tras otra.
Texto
Odómetro
Gratis
Números que ruedan hasta su valor.
Texto