Persiana
GratisCristal y luz · WebGL
La pieza
Qué hace y dónde encaja
Un fondo vivo a pantalla completa: el humo sube en filamentos gracias a una advección por rizo en un fragment shader, iluminado en naranja por una cama de brasas que parpadea en el borde inferior. Encima, cientos de chispas simuladas con física ligera flotan, se alargan en la dirección del viento y pasan del blanco al rojo antes de apagarse. El calor sube con el scroll y con el puntero: moverlo abanica el fuego, remueve el humo y aparta las chispas; un clic, un toque o el botón «Avivar las brasas» lanza una bocanada. Unas lecturas en vivo muestran la temperatura, el aire y el humo. Pensado para asadores, parrillas, bares de copas, bodegas y eventos nocturnos, en portadas o secciones de reserva. Cambiando la brasa a azul hielo y el humo a gris frío se convierte en hielo seco para una coctelería.
Encaja bien en webs de
- Prompt
- ≈13.834 tokens · con Lite
- Librerías
- three
- Demo
- 31,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 del negocio
- Ciudad
- Teléfono
- Correo de contacto
- Color del fondo
- Color del humo
- Color de la brasa
Í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.451 palabras · ≈13.834 tokens
- Lite
- 1.071 palabras · ≈2.281 tokens
- Librerías
- three 0.186.1
- Peso de la demo
- 31,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.451 palabras en el Completo y 1.071 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 del original: el código es idéntico al de la demo salvo espacios, así que el humo con rizo, las chispas alargadas, la cama de brasas, las lecturas en vivo y toda la maquetación salen iguales en escritorio y móvil. Solo cambia lo aleatorio: la posición del humo y de las chispas en cada fotograma.
Prompt LiteAceptable6,8/10
El fondo está muy bien resuelto: humo con rizo, chispas alargadas, brasas y el calor que sube con el scroll, con los mismos valores que el original. La página alrededor se aparta bastante: las descripciones de los platos son inventadas, las lecturas van apiladas en columna, el menú está en mayúsculas mono, los rótulos no llevan filete, el titular de Reservas cabe en una línea y falta un crédito. Además, el soplo sale en abanico y aviva menos el fuego.
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 humo más espeso y lento, como de leña húmeda»
- «Cambia la brasa a azul hielo y el humo a gris frío para una coctelería»
- «Que salgan menos chispas pero más grandes»
- «Quita las secciones y deja solo el fondo detrás de mi portada»
- 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 lee bien el texto encima?
Sí. El humo tiene el brillo limitado, la portada lleva un velo oscuro detrás del bloque de texto y los textos pequeños una sombra suave. Si pones texto sobre la franja inferior de brasa, súbelo o reduce el valor de la cama de brasas.
¿Va fluido en móvil?
Sí. El humo se calcula a media resolución, en móvil hay 150 chispas en lugar de 320, el DPR se limita a 1,5 y la animación se pausa cuando la pieza no está en pantalla o la pestaña está oculta.
¿Qué pasa si el navegador no tiene WebGL?
Se oculta el lienzo y queda un degradado CSS con el mismo resplandor de brasa sobre el fondo oscuro; el resto de la página funciona igual.
¿Puedo usarlo solo en una sección y no en toda la página?
Sí. Cambia el lienzo de fijo a absoluto dentro de la sección, calcula el tamaño con las medidas de esa sección y deja el calor en un valor fijo en lugar de atarlo al scroll.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13834 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2281 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
