Persiana
GratisCristal y luz · WebGL
La pieza
Qué hace y dónde encaja
Un fondo de acuarela en un solo shader: papel crema con fibras y grano, y cinco gotas de los colores de tu marca que crecen con bordes orgánicos, pigmento acumulado en el perímetro, marcas de marea y un halo de papel mojado. Los colores se mezclan como tinta de verdad: gualda sobre añil da verde oliva. El scroll hace crecer cada gota por turnos y, al llegar al contacto, una marea de tinta sube desde abajo y deja el texto en crema sobre color. La tinta rodea los bloques de texto como si fueran cera, así que todo se lee siempre. Clic o toque para soltar gotas nuevas. Encaja en estudios creativos, papelerías, bodegas, galerías e interiorismo; funciona igual en azul y teja, en verde botella y mostaza o en tinta negra sobre papel hueso.
Encaja bien en webs de
- Prompt
- ≈11.624 tokens · con Lite
- Librerías
- ogl
- Demo
- 26 KB · ligero
- Prueba en frío
- 9,6/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 de la marca
- Ciudad
- Dirección del pie
- Email de contacto
- Teléfono
- Color del papel
- Tinta principal (y de la inundación)
- Tinta secundaria
- Tinta de acento
Í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.815 palabras · ≈11.624 tokens
- Lite
- 1.212 palabras · ≈2.238 tokens
- Librerías
- ogl 1.0.11
- Peso de la demo
- 26 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
5.815 palabras en el Completo y 1.212 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,6/10
Prácticamente un calco: mismo papel, mismas gotas con anillo y marcas de marea, misma inundación de añil con texto crema y mismo comportamiento de scroll, puntero y clic. Solo cambia la forma exacta de las manchas, que depende del ruido y del instante de la captura.
Prompt LiteFiel a la demo7,2/10
Conserva lo esencial (gotas que crecen con el scroll, mezcla por absorción, reservas alrededor del texto e inundación final) con casi los mismos valores. Cambia el acabado: fibras del papel mucho más marcadas, la lista de tintas en cuatro columnas a todo el ancho que corta la tinta en recto, logotipo en forma de lágrima y la cursiva del contacto en gualda en lugar de crema.
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:- «Cambia las tintas a verde botella, teja y mostaza»
- «Que la inundación empiece antes y suba más despacio»
- «Haz los bordes de la tinta más quebrados y con más granulado»
- «Quita la inundación y deja solo las gotas»
- 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
¿El texto se sigue leyendo cuando la tinta crece?
Sí. Los bloques de texto funcionan como reservas: la tinta los rodea con un margen orgánico y nunca pasa por debajo. En la última sección el texto es crema sobre la tinta principal, con contraste de más de 7:1.
¿Puedo usar los colores de mi marca?
Sí. Cambia las cuatro variables de color del :root; el shader las lee al arrancar. La tinta principal conviene que sea oscura, porque es el fondo de la sección final.
¿Cómo se ve en móvil o con movimiento reducido?
En móvil las gotas se recolocan en los márgenes y la resolución baja a 1,5x. Con movimiento reducido se pinta un único fotograma estático y la sección final lleva fondo sólido. Sin WebGL se muestran manchas en CSS con los mismos colores.
¿Puedo usarlo solo como fondo de una sección y no de toda la página?
Sí: cambia el canvas de position:fixed a absolute dentro de la sección, ajusta las posiciones de las gotas y desactiva la inundación fijando uFlood a -1.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈11624 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2238 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
