Figuras animadas para tu web sin saber animar (Hairline + Claude)

Si llegaste comentando "FIGURA", los tres ejemplos del video (la consola, el dock y el logo) están en su propia sección. Antes te explico cómo se instala, porque son dos piezas distintas y conviene entender cuál usar en cada caso.

La mayoría de las webs que reviso tienen el mismo hero: un titular, un botón y una imagen de stock o una ilustración plana que nadie mira. Animar algo propio suele significar contratar a alguien, abrir un programa de animación o meter un video pesado que tarda en cargar.

Hairline resuelve eso de otra forma. Son figuras isométricas hechas solo con líneas que reaccionan al cursor: una consola cuyos faders siguen tu mano, unas teclas que se hunden, un candado que se abre. No son videos ni imágenes, son código que se dibuja en el navegador, pesa poco y cambia solo a modo oscuro.

Y trae una skill para Claude Code con la que puedes pedir figuras nuevas con una frase. Con ella hice las tres del reel.

Qué es Hairline, en datos

La creó Lucas Marques. El repositorio se publicó el 1 de octubre de 2026, es gratuito con licencia MIT y, cuando escribo esto, tiene unas 3.600 estrellas en GitHub y va por la versión 0.5.1.

Son dos cosas en el mismo proyecto:

El paquete funciona con React 18 o superior y también en cualquier página con HTML. Las skills funcionan en cualquier agente que lea skills: Claude Code, Codex, Cursor y otros. Aquí me enfoco en Claude Code.

Lo que necesitas

• Node.js 22.20 o más reciente. Lo pide el instalador de skills. Si seguiste mi guía para crear videos con Claude y Remotion, ya lo tienes.
• Claude Code (o Codex, Cursor u otro agente con skills).
• Google Chrome instalado. La skill revisa cada figura en un navegador antes de entregártela. Sin navegador también funciona, pero solo valida el código y te avisa de que no la miró.
• Para el paquete: un proyecto web. Puede ser React o Next.js, o una página HTML.

Todo es gratis. Lo único que pagas es tu plan de Claude.

Paso 1: pon una figura del paquete en tu web

Es lo más rápido y no necesita la skill. En la carpeta de tu proyecto:

npm i @lucasmarkes/hairline

Si tu web es React o Next.js, la figura es un componente:

import { Terrain } from "@lucasmarkes/hairline/react";
 
export function Hero() {
  return <Terrain />;
}

Ese es el "par de líneas" del video. La figura ocupa el ancho de su contenedor con proporción 5:4. En Next.js no hace falta añadir "use client": el componente ya lo trae.

Si tu web no usa React, se monta sobre cualquier elemento:

import { terrain } from "@lucasmarkes/hairline";
 
const figura = terrain(document.getElementById("figura")!, { play: true });

Abre tu web y pasa el cursor por encima: los pilares suben alrededor del puntero. Si no ves nada, revisa que el contenedor tenga ancho (un div vacío dentro de un flex puede medir cero).

Cada figura acepta las mismas cinco opciones:

Te recomiendo play: true en el hero. Si nadie mueve el ratón, como pasa en el móvil, una figura quieta parece una imagen más.

Las 33 figuras se pueden ver en vivo en hairline.lucasmarkes.com, con un inspector que te escribe el código de cada una.

Paso 2: instala las skills en Claude Code

Abre una terminal y pega:

npx skills add lucasmarkes/hairline -g -a claude-code

-g la instala para todos tus proyectos y -a claude-code le dice a qué agente va. El instalador te pregunta qué skills quieres del repositorio: marca las dos, hairline-create y hairline-adopt.

Abre Claude Code y escribe /hairline. Deberían aparecer las dos en el autocompletado. Si no salen, cierra la sesión y abre una nueva.

Paso 3: pide una figura con /hairline-create

Escribes el comando y tu idea:

/hairline-create una consola de mezcla

Esto es lo que hace después, y conviene saberlo para no cortarla a medias:

1. Te propone dos o tres conceptos en una línea cada uno: el objeto, qué hace el cursor y qué dice la etiqueta de la esquina. Tú eliges uno.
2. Dibuja la figura con el mismo motor de las 33 del paquete.
3. La valida contra sus diez reglas: que no tenga texto, que en reposo ya se vea bien, que nada se salga del cuadro, que no parpadee.
4. La revisa en el navegador. Saca ocho capturas (en reposo, respondiendo, en miniatura, con tema claro y oscuro) y las mira. Si algo falla, lo corrige y vuelve a revisar.
5. Te entrega hairline-<nombre>.html, un solo archivo que se abre con doble clic, sin instalar nada.

