Persiana
GratisCristal y luz · WebGL
La pieza
Qué hace y dónde encaja
Un fondo WebGL a pantalla completa que recrea una tarde de calima: velos de polvo naranja hechos con fbm y domain warping que se retuercen con el viento, cinco capas de dunas de cresta afilada que se pierden en la bruma, un sol pálido que se puede mirar y 1.400 granos de arena cruzando la pantalla. El ratón mueve las dunas con parallax, aparta la arena y levanta rachas; en móvil, un toque hace lo mismo y hay rachas automáticas. Al hacer scroll el sol se hunde y la escena vira a un anochecer rojo oscuro sobre el que el texto claro se lee sin esfuerzo. Incluye una lectura de PM10, visibilidad y viento con un control de densidad que espesa o limpia la bruma. Encaja en festivales, moda, eventos al aire libre, hoteles del desierto o bodegas del sur. Cambia de paleta con cinco colores: calima rosada, arena blanca o polvo rojo.
Encaja bien en webs de
- Prompt
- ≈14.922 tokens · con Lite
- Librerías
- ninguna
- Demo
- 33,8 KB · ligero
- Prueba en frío
- 9,7/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 festival o marca
- Titular gigante
- Lugar
- Fechas
- Email de contacto
- Teléfono
- Color del cielo (cénit)
- Color del polvo y la bruma
- Color de la duna cercana
- Color del sol y del texto claro
- Color del titular
Í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
- 6.809 palabras · ≈14.922 tokens
- Lite
- 1.346 palabras · ≈2.336 tokens
- Librerías
- ninguna
- Peso de la demo
- 33,8 KB (ligero)
- Resolución máxima (DPR)
- 2
- Se pausa fuera de pantalla
- sí
- Respeta «menos movimiento»
- sí
- Alternativa sin WebGL
- 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
6.809 palabras en el Completo y 1.346 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,7/10
Es prácticamente un calco: la bruma, las cinco capas de dunas, el sol, el viraje al anochecer rojo, la maquetación, la tipografía y el código (shader, viento, densidad, pausa) son idénticos al original. Solo cambian la fase del viento en la captura y una línea en blanco del código.
Prompt LiteAceptable6,4/10
Acierta la paleta, la bruma, el sol, el anochecer al hacer scroll, los textos y todas las interacciones. Las dunas tienen una luz lateral exagerada que las deja en bloques escalonados. El maquetado se aparta en varios puntos: la lectura va en una tarjeta de cristal, los días del cartel en tarjetas, los botones y la navegación en versales, y el logo parece un icono de menú.
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 la calima rosada, con el polvo en #e2837a y el cielo en #6e2a3a»
- «Que el viento sople más fuerte y la arena vaya más rápida»
- «Quita la página de festival y deja solo el fondo detrás de mi contenido»
- «Pon el sol a la izquierda y el titular a la derecha»
- 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 usar solo el fondo, sin la página del festival?
Sí. Conserva el div.fondo con su canvas y el script, y coloca tu contenido encima con position: relative y z-index: 1. El prompt explica qué partes son del fondo y cuáles de la página.
¿Va bien en móviles?
Sí. En móvil usa la mitad de partículas y DPR 1,5, baja la resolución sola si el fps cae de 45 y se detiene cuando no está en pantalla. Sin WebGL queda un degradado con sol y dunas en SVG.
¿Cómo cambio los colores?
Con los cinco tokens de :root. El shader los lee al arrancar, así que basta con cambiar los hexadecimales. Mantén la duna y la tinta muy oscuras para conservar el contraste del texto.
¿Qué pasa con quien tiene activado reducir movimiento?
Ve un fotograma estático; el scroll solo cambia el color hacia el anochecer, sin parallax, y los textos aparecen ya colocados. Además hay un botón para pausar el fondo en cualquier momento.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈14922 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2336 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
