Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Una web oscura de una empresa tecnológica en la que cada titular, cifra y etiqueta reposa cifrado en gris, vuela entre glifos naranjas y se asienta en su tipografía final. Los glifos riman con cada carácter (mayúsculas con Ñ y tildes, minúsculas, cifras o signos), los espacios nunca cambian y el texto no salta porque cada letra reserva su ancho. Incluye tres órdenes de resolución (barrido, azar y desde el centro), una lente que recifra lo que toca el ratón, recifrado al pasar por enlaces y botones, una clave de sesión que rota cada 5,2 s con pausa y una zona donde el visitante escribe su propio rótulo. Motor en JavaScript vanilla, sin librerías, accesible para lectores de pantalla. Encaja en webs de ciberseguridad, datos, fintech, software o estudios creativos con tono técnico; cambia el naranja de señal por un verde, un cian o el color de tu marca.
Encaja bien en webs de
- Prompt
- ≈13.846 tokens · con Lite
- Librerías
- ninguna
- Demo
- 30,8 KB · ligero
- Prueba en frío
- 9,8/10 · 30-09-2026
Antes de copiar
Tu marca, dentro del prompt
Cambia lo que quieras y copia: el prompt sale ya con el nombre, los colores y los textos de tu cliente. Lo que dejes en blanco se queda como en la demo.
Mete tu marca y tus colores en el prompt
Con Pro o con tu llave de regalo. Esto es lo que puedes cambiar:
- Nombre de la marca
- Titular principal
- Ciudad
- Coordenadas de la sede
- Email de contacto
- Teléfono
- Color de señal (glifos en vuelo y acentos)
- Color de fondo
- Color del texto
Índice del prompt
Qué hay dentro del prompt
Qué trae el prompt, por apartados
- 01Qué es
- 02Librerías y esqueleto
- 03Tokens de diseño
- 04Estructura y contenido
- 05Movimiento
- 06Código clave
- 07Interacción
- 08Adaptación a móvil y tablet
- 09Accesibilidad y movimiento reducido
- 10Rendimiento
- 11Personalización
- 12Comprobación final
- Completo
- 5.645 palabras · ≈13.846 tokens
- Lite
- 1.439 palabras · ≈2.650 tokens
- Librerías
- ninguna
- Peso de la demo
- 30,8 KB (ligero)
- Resolución máxima (DPR)
- 2
- Se pausa fuera de pantalla
- sí
- Respeta «menos movimiento»
- sí
Tokens estimados para español (≈3,6 caracteres por token): sirven para orientarte, no son exactos.
prompt.md Pro
El prompt está en Pro
5.645 palabras en el Completo y 1.439 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.
Prueba en frío
Lo que salió al pegarlo en frío
Pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos el resultado con la demo. Prueba hecha el 30-09-2026.
Prompt CompletoFiel a la demo9,8/10
Calco exacto de la demo: el archivo generado es idéntico byte a byte al original, con el mismo motor de descifrado, la lente, la clave que rota y la maquetación en escritorio y móvil. Las únicas diferencias en las capturas son el momento del descifrado en que se tomaron.
Prompt LiteAceptable6,4/10
El efecto se mantiene: el motor de descifrado, la lente, el hover y la clave que rota funcionan, con los mismos colores y textos. Lo que cambia es la maqueta: los botones del hero salen deformados (muy altos), el logotipo de la cabecera está en mono, las cifras llevan la etiqueta debajo del número, el logotipo gigante del pie tiene las letras montadas y faltan los acentos naranjas de [01]/[03] y la marca en negrita.
Solo publicamos lo que hemos probado. Otras herramientas (ChatGPT, Gemini, Lovable…) pueden dar resultados distintos.
Paso a paso
Cómo usarlo en 4 pasos
- 01
Personaliza
Rellena el formulario de arriba con el nombre, los colores y los textos de tu cliente. Se meten en el prompt al copiar. - 02
Copia el Completo o el Lite
El Completo, para Claude, ChatGPT, Gemini o Cursor. El Lite, más corto, para Lovable, Bolt o v0, que aceptan menos texto. - 03
Pega e itera
Pégalo en una conversación nueva. Si quieres cambiar algo, pídelo con una frase corta:- «Que el titular se descifre desde el centro en vez de en barrido»
- «Cambia el naranja de señal por un verde fósforo»
- «Usa solo mayúsculas y cifras en los glifos para un tono más técnico»
- «Que la clave de la ficha rote cada 10 segundos»
- «Haz el descifrado del titular más lento y con más suspense»
- 04
Publica
Guarda el resultado como HTML (o en tu proyecto) y súbelo a Vercel, Netlify o tu hosting de siempre. Tienes los pasos en la guía.
Licencia en claro
Qué puedes hacer con esta pieza
Todas las piezas incluyen licencia de uso comercial. Usa el resultado tal cual en tus productos, encargos freelance o webs de clientes, sin atribución.
Puedes
- Usarlo en tus webs y en las de tus clientes, también si cobras por ellas.
- Cambiarlo todo lo que quieras.
- Publicar el resultado sin citarnos.
No puedes
- Revender o regalar el prompt, la demo o el código como plantilla o biblioteca.
- Compartir tu cuenta Pro.
Es la misma licencia para lo gratis y lo Pro. La tienes entera en licencia de uso.
Preguntas frecuentes
Lo que suele preguntarse
¿Lo leen bien los lectores de pantalla y Google?
Sí. Cada texto animado tiene su copia real en un span visualmente oculto y la versión con glifos va con aria-hidden, así que tanto los lectores de pantalla como los buscadores leen la frase final desde el primer momento.
¿Puedo aplicarlo a cualquier texto de mi web?
Sí. Basta con añadir data-descifra="carga" o data-descifra="vista" a un elemento de texto; opcionalmente data-dur, data-retardo y data-modo para ajustar la duración, el retraso y el orden.
¿Por qué el texto no baila mientras se descifra si la fuente no es monoespaciada?
Porque el carácter real está siempre en su sitio, oculto con visibility:hidden, y reserva su ancho; el glifo en vuelo se dibuja encima en posición absoluta. Así funciona con cualquier tipografía.
¿Necesita GSAP o alguna librería?
No. El motor está escrito en JavaScript vanilla con un único requestAnimationFrame que se apaga solo cuando todo está quieto. Pesa unos pocos kilobytes.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13846 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2650 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
