Instalación y uso

Introducción

Furin es una librería de componentes animados para React: texto que se descifra, números que ruedan, fondos con WebGL, tarjetas 3D y más. Cada componente es un archivo de TypeScript y otro de CSS, sin más dependencias que React.

Hoy hay 18 componentes: 13 gratis (Descifrar, Odómetro, Tanzaku, Ráfaga, Tablero, Aurora, Rejilla viva, Noren, Imán, Reflector, Sello, Hilo rojo, Abanico) y 5 Pro (Brasas, Estanque, Hanabi, Holograma, Campana). Mira todos en el catálogo.

Requisitos

• React 18 o superior, con react-dom.
• Un bundler que sepa importar archivos .css: Next.js, Vite, Remix, Astro, webpack, Parcel, esbuild o Bun.
• El paquete de npm es solo ESM. En Next.js (App Router) los componentes ya llevan la directiva "use client".

Instalación

Con npm

Instala el paquete con tu gestor preferido (también funciona con pnpm add, yarn add y bun add):

npm i furin

Importa los componentes que necesites. Cada uno trae su CSS y lo importa por ti:

import { Descifrar, Aurora } from "furin";

Para cargar solo un componente, importa por ruta. Si prefieres todo el CSS una sola vez (por ejemplo en tu layout), usa la hoja completa:

import Descifrar from "furin/descifrar";
import "furin/estilos.css";

Con shadcn

Cada componente gratis tiene su archivo en el registro de Furin. La CLI copia el código a tu proyecto, sin dependencias nuevas:

npx shadcn@latest add https://furin.dev/r/descifrar.json

Cambia descifrar por el nombre del componente en la URL, por ejemplo odometro.

A mano

En la página de cada componente, abre la pestaña Código y copia los dos archivos (.tsx y .css) a la misma carpeta de tu proyecto. Luego impórtalo como cualquier componente local.

Uso

Los componentes se usan como cualquier otro de React. Este ejemplo pone un fondo animado con un titular encima:

import { Aurora, Descifrar } from "furin";

export default function Portada() {
  return (
    <Aurora style={{ minHeight: 360 }}>
      <h1 style={{ fontSize: 48, color: "white" }}>
        <Descifrar text="Hola, mundo" />
      </h1>
    </Aurora>
  );
}

Props comunes

• Todos los componentes aceptan className y style.
• Los fondos llenan a su contenedor (position: absolute con inset: 0) y aceptan children encima. Dale a ese contenedor position: relative y una altura.
• Las props de cada componente están documentadas con su tipo y su valor por defecto en la tabla de su página.

Movimiento y accesibilidad

• Respetan prefers-reduced-motion: muestran el estado final o una versión quieta.
• Los componentes con canvas o WebGL se pausan fuera de pantalla y escalan con devicePixelRatio (con tope en 2).
• Usan eventos de puntero (pointer*), así que funcionan con mouse y con touch.
• Limpian listeners, animaciones y observadores al desmontarse, y no tocan window ni document durante el render del servidor.

Activar Pro

Al comprar Pro obtienes una licencia con formato FURIN-XXXX-XXXX-XXXX-XXXX. Se muestra en la página de confirmación y queda registrada con el correo de tu compra: guárdala.

Los componentes Pro (Brasas, Estanque, Hanabi, Holograma, Campana) no están en npm ni en el registro público de shadcn: se instalan desde el registro privado de Furin con tu licencia. En Usar mi licencia la pegas y ves tus componentes, estos mismos pasos con tu licencia ya puesta y una descarga .zip de respaldo.

1. Agrega el registro a components.json

"registries": {
  "@furin-pro": {
    "url": "https://furin.dev/api/pro/r/{name}.json",
    "headers": {
      "Authorization": "Bearer ${FURIN_LICENCIA}"
    }
  }
}

2. Guarda tu licencia en .env

FURIN_LICENCIA=FURIN-XXXX-XXXX-XXXX-XXXX

No subas ese archivo a git.

3. Instala el componente

npx shadcn@latest add @furin-pro/holograma

Kit para Claude Code

Un skill y reglas para que tu agente use Furin sin inventar props. Se instala con el mismo registro:

npx shadcn@latest add @furin-pro/kit-claude-code

Usar mi licencia Ver precios de Pro

Licencias

• Gratis: licencia MIT. Úsalos donde quieras, también en proyectos comerciales.
• Pro: licencia comercial, proyectos ilimitados y actualizaciones de por vida. Pago único de $99 USD para las primeras 50 licencias; después, $149 USD.
• Reembolso: 14 días sin preguntas. El reembolso desactiva la licencia.