Borde eléctrico

Arcos de electricidad que serpentean por el borde, con descargas locales, chispas y parpadeo del resplandor.

Vista previa en vivo

Un arco vivo que chisporrotea alrededor.

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { ElectricBorder } 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	"Borde eléctrico"	Contenido de la tarjeta; si es texto se muestra como título.
caption	string	"Un arco vivo que chisporrotea alrededor."	Texto de apoyo bajo el título (solo cuando children es texto).
color	string	"#5cc8ff"	Color de la electricidad.
chaos	number	1	Cuánto se desvía el arco del borde (1 = normal).
speed	number	1	Rapidez del chisporroteo (1 = normal).
sparks	number	26	Cuántas chispas saltan por segundo.
glow	number	1	Intensidad del resplandor, de 0 a 1.5.
borderWidth	number	1.8	Grosor del arco, en px.
radius	number	22	Radio de las esquinas, en px.
width	number	360	Ancho máximo de la tarjeta, en px.
minHeight	number	0	Alto mínimo de la tarjeta, en px.
background	string	"#0c0e13"	Fondo de la tarjeta.

Calcomanía
Gratis
Calcomanía brillante troquelada que se despega desde la esquina siguiendo al cursor, con curvatura, reverso de papel y sombra.
Tarjetas
Carpeta
Gratis
Carpeta de cartón que se abre al pasar el cursor y deja asomar sus documentos con un rebote suave.
Tarjetas
Haz en el borde
Gratis
Un haz de luz con cola, cabeza brillante y halo que recorre el contorno de cualquier contenido a velocidad constante.
Tarjetas