Entras a un sitio y todo está quieto
Entras a un sitio cualquiera. Hay textos buenos, hay capturas de pantalla con flechas, hay diagramas con labels. Todo bien explicado. Todo quieto.
A los 20 segundos sin que te dieras cuenta ya decidiste algo sobre esa marca. La sentiste vieja. No por el contenido. Por el aire estancado.
El diseño quieto se siente abandonado. Aunque el texto sea mejor que el de tu competencia, el lector lee menos. Y eso pasa con cualquier blog técnico que se llena de screenshots de su propio producto.
Qué es un hyperframe
Un hyperframe es un pedazo de tu sitio que antes habría sido una foto y ahora es un dibujo vivo. La parte de afuera no la nota nadie. La diferencia es que el dibujo se mueve solo, vive en la repo y se ajusta cuando cambia el código.
No es un GIF. No es un Lottie. No es un video. Es un componente de tu propia web que dibuja la idea y la deja moverse. Cero peso de imagen, cero librerías extra, cero scripts montados aparte.
Mira la diferencia. A la izquierda te muestro cómo se siente una guía con la captura quieta. A la derecha, el mismo concepto convertido en hyperframe.
La captura cuenta el flujo. El hyperframe lo deja pasar.
Lo que pierdes con la captura · lo que ganas con el hyperframe
Lo que pierdes
- Toca abrir el producto y volver a screenshotear cada vez que algo cambia
- La imagen pesa entre 80 y 400 KB · sumas peso al bundle
- Si el lector lee en dark mode, la captura se ve con fondo blanco roto
- El concepto se queda dibujado, no se cuenta solo
- Una captura no enseña tiempo: no se ve el orden en que pasan las cosas
Lo que ganas
Cómo lo aplicamos a santa-ia
Esta semana hicimos auditoría completa del sitio. Cada captura, cada diagrama estático, cada lugar donde antes habríamos puesto un PNG. Lo orquestamos con Claude Code, no escribimos cada componente a mano. La cabeza del trabajo la pone uno; las manos las puede poner el plan Pro de Claude por veinte dólares al mes y sale a cuenta.
Los números reales del trabajo:
componentes nuevos
diagramas, mascota animada, terminales · todos animados nativo
diagramas existentes que cobraron vida
antes eran estáticos · ahora animan al cargar
librerías extra
ni GSAP, ni Lottie, ni Framer Motion · todo nativo del navegador
riesgo en deploy
todo corre en el navegador del lector · la build sigue igual
bug raíz blindado
el patrón A · te lo cuento más abajo con muestra visual
Cero librerías nuevas. Cero peso extra de bundle. Cero scripts adicionales. El stack quedó exactamente igual que antes: Nuxt + Vue + Tailwind. Lo único que cambió fue cómo dibujamos los conceptos dentro de las guías.
La anatomía de un hyperframe
Un hyperframe son cuatro capas que se apilan. Si quitas alguna deja de ser hyperframe y vuelve a sentirse como una captura.
La capa de arriba es lo que el lector ve. La de abajo es la que sostiene todo. Y la de en medio es donde vive el motor del movimiento, que es lo que el navegador ya sabe hacer sin ayuda de nadie. Cero librerías. Cero peso extra.
Esa decisión técnica importa más de lo que parece. Cualquier librería de animación pesa entre 30 KB y 100 KB minificada. Multiplica por todas tus guías y empieza a doler. Hacerlo con lo que el navegador trae de fábrica pesa cero.
El patrón en 5 pasos
Identifica el momento
Estás escribiendo una guía. Llegas a la parte donde dirías "acá va una captura del panel". Para ahí. Anota la idea del concepto en tres palabras: qué entra, qué pasa, qué sale.
No tomes screenshot. Esa es la regla.
Si no puedes describir el momento en tres palabras, todavía no está claro qué quieres mostrar. Vuelve a escribir el párrafo antes de pensar en el visual.
Decide el medio
Te ahorro la decisión: el movimiento nativo del navegador sirve para el 95% de casos. Loops, cascadas, fades, escalados suaves, flechas que viajan. Todo eso lo hace el navegador solo y es lo que tienes que usar por defecto.
Solo necesitas algo más cuando quieres typewriter (texto que se escribe letra por letra) o cuando la animación depende de un dato que cambia. Y para esos dos casos hay una forma estándar de hacerlo sin temporizadores sueltos colgando.
Crea el componente
Abres un archivo nuevo en la carpeta de componentes y describes el dibujo con texto y formas: cuadros, círculos, líneas, etiquetas. Después le agregas las reglas de animación: este círculo respira, esta flecha viaja, este sello pulsa.
Los colores los sacas de la paleta del proyecto, no inventados. Si los tomas de ahí, dark mode te queda automático sin tocar nada más.
Respeta a quien pidió menos movimiento
Hay personas con migraña, vértigo o trastornos vestibulares para quienes una animación inocente es un día arruinado. El sistema operativo deja que esa persona marque "menos movimiento, por favor".
Tu hyperframe tiene que escuchar esa petición. Cuando el lector pidió calma, las animaciones se apagan y el dibujo queda quieto en su forma final. Sin esto, el componente no sale a producción.
Embébelo en la guía
Dentro del markdown de la guía escribes el nombre del componente en una línea y aparece renderizado en el sitio. Nuxt Content resuelve el resto.
Cuidado con un detalle: si el nombre tiene mayúsculas pegadas (SantaIA, URL, API) el resolver se confunde y la página queda en blanco silenciosamente. Escríbelo con la primera letra mayúscula y el resto normal: Santaia, Url, Api.
La lección dura · el bug del patrón A
Esta sección la pongo honesta porque me costó cuatro componentes verla.
Te muestro en pantalla qué pasa cuando no separas capas. Del lado izquierdo, el elemento debería quedarse arriba a la derecha pero salta al origen cuando llega la animación. Del lado derecho, le pongo un envoltorio (un wrapper) que sostiene la posición, y la animación corre dentro sin moverlo de sitio.
El primer componente que falló lo creímos un typo. El segundo, un caché viejo. Al tercero ya era patrón. Al cuarto fui a investigar y entendí que es una regla conocida: cuando hay dos formas de decir "mové esto" sobre el mismo nodo, la nueva borra la vieja.
El fix es separar capas. Un envoltorio externo se encarga de pararse en el sitio correcto. Un envoltorio interno se encarga de animar. Ninguno de los dos pelea con el otro porque cada uno tiene una sola responsabilidad. Posicionar afuera, animar adentro.
Después de descubrir el patrón hicimos auditoría completa al sitio. Aparecieron 8 instancias más del mismo bug en componentes que estaban "funcionando" pero con animaciones que no se veían porque el elemento se había ido del marco sin avisar. Fix de bloque, una sola revisión.
Esta guía habla del bug y aplica el fix. Si miras el dibujo de cualquiera de los diagramas que ves arriba, vas a encontrar el patrón externo-interno en cada lugar donde hay movimiento.
Lo que tienes que recordar
- Un hyperframe es un componente de tu sitio que reemplaza una captura PNG y se mueve solo.
- Cero librerías de animación. Todo lo hace el navegador con lo que ya trae.
- Cuatro capas: concepto, motor de movimiento, paleta del proyecto, respeto a quien pidió menos movimiento.
- Cuando el dibujo necesita posicionar Y animar, separa envoltorios: el de afuera se queda quieto donde tiene que estar, el de adentro hace todo el movimiento.
- Si tu componente no apaga las animaciones cuando el lector pidió calma, no sale a producción.
- Si el nombre del componente tiene mayúsculas pegadas, Nuxt Content no lo encuentra. Primera letra mayúscula y el resto normal.
Qué viene después
Ya tienes el patrón mental y los cinco pasos. Lo siguiente es ponerlo en práctica con tu primer hyperframe, paso por paso.
Si te quedó duda concreta sobre cómo aplicar hyperframes a tu sitio: comenta HYPERFRAME en mi último post o escríbeme por DM en @santaia.lab.