Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
Un rótulo de neón de vidrio soplado colgado en una pared de estuco a oscuras: palabra en cursiva monolínea rosa y subtítulo en mayúsculas azules, con soportes metálicos, cable hasta un transformador de 12 kV y una barra de bar donde se refleja invertido. Al cargar se enciende letra a letra con parpadeos de arranque, la pared se tiñe de luz con cada letra y la «t» titubea de vez en cuando. Un interruptor de pared real lo apaga y lo enciende, tocar una letra le da un golpecito y el ratón mueve el rótulo con un paralaje sutil. Incluye un segundo rótulo «ABIERTO» que se enciende al hacer scroll. Encaja en la portada de coctelerías, bares, vermuterías, locales de ocio nocturno y eventos. El subtítulo se compone con un alfabeto monolínea completo con tildes y eñe; los dos colores se cambian con dos variables.
Encaja bien en webs de
- Prompt
- ≈13.125 tokens · con Lite
- Librerías
- ninguna
- Demo
- 29 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 del local (palabra en cursiva)
- Subtítulo del rótulo (mayúsculas)
- Ciudad
- Dirección
- Código postal
- Teléfono
- Días de apertura
- Hora de apertura
- Hora de cierre
- Color del neón principal
- Color del neón secundario
- Color de la pared
Í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.678 palabras · ≈13.125 tokens
- Lite
- 1.450 palabras · ≈2.626 tokens
- Librerías
- ninguna
- Peso de la demo
- 29 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.678 palabras en el Completo y 1.450 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: capturas idénticas píxel a píxel y el mismo código, así que el encendido letra a letra, la avería de la «t», el golpecito, el paralaje y el rótulo «ABIERTO» se comportan igual. Solo cambia el aria-label del rótulo, que pone el subtítulo en mayúsculas.
Prompt LiteFiel a la demo7,3/10
El rótulo es el mismo (tubos, soportes, halo, reflejo y parpadeos con los patrones originales) y también la interacción: interruptor, golpecito, avería y paralaje. Cambia el entorno: el transformador sube junto al rótulo, la copa es más grande y tiene el borde rosa, el filo de la barra aparece abajo, el kicker va en rosa, la intro en serif y los precios en azul, el pie ocupa una sola línea con enlaces y «ABIERTO» se enciende letra a letra en vez de como un solo circuito.
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:- «Cambia el neón a ámbar #ffb347 con el subtítulo en blanco cálido»
- «Que el rótulo se encienda más despacio, con 400 ms entre letras»
- «Quita la avería de la «t» y haz que titubee la «e»»
- «Pon el subtítulo «VERMUTERÍA · TERRAZA»»
- 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
¿Puedo poner el nombre de mi local en la cursiva?
Sí. La palabra de la demo está dibujada a mano con trazos monolínea; el prompt da las reglas exactas (rejilla, grosor, separación y ancho) para que la IA dibuje tu nombre con el mismo estilo. El subtítulo en mayúsculas se compone solo con cualquier texto.
¿Necesita WebGL o alguna librería?
No. Es SVG generado con JavaScript, filtros de desenfoque y CSS. Funciona en cualquier navegador actual, pesa unos 30 KB y no carga nada aparte de las fuentes de Google.
¿Parpadea sin parar? Me preocupa que moleste.
No. Solo parpadea al encenderse y, cada 6–9 segundos, una letra titubea un instante. Si el usuario tiene activado reducir movimiento, el rótulo aparece encendido y quieto. Puedes quitar la avería con una línea.
¿Cómo funciona en el móvil?
El rótulo ocupa casi todo el ancho, el interruptor sigue funcionando con el dedo y tocar una letra la hace parpadear. El paralaje solo se activa con ratón.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13125 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2626 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
