Hilo rojo

Hilo con física verlet que sigue al cursor, se tensa contra su ancla y se columpia.

Vista previa en vivo

Mueve el cursor

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { HiloRojo } 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	""	Contenido opcional del contenedor; el hilo se dibuja por encima sin bloquear los clics.
color	string	"#E8452C"	Color del hilo.
segmentos	number	28	Cuántos tramos tiene el hilo: más tramos, curvas más suaves y más cálculo.
grosor	number	3	Grosor del hilo en px.
gravedad	number	1400	Fuerza de la gravedad en px/s²: 0 flota, más alta cuelga más pesado.
rigidez	number	0.95	Qué tan inextensible es el hilo, de 0.05 (elástico) a 1 (no se estira).
ancla	"ninguna" \| "centro" \| "arriba" \| { x: number; y: number }	"arriba"	Extremo fijo: "ninguna" (el hilo solo sigue al cursor), "centro", "arriba" o un punto { x, y } en fracciones de 0 a 1.
longitud	number	0	Largo total del hilo en px; 0 lo calcula según el tamaño del contenedor.
brillo	number	0.7	Intensidad del brillo alrededor del hilo, de 0 a 1.
className	string	""	Clase CSS extra para el contenedor.
style	CSSProperties	"{}"	Estilos en línea del contenedor.