Malla de color
GratisFlujo · CSS
La pieza
Qué hace y dónde encaja
Un gradiente a pantalla completa que parece seda líquida y pesada. Un único shader WebGL2 de menos de 1,5 KB genera pliegues largos con otros finos encima, los ilumina como satén con una luz que sigue al puntero y deja una cinta de color vivo justo donde la luz roza cada pliegue. El puntero arrastra la seda con inercia y deja una estela que tarda segundos en asentarse; cada clic o toque suelta una onda lenta. Un deslizador de viscosidad cambia la sensación de agua a brea. Trae tres paletas conmutables en blanco y negro con un solo acento: Cobalto, Amapola (versión clara) y Lima. Encaja como portada de estudio, lanzamiento de producto, marca de moda o cabecera de landing minimalista, y como fondo de sección con titular enorme encima.
Encaja bien en webs de
- Prompt
- ≈10.709 tokens · con Lite
- Librerías
- ninguna
- Demo
- 24,2 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, primera línea
- Titular, segunda línea
- Negro profundo (sombras y fondo)
- Tono medio de los pliegues
- Color vivo
Í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.125 palabras · ≈10.709 tokens
- Lite
- 1.210 palabras · ≈2.434 tokens
- Librerías
- ninguna
- Peso de la demo
- 24,2 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.125 palabras en el Completo y 1.210 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:- «Haz que la seda tenga más pliegues y más finos»
- «Cambia el color vivo a naranja intenso»
- «Que la seda sea más espesa y tarde más en volver a su sitio»
- «Úsalo de fondo de la cabecera con 90 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 mi propio titular y logotipo encima?
Sí. El titular son dos líneas editables (titular_linea1 y titular_linea2) y el resto de la interfaz es HTML normal por encima del canvas. Para un titular largo, reduce el clamp de font-size. Si pones texto pequeño, déjalo sobre una chapa del color de fondo para mantener el contraste.
¿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.
¿Cómo añado otra paleta o cambio el color vivo?
Edita el array PALETAS del script: cada paleta son cuatro colores [sombra, medio, brillo, acento], un indicador claro 0 o 1 y los colores de tinta y fondo de la interfaz. Añade un botón más con data-paleta y el mismo patrón radio.
¿Qué pasa en un móvil o sin WebGL2?
En móvil renderiza a menor resolución, baja la calidad sola si un cuadro tarda más de 22 ms y usa el piloto automático si nadie toca. Sin WebGL2 se muestra un degradado CSS con los mismos colores; con movimiento reducido se pinta una imagen fija.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈10709 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2434 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 01-10-2026
