Guía · títulos web

Títulos animados para webs

El título principal es lo primero que ve cualquiera que llega a tu web. Un título animado bien hecho (letras que se dibujan, se imantan al cursor, brillan como un neón o se derriten como cromo líquido) hace que la página parezca viva y se recuerde desde el primer segundo.

Esta guía te enseña a elegir un efecto, a pedírselo a un modelo de IA con el brief adecuado y a que el resultado sea rápido, accesible y no perjudique tu posicionamiento.

Crea tu título animado con IA en tres pasos

  1. Paso 01Elige un estilo

    Abre el estilo que te guste e imagínalo con palabras cortas: los títulos de 4 a 12 letras son los que mejor lucen.

  2. Paso 02Pulsa «Copiar para título web»

    Copia el prompt del estilo junto con un brief que pide un encabezado real, adaptable, ligero y accesible. Cambia [TEXTO] por tu título.

  3. Paso 03Pégalo en tu modelo de IA

    Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra o GPT-6.1 Sol o un modelo posterior. Si usas un framework, pídelo como componente (React, Vue, Svelte…) o como bloque de HTML personalizado para tu gestor de contenidos.

Brief de título web

Se añade al final de cualquier prompt de estilo
Úsalo como título principal animado de una web: mantén las palabras reales en la página como encabezado principal, para que se puedan seleccionar y las lean los lectores de pantalla y los buscadores; que se adapte con fluidez desde móviles de 360 px hasta pantallas anchas sin saltos de maquetación; que sea ligero (sin archivos externos, fluido a 60 fps) y nunca bloquee la carga de la página; que se pause mientras esté fuera de la pantalla y que los efectos pesados se rendericen a una resolución moderada; que nunca destelle más de tres veces por segundo; y muestra un título estático y perfectamente legible cuando el visitante prefiera reducir el movimiento. Entrégalo como un único fragmento autocontenido de HTML, CSS y JavaScript.

Qué hace que un título animado funcione

Las palabras siguen siendo texto real

Los buscadores y los lectores de pantalla leen el HTML, no los píxeles. Mantén el título como encabezado de verdad aunque el efecto se dibuje en un canvas, y oculta la capa decorativa a las tecnologías de asistencia.

Carga al instante

El título no debe retrasar el contenido más grande de la página (LCP). Muestra el texto legible desde el primer momento, reserva su espacio para que nada se desplace (CLS) y evita librerías pesadas: la mayoría de efectos caben en unos pocos kilobytes.

Respeta a quien prefiere menos movimiento

Si el sistema pide reducir el movimiento, muestra un fotograma estático y legible. Si la animación dura más de cinco segundos, ofrece una forma de pausarla.

Nada de destellos

Ningún efecto debe destellar más de tres veces por segundo: es una pauta de accesibilidad (WCAG 2.3.1) que protege a personas con epilepsia fotosensible.

Legible en un móvil

Prueba el título en una pantalla de 360 px. Contraste alto, palabras cortas y un tamaño que se adapte con fluidez al ancho.

Que no gaste batería de más

Detén la animación cuando el título sale de la pantalla y mantén los efectos pesados (3D, shaders) a una resolución razonable.

Títulos que reaccionan al cursor

Para portfolios y landing pages

Los estilos reactivos amplifican el efecto al pasar el ratón: las letras se deforman, se imantan, ondulan o se dispersan y vuelven a su sitio. Sus prompts también piden que funcionen en pantallas táctiles, donde el efecto sigue al dedo.

Con moderación en páginas de lectura

En un blog o una documentación, un efecto sutil que se calma rápido funciona mejor que uno que compite con el texto. Que nunca bloquee el desplazamiento.

Elige un efecto para tu título, 42 estilos

Ver los 195 estilos →

Una selección de los estilos que mejor funcionan en cabeceras web, en dos familias: los reactivos, que responden al cursor, y los que se animan solos. Pasa el ratón por encima de una vista previa para ponerla en marcha; en pantallas táctiles, las vistas previas se reproducen solas mientras están a la vista.