La primera vez instala playwright-core en una carpeta de caché de tu usuario, nunca dentro de tu proyecto. Es lo que usa para las capturas.

Para ver la figura en movimiento sin tocarla, ábrela con ?play=1 al final de la dirección, por ejemplo hairline-consola.html?play=1.

Paso 4: convierte tu logo con /hairline-adopt

Necesitas tu logo en SVG. Si solo lo tienes en PNG, expórtalo como SVG desde la herramienta donde lo diseñaste (Figma, Illustrator, Canva). La skill lee el SVG y mira el dibujo, pero no lo calca: reconstruye el objeto con sus proporciones y sus partes.

Pon el archivo en la carpeta donde trabajas y escribe:

/hairline-adopt logo.svg

Te dice primero cómo leyó el dibujo y qué partes conservó. Si lo leyó mal, corrígelo ahí, antes de que dibuje. Después te propone qué puede hacer el cursor con él y sigue los mismos pasos de /hairline-create.

Cómo pedirlo bien

Las reglas de la skill explican por qué unas ideas salen bien y otras no. Estas son las que más me sirvieron:

Pide un objeto, no un diagrama. "Mi proceso de ventas en cajas y flechas" no funciona. Un objeto que podrías poner en una mesa sí: una bandeja, una cinta, unas esclusas, un mueble con cajones. El propio creador pone de ejemplo un pipeline de despliegue convertido en una escalera de esclusas de canal.

Di qué hace el cursor. Si ya sabes el gesto, dilo: "la tecla que señalas se hunde", "el cajón bajo el cursor se abre". Si lo dices, la skill se salta la parte de los conceptos.

Una figura, una idea. Si tu frase tiene dos gestos o dos objetos, salen dos figuras a medias. Haz dos pedidos.

Sin texto dentro. La figura no lleva palabras ni números. Lo que necesite nombre va en la etiqueta de la esquina o en tu web, al lado.

Un solo color de acento. Las figuras usan un trazo en cuatro intensidades. Lo que quieras destacar se marca con el trazo brillante, no con colores. Por eso encajan tan bien con una marca sobria.

Los ejemplos del video

Estas son las tres figuras del reel. Copia el prompt tal cual o cambia lo que está entre corchetes.

01 · La consola de mezcla

La figura que abre el video. Ocho canales, y los faders siguen el cursor: el del canal que señalas va a la altura de tu mano y los vecinos lo siguen, menos cuanto más lejos están. En reposo dibujan una curva.

/hairline-create una consola de mezcla de [ocho] canales. Cada canal
es una ranura con un fader. El cursor se posa sobre la mesa: el fader
del canal que señala va a la altura del cursor y los vecinos lo
siguen, menos cuanto más lejos. En reposo los faders dibujan una
sonrisa, con el canal [cuatro] más alto y brillante. La etiqueta dice
el canal y el nivel, por ejemplo "ch 5 · 68". El deslizador controla
cuántos canales alcanza el cursor.

Sirve para una web de música, de audio o de edición de video, o para cualquier producto con "ajustes". Cambia el número de canales: con más de doce, las piezas quedan muy pequeñas en el móvil.

02 · El dock de skills

Seis cartuchos en un dock, y cada uno es una skill. El que señalas sale de su ranura y enseña su etiqueta, y los de al lado se levantan un poco después, en cadena. Cada cartucho lleva su número en puntos, porque la figura no admite números escritos.

/hairline-create un dock con [seis] cartuchos de pie en sus ranuras,
cada uno es una skill que un agente puede cargar. El cartucho bajo el
cursor sube y sale de su ranura; los vecinos suben un poco después,
escalonados desde él. Cada cartucho tiene una etiqueta en relieve en
la cara ancha, estrías en el canto y su número marcado con puntos. En
reposo uno está a medio salir y brillante: el último que se cargó. La
etiqueta dice "skill 03". El deslizador controla cuánto sube.

Lo puedes adaptar a cualquier "catálogo de piezas": tus servicios, los módulos de un curso o los planes de un producto. Cambia "skill" por lo que sea cada cartucho.

03 · Tu logo

En el video uso el mío, la A y la R con una barra debajo. La skill lo convirtió en tres teclas: la A, la R y la barra como espaciadora, cada letra en relieve sobre su tecla. La que señalas se hunde y las otras dos suben un poco. En reposo brilla la R, que en mi logo es la letra verde.

