Haz en el borde

Un haz de luz con cola, cabeza brillante y halo que recorre el contorno de cualquier contenido a velocidad constante.

Vista previa en vivo

Sobre cualquier contenido, con cola y halo.

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { BorderBeam } 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	ReactNode	"Un haz recorre el borde"	Contenido de la tarjeta; si es texto se muestra como título.
caption	string	"Sobre cualquier contenido, con cola y halo."	Texto de apoyo bajo el título (solo cuando children es texto).
color	string	"#8fb4ff"	Color de la cabeza del haz.
colorTo	string	"#b46cff"	Color de la cola del haz.
duration	number	6	Segundos que tarda el haz en dar una vuelta.
size	number	220	Largo de la cola, en px.
borderWidth	number	1.6	Grosor del borde iluminado, en px.
radius	number	22	Radio de las esquinas, en px.
beams	number	1	Cuántos haces recorren el borde a la vez.
glow	number	1	Intensidad del halo, de 0 a 1.5.
width	number	360	Ancho máximo de la tarjeta, en px.
minHeight	number	0	Alto mínimo de la tarjeta, en px.
background	string	"#0f1116"	Fondo de la tarjeta.

Mazo
Gratis
Mazo de tarjetas que se baraja al arrastrar la de arriba: inercia, giro y regreso al fondo con resorte. También con clic o teclado.
Tarjetas
Perfil con foil
Gratis
Tarjeta de perfil con lámina holográfica: se inclina en 3D con el cursor y la iridiscencia cambia con el ángulo.
Tarjetas
Tarjeta con capas
Gratis
Capas reales en 3D (cielo, estrellas, planeta, anillo, dunas, texto y brillo) que se separan a distintas profundidades al inclinar.
Tarjetas