Titular gigante
GratisBloques de web · GSAP
La pieza
Qué hace y dónde encaja
La pantalla está a oscuras: apenas se intuyen siluetas y una pista dice «Aquí no hay nada.». A los pocos milisegundos una linterna se enciende con un parpadeo y, allí donde apunta el cursor o el dedo, una máscara radial recorta la oscuridad y deja leer la pared de debajo: un cartel tipográfico en rojo almagra con la fecha, la dirección, la contraseña, una mini carta con precios y una nota pegada con cinta. El haz tiene inercia, corona de luz y polvo suspendido; se estrecha al mantener pulsado, deriva solo cuando nadie toca y un interruptor «Dar la luz» ilumina toda la pared. Funciona con teclado y respeta el movimiento reducido. Encaja en inauguraciones, fiestas privadas, bares clandestinos, lanzamientos de producto o cualquier página de «próximamente». Cambia el color de la pared y el de la luz en dos variables.
Encaja bien en webs de
- Prompt
- ≈13.424 tokens · con Lite
- Librerías
- ninguna
- Demo
- 28,4 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 negocio
- Tipo de negocio
- Nombre del evento
- Fecha del evento
- Hora de inicio
- Dirección
- Ciudad
- Contraseña de la puerta
- Email de reservas
- Teléfono
- Color de la pared
- Color de la luz
Í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.568 palabras · ≈13.424 tokens
- Lite
- 1.293 palabras · ≈2.630 tokens
- Librerías
- ninguna
- Peso de la demo
- 28,4 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.568 palabras en el Completo y 1.293 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 prácticamente exacto: el código solo difiere del original en espacios en blanco, así que coinciden la pared almagra, la máscara, el halo, el polvo, el parpadeo de encendido, la deriva y el móvil. La única diferencia visible entre capturas es el punto de la deriva en el que se tomó cada una.
Prompt LiteFiel a la demo7,2/10
El efecto sale igual: máscara, halo con corona, polvo, parpadeo, deriva, enfoque al pulsar e interruptor, con los mismos valores. Cambian detalles de dirección de arte: la nota va en Fraunces cursiva con cinta mostaza, el sello de contraseña tiene otra composición, el texto vertical va en mayúsculas, los textos secundarios usan serif en vez de mono, la linterna arranca en el centro y en móvil la carta aparece antes de los datos.
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:- «Haz el foco más pequeño y con el borde más nítido»
- «Cambia la pared a verde botella y la luz a blanco frío»
- «Que la linterna tarde más en empezar a moverse sola»
- «Quita el polvo del haz y deja solo la luz»
- 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
¿Se puede leer el contenido sin mover la linterna?
Sí. Todo el texto está en el HTML y lo leen los lectores de pantalla; además, el interruptor «Dar la luz» (o la tecla L) ilumina la pared entera, y con movimiento reducido la pieza ya arranca con la luz dada.
¿Cómo funciona en el móvil?
Se arrastra el dedo para mover la luz y, si no se toca nada durante 3,2 segundos, la linterna recorre la pared sola. El interruptor queda arriba a la derecha y todo el cartel cabe en una pantalla.
¿Puedo usarla como una sección dentro de una web con scroll?
Sí, quitando el overflow hidden del body. Ten en cuenta que en táctil el escenario bloquea el arrastre para mover la luz, así que conviene dejarla a pantalla completa o como portada.
¿Pesa mucho o necesita WebGL?
No. Es CSS con una máscara radial, un bucle de JavaScript y un canvas pequeño para el polvo: unos 30 KB en total, sin librerías y con el bucle en pausa cuando no está en pantalla.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13424 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2630 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
