Persiana
GratisCristal y luz · WebGL
La pieza
Qué hace y dónde encaja
Un fondo WebGL a pantalla completa que calcula de verdad cómo la superficie del agua enfoca el sol: una red continua de cáusticas turquesa, con flecos cromáticos finos, que baila sobre teselas de gresite refractadas. El cursor deja una estela que dobla la luz, un toque lanza una gota y, si nadie interactúa, caen gotas sueltas. Al hacer scroll el agua se hace más profunda y un profundímetro lo marca. Bajo los textos el shader calma la luz para que todo se lea sin paneles. Incluye tres aguas con transición suave: piscina de gresite, cala de arena esmeralda y spa nocturno de pizarra con luz ámbar. Ideal para constructoras de piscinas, hoteles, spas, villas de alquiler, clubes de playa o cualquier hero que pida verano y calma.
Encaja bien en webs de
- Prompt
- ≈16.404 tokens · con Lite
- Librerías
- ogl
- Demo
- 34,5 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 negocio
- Ciudad
- Titular: primera línea
- Titular: segunda línea (parte recta)
- Titular: final en cursiva
- Teléfono
- Correo electrónico
- Dirección del estudio
- Color del agua
- Color profundo
- 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
- 7.713 palabras · ≈16.404 tokens
- Lite
- 1.410 palabras · ≈2.609 tokens
- Librerías
- ogl 1.0.11
- Peso de la demo
- 34,5 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
7.713 palabras en el Completo y 1.410 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
Prácticamente idéntica al original: mismo shader de cáusticas con flecos cromáticos, gresite, ondas del cursor, inmersión con el scroll, zonas de calma y maquetación en escritorio y móvil. Lo único distinto es que el enlace del teléfono lleva espacios en el href; las diferencias en las capturas se deben a que el agua estaba en otro instante.
Prompt LiteFiel a la demo7,8/10
El agua sale igual: cáusticas, gresite, ondas, profundidad, calma bajo el texto y las tres paletas con los mismos valores. La interfaz la interpretó a su manera: el h2 va en una sola línea, «Ver esta agua» son píldoras en lugar de enlaces subrayados, el selector de agua son píldoras sueltas sin la cápsula común, el profundímetro está en espejo y las cifras llevan una raya encima.
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 red de luz más fina y con más líneas»
- «Que el agua sea verde esmeralda por defecto, como la paleta Cala»
- «Añade una cuarta agua de piscina natural con fondo de piedra verde»
- «Que la estela del cursor sea más marcada y dure más»
- «Quita el profundímetro y deja solo el fondo detrás de mi hero»
- 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 usarlo solo como fondo detrás de mi propia web?
Sí. Conserva el canvas, el velo y el script, y marca tus bloques de texto con data-calma: el shader calmará la luz debajo de ellos para que se lean.
¿Va bien en móvil?
Sí. Limita la resolución a 1,5×, usa una simulación de ondas más pequeña, deja la mitad superior como agua libre y responde al toque y al arrastre. Si el móvil no admite texturas half float, las cáusticas siguen funcionando sin ondas.
¿Cómo cambio los colores?
Cambia color_agua, color_profundo y color_luz en el personalizador. Para añadir otra agua, se añade una entrada a PALETAS con sus colores y el tipo de fondo (gresite, arena o losa).
¿Qué pasa si alguien tiene activado reducir movimiento?
Se muestra un fotograma fijo de las cáusticas, sin bucle ni ondas, que se actualiza al cambiar de agua o hacer scroll. Sin WebGL queda un degradado con los mismos colores.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈16404 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2609 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
