Malla de color
GratisFlujo · CSS
La pieza
Qué hace y dónde encaja
Un gradiente vivo a pantalla completa que parece tinta suspendida en agua quieta fotografiada sobre negro: plumas de color que se enroscan, bordes encendidos como filamentos, velos de humo finos y grandes zonas de agua limpia para respirar. Es un único shader WebGL2 de menos de 2 KB con domain warping en tres niveles. El puntero deja una estela que retuerce la tinta en remolinos según la velocidad, y cada clic o toque suelta una gota que florece con el borde deshilachado y se disuelve en 16 segundos; sin puntero, la tinta se remueve sola. Trae tres paletas conmutables con transición suave: Añil, Grana y Azafrán. Encaja como fondo de portada, cabecera de estudio creativo, lanzamiento de producto, bodega o marca de cosmética, y como separador cinematográfico entre secciones.
Encaja bien en webs de
- Prompt
- ≈9.206 tokens · con Lite
- Librerías
- ninguna
- Demo
- 17,9 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
- Línea bajo el titular
- Color del agua (fondo)
- Color de la tinta diluida
- Color principal de la tinta
- Color de los filamentos de luz
- Color del segundo pigmento
Í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
- 4.393 palabras · ≈9.206 tokens
- Lite
- 889 palabras · ≈1.941 tokens
- Librerías
- ninguna
- Peso de la demo
- 17,9 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
4.393 palabras en el Completo y 889 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:- «Deja más agua limpia y menos tinta en pantalla»
- «Haz que la tinta se mueva la mitad de rápido»
- «Cambia la paleta principal a verde botella con filamentos dorados»
- «Úsalo como fondo de la cabecera, con 80 vh de alto y mi titular encima»
- 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 texto encima?
Sí. La tinta deja zonas casi negras y el texto lleva una sombra suave; para un titular grande, sube el umbral de la envolvente (smoothstep .42,.72) y tendrás más agua limpia detrás.
¿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 para el bucle cuando la sección sale de pantalla.
¿Consume mucha batería en móvil?
Renderiza a 0,75 de la resolución con DPR máximo 1,5 en táctil, baja la calidad sola si un cuadro pasa de 22 ms y se detiene fuera de pantalla o con la pestaña oculta.
¿Qué pasa en un navegador sin WebGL2?
Se muestra un degradado CSS con los mismos colores de la paleta y los textos siguen visibles. Con movimiento reducido se pinta una imagen fija.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈9206 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈1941 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
