Malla de color
GratisFlujo · CSS
La pieza
Qué hace y dónde encaja
Un gradiente a pantalla completa que se comporta como una superficie de agua de verdad, en blanco, negro y un único color vivo. Un shader WebGL2 combina olas de fondo con una simulación de ondas en una textura: el gradiente de color se dobla al pasar por cada onda y las cáusticas, finas líneas de ancho constante, aparecen donde la refracción se enfoca. El cursor es una linterna que descubre esa red y suelta una estela de gotas; un clic o un toque lanza un anillo grande y suma uno a un contador con efecto rodillo. Sin cursor, la linterna y las gotas siguen solas. Trae tres paletas con fundido de 1 s: Eléctrico, Ácido y Señal (claro, con líneas negras). Incluye titular enorme en grotesca, botón magnético y selector. Encaja en hero de estudio, lanzamiento de producto, marca deportiva o cabecera de aplicación.
Encaja bien en webs de
- Prompt
- ≈13.235 tokens · con Lite
- Librerías
- ninguna
- Demo
- 30,5 KB · ligero
- Prueba en frío
- pendiente
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:
- Titular (una palabra corta)
- Línea bajo el titular
- Color del agua (fondo)
- Color de las líneas y el texto
- Color vivo del gradiente
Í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.268 palabras · ≈13.235 tokens
- Lite
- 1.083 palabras · ≈2.380 tokens
- Librerías
- ninguna
- Peso de la demo
- 30,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
6.268 palabras en el Completo y 1.083 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.
Prueba en frío
La prueba en frío
Aún sin publicar para esta pieza
En la prueba en frío pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos lo que genera con la demo. Cuando esté hecha, aquí verás la captura, el veredicto y la fecha.
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 el azul eléctrico por rojo y deja el fondo en negro puro»
- «Haz la red de cáusticas visible siempre, no solo cerca del cursor»
- «Que las gotas duren más y los anillos lleguen hasta los bordes»
- «Úsalo como fondo de mi cabecera, con 90 vh de alto y mi propio titular»
- 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 poner mi texto encima?
Sí. El acento se desvanece arriba y abajo para que el texto tenga siempre fondo limpio; solo tienes que mantener el titular y los controles en esas franjas o ajustar la envolvente del shader con la medida del pie de página.
¿Cómo lo uso como fondo de una sola sección?
Cambia .escena de position: fixed a absolute dentro de un contenedor con position: relative y la altura que quieras. El IntersectionObserver ya detiene el bucle cuando la sección sale de pantalla.
¿Funciona en móvil y gasta mucha batería?
Sí. En táctil el DPR máximo es 1,5, la escala parte de 0,85 y baja sola si un cuadro pasa de 22 ms; el piloto automático mantiene el agua viva y tocar suelta una gota. Se detiene fuera de pantalla o con la pestaña oculta.
¿Qué pasa si el navegador no tiene WebGL2?
Se muestra un degradado CSS con los colores de la paleta y los textos siguen visibles. Con movimiento reducido se pinta una imagen fija con los anillos ya formados.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13235 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2380 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 01-10-2026