Reactivos: responden al cursor, 16 estilos

Todos los estilos reactivos de la biblioteca. Mueve el ratón sobre la vista previa y las letras se doblan, ondulan, se imantan o se dispersan con él y vuelven a su sitio. En pantallas táctiles, la vista previa la recorre un cursor dibujado, y los prompts piden que tu versión siga al dedo.

009ReactivosCSS

Letras magnéticas

efecto magnético · texto magnético · letras magnéticas · efecto hover magnético

Ver →

Se animan solos, 26 estilos

Una muestra de tipografía cinética, luz, materiales, papel, vídeo analógico, videojuegos retro, interfaces, títulos de cine e imprenta; en el catálogo completo hay muchos más. No reaccionan al cursor (al pasar el ratón solo se pone en marcha la vista previa) y se mantienen legibles mientras se mueven.

098CinéticaCanvas

Texto con estela de ecos

efecto eco en texto · texto repetido con estela · eco de colores · tipografía con estela

Ver →
149LuzWebGL

Aurora boreal

aurora boreal · efecto aurora boreal · texto aurora boreal · luces del norte

Ver →
114MaterialesWebGL

Papel quemado

efecto papel quemado · texto en llamas · papel ardiendo · bordes quemados

Ver →
051RetroCanvas

Puzle de bloques que caen

juego de bloques que caen · animación de tetrominós · texto con bloques · letras de bloques apilados

Ver →
083ImprentaSVG

Geometría Bauhaus

estilo bauhaus · cartel geométrico · diseño con colores primarios · círculo cuadrado triángulo

Ver →
Apoyo
Mantén aimotions gratis

Sin muros de pago ni registro. Si un prompt te ha ahorrado una hora, un café ayuda a que sigan llegando estilos nuevos.

Invítame a un café

Preguntas frecuentes

¿Cómo pongo un título animado en mi web?

Elige un estilo en aimotions, pulsa «Copiar para título web», cambia [TEXTO] por tu título y pega el prompt en un modelo de IA puntero (Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra o GPT-6.1 Sol o posterior). Obtendrás un fragmento autocontenido de HTML, CSS y JavaScript que puedes pegar en tu página o en un bloque de HTML personalizado, o un componente si se lo pides para tu framework.

¿Los títulos animados perjudican el SEO?

No, siempre que las palabras sigan siendo texto real en el HTML de la página, dentro de un encabezado. Lo que perjudica es poner el título solo dentro de una imagen, un vídeo o un canvas. El brief de título web de aimotions lo pide expresamente.

¿Un título animado hace que mi web vaya más lenta?

Los efectos hechos con CSS o SVG apenas pesan. Los de canvas o WebGL son más costosos, así que conviene que arranquen después de mostrar el texto, que se detengan fuera de pantalla y que usen una resolución moderada. Todo eso viene incluido en el brief.

¿Qué estilos quedan mejor en una cabecera?

Los de energía tranquila o dinámica y alto contraste, como los que se recogen en esta página: tipografía cinética, un letrero de neón, letras 3D extruidas o de papel, interfaces limpias. Para portfolios y lanzamientos funcionan muy bien los estilos reactivos, que responden al cursor.

¿Funcionan en móviles?

Sí. El brief pide un tamaño adaptable desde pantallas de 360 px, y los prompts de los estilos reactivos piden que, en pantallas táctiles, el efecto siga al dedo.

¿Puedo usarlos en una web comercial?

Sí. Los prompts son de uso libre en proyectos personales y comerciales, y aimotions no reclama ningún derecho sobre lo que generes con ellos. Comprueba solo que las tipografías que use el resultado tengan una licencia apta para la web.

Que siga siendo gratis.

aimotions no tiene muro de pago ni registro. Se financia con quienes encuentran un estilo que les encanta. Un café en Ko-fi ayuda a pagar el alojamiento y la siguiente tanda de estilos.

Apoyar en Ko-fi ♥