/hairline-adopt [logo.svg] Que cada parte del logo sea una tecla:
las letras en relieve sobre sus teclas y [la barra] como espaciadora.
La tecla bajo el cursor se hunde y las demás suben un poco después.
En reposo brilla [la letra de color de mi logo].

Antes de dibujar, la skill te dice cómo leyó el logo. Revisa que haya entendido bien las partes. Si tu logo tiene muchas piezas pequeñas, quédate con dos o tres: en una figura de 240 píxeles de ancho, el detalle fino desaparece.

Un aviso: si el logo no es tuyo, la skill te lo recuerda. La figura muestra una marca ajena y publicarla le toca a su dueño.

Cuatro prompts más para tu negocio

No están en el video. Son ideas que yo usaría en webs de clientes:

/hairline-create un estado vacío para "todavía no tienes pedidos":
una bandeja de entrada con sus separadores y nada dentro. El cursor
señala un separador y lo levanta. La etiqueta dice "bandeja 2 · 0".

/hairline-create una escalera de [tres] esclusas de canal para
explicar cómo trabajo con un cliente: diagnóstico, implementación y
seguimiento. El cursor elige una esclusa; sus compuertas se abren y
el agua baja a la siguiente.

/hairline-create un archivador de [cuatro] cajones, uno por cada
servicio de mi agencia. La altura del cursor elige un cajón y este se
abre y muestra sus separadores.

/hairline-create un embudo de leads como una criba de [tres] tamices
apilados sobre una bandeja. La altura del cursor elige un tamiz, que
sube y deja ver su malla.

Fíjate en que ninguno pide un diagrama. Las etapas y los servicios se convierten en piezas de un objeto, y los nombres los pones tú en tu web, al lado de la figura.

Cómo llevarlo a tu marca

Las figuras se tiñen con seis variables de CSS. Estas son las de mi marca, sobre fondo oscuro:

.figuras {
  --hairline-plate: #1C1E22; /* el relleno: igual que tu fondo */
  --hairline-hi: #35B893;    /* el trazo brillante, tu color de acento */
  --hairline-edge: #A3A7AE;  /* las siluetas */
  --hairline-mid: #5F636B;   /* el resto de trazos */
  --hairline-lo: #3A3D44;    /* lo que queda al fondo */
  --hairline-stroke: 1.2;    /* grosor de línea */
}

La que más importa es --hairline-plate. Las piezas no son transparentes: van rellenas para tapar lo que hay detrás. Si tu fondo no es blanco ni casi negro, pon aquí tu color exacto de fondo, o vas a ver rectángulos de otro tono.

Los archivos que entrega la skill traen el motor dentro y se ven con su propia página. Para meter uno en tu web, lo más fácil es un iframe. Si tu web es React, pídele a Claude: "convierte la figura de hairline-consola.html en un componente de React con las mismas opciones del paquete".

Lo que no hace

• No pone texto ni colores dentro de la figura. Es una decisión de diseño, no un fallo: si necesitas un diagrama con etiquetas, esta no es la herramienta.
• La proporción es fija en 5:4. Para un banner muy ancho, pon la figura a un lado y el texto al otro.
• No exporta video. Para el reel capturé las figuras fotograma a fotograma con un script propio. Si solo quieres un clip, graba la pantalla con la figura en ?play=1.
• En el móvil no hay cursor. Nadie pasa el ratón por encima, así que la figura se queda quieta. Usa play: true.
• Tarda. Una figura buena se lleva varias vueltas de revisión. Déjala terminar antes de pedir cambios.

Por qué funciona

Hairline no sabe qué vende tu negocio ni qué tiene que entender tu cliente. Eso lo pones tú: qué objeto representa tu servicio, qué debería pasar cuando alguien lo señala, qué parte merece el trazo brillante. La skill dibuja, revisa y corrige, pero la idea viene de ti.

Es la misma fórmula de siempre, P = E × IA: tu experiencia elige el objeto y la IA lo construye. Si te gustó la idea de explicar procesos como objetos, mira también Anatomy, que hace lo mismo con máquinas detalladas.

Créditos: Hairline y sus skills son de Lucas Marques, con licencia MIT. Las figuras en vivo y la documentación están en hairline.lucasmarkes.com. La consola, el dock y el logo de esta entrada los hice yo con sus skills.

Si haces una figura con tu logo, mándamela: quiero ver qué objeto sale de cada marca.