Texto en órbita

Texto en círculo que gira despacio y se acelera, con inercia, cuando el cursor se acerca.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { OrbitText } 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	"Diseño en movimiento"	El texto del anillo exterior; se repite hasta cerrar el círculo.
innerText	string	"furin · componentes · animados"	Texto del anillo interior, que gira al revés (vacío para ocultarlo).
size	number	340	Diámetro del conjunto, en px.
speed	number	12	Grados por segundo en reposo.
boost	number	8	Cuántas veces más rápido gira con el cursor encima.
separator	string	"•"	Símbolo que separa las repeticiones del texto.
color	string	"#F4F5F7"	Color del texto.
accent	string	"#7CF5C6"	Color del separador y del centro.

Texto que muta
Gratis
Las palabras se derriten unas en otras con una transición viscosa de desenfoque y umbral, con brillo de líquido.
Texto
Grabado en metal
Pro
Texto grabado sobre metal cepillado, con bisel interior y brillo al pasar.
Texto
Resaltado de barrido
Pro
Bloques de color geométricos barren detrás de las palabras clave, y la tinta del texto se invierte justo bajo el bloque.
Texto