Malla de color
GratisFlujo · CSS
La pieza
Qué hace y dónde encaja
Un cielo a pantalla completa pintado con una rampa de cinco colores que pasa por el alba, la mañana, el mediodía, la tarde, la hora dorada, la hora azul y la noche. Los colores se interpolan en OKLab, así que las transiciones nunca se ensucian, y el shader añade estratos que se mueven despacio, un sol que recorre su arco, estrellas que titilan de noche y grano contra el banding. El scroll lleva el cielo de sección en sección, y un conmutador lo sincroniza con la hora local del visitante. Un dial con reloj, deslizador accesible y «Copiar CSS» enseña el degradado del instante, y toda la tinta se adapta sola para mantener el contraste. Encaja en hoteles, terrazas, restaurantes, bodegas y webs de eventos al aire libre, como portada o como fondo que cambia con la hora.
Encaja bien en webs de
- Prompt
- ≈14.892 tokens · con Lite
- Librerías
- ogl
- Demo
- 32,1 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
- Ciudad
- Región
- Teléfono
- Email de contacto
- Precio de la cena por persona
- Horizonte de la hora dorada
- Cénit de la noche
Í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.899 palabras · ≈14.892 tokens
- Lite
- 1.798 palabras · ≈2.943 tokens
- Librerías
- ogl 1.0.11
- Peso de la demo
- 32,1 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.899 palabras en el Completo y 1.798 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
Prácticamente idéntica al original: mismo cielo WebGL, paletas en OKLab, tinta adaptativa, riel, dial y movimientos, en escritorio y en móvil. El único cambio es una mejora: guarda el botón antes del await al copiar el CSS.
Prompt LiteFiel a la demo7,6/10
El cielo, los colores, el sol, las estrellas y toda la lógica de scroll, hora real y suavizado salen igual. Cambian detalles de acabado: antetítulos y marcas en minúsculas sin subrayado activo, el riel pegado al borde con guiones de texto, el reloj y el nombre del momento en fila y el precio en una sola línea.
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 cielo empiece siempre en la hora real del visitante»
- «Haz la hora dorada más rosa y menos naranja»
- «Quita el sol y deja solo el degradado con estratos»
- «Adelanta la puesta de sol a las 18:30 para una web de invierno»
- «Usa solo el cielo como fondo del hero, sin secciones ni dial»
- 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 el dial ni las secciones?
Sí. El cielo es un div fijo con su canvas y un bucle independiente: quita secciones, riel y dial, y fija el modo en «reloj» para que siempre muestre el cielo de la hora del visitante.
¿Qué pasa si el navegador no tiene WebGL?
Se queda un degradado CSS con los mismos cinco colores y las mismas paradas, y JavaScript lo sigue actualizando: el día sigue pasando, solo sin sol, estratos ni estrellas.
¿Cómo cambio los colores de cada momento del día?
Cada fotograma del día tiene su paleta de cinco colores, de horizonte a cénit. Edítala; si una transición pasa por tonos grises, añade un fotograma intermedio con fase fraccionaria, como la Tarde o la Hora azul.
¿El texto se sigue leyendo cuando el cielo se oscurece?
Sí. Cada franja (cabecera, textos, dial y cada etiqueta del riel) elige en cada fotograma entre tinta oscura y clara la que da más contraste sobre el color que tiene detrás.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈14892 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2943 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
