Malla de color
GratisFlujo · CSS
La pieza
Qué hace y dónde encaja
Un fondo de nácar vivo hecho con un shader: capas de crecimiento finas y onduladas sobre un blanco perla cálido, que se encienden en rosa, verde agua, lavanda y oro según el ángulo de visión, como una concha de verdad. El color sale de una simulación de interferencia de película fina para tres longitudes de onda y responde al cursor, al arrastre táctil, al teclado o al giroscopio del móvil (con botón de permiso en iOS), siempre con inercia de muelle; si nadie lo toca, deriva solo. Incluye un panel de lectura con el espesor de la película, el ángulo y el nombre del tono en directo, y una colección de tres joyas cuyas siluetas muestran recortes vivos del mismo nácar. Encaja en joyerías, cosmética, estética, perfumería y portadas de marca que buscan lujo tranquilo. Cambiando el color base sale nácar plateado de abulón o perla champán.
Encaja bien en webs de
- Prompt
- ≈13.924 tokens · con Lite
- Librerías
- ninguna
- Demo
- 30,9 KB · ligero
- Prueba en frío
- 9,8/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
- Provincia
- Nombre de la colección
- Email de contacto
- Teléfono
- Color base del nácar
- Color del texto
Í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.790 palabras · ≈13.924 tokens
- Lite
- 1.349 palabras · ≈2.900 tokens
- Librerías
- ninguna
- Peso de la demo
- 30,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
5.790 palabras en el Completo y 1.349 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,8/10
Prácticamente un calco: el archivo coincide con el original salvo una línea en blanco, así que el shader de nácar, el muelle, la lectura en vivo, las tres joyas y el móvil son idénticos. Las únicas diferencias en las capturas vienen del momento en que se tomaron (tono y deriva del nácar).
Prompt LiteAceptable6,8/10
El shader, los textos, el titular iridiscente y la física del muelle salen fieles, y el nácar se ve igual de perlado. Cambia el acabado: el panel de lectura pasa a ser una tarjeta translúcida con título serif y botón «Activar inclinación» visible en escritorio, el cordón y los ganchos de las joyas son de nácar en vez de trazos grises, la cabecera de la colección va en una sola columna y el pie tiene otra composición.
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 el nácar más plateado y frío, tipo abulón»
- «Que el color sea más intenso, casi holográfico»
- «Capas de crecimiento más anchas y lentas»
- «Quita la colección y deja solo la portada con el panel de lectura»
- 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
¿Funciona la inclinación en iPhone?
Sí. iOS exige permiso para leer el giroscopio, así que en móviles Apple aparece el botón «Activar inclinación»; al pulsarlo, Safari pregunta y, si aceptas, el nácar sigue el movimiento del teléfono. Si la página va dentro de un iframe de otro dominio, el iframe necesita permitir el acelerómetro y el giroscopio; si no, se usan el toque y la deriva automática.
¿Puedo usar solo el fondo, sin el texto ni la colección?
Sí. El shader es independiente: basta con el canvas fijo, el script y la variable --nacar. El panel de lectura y las joyas son capas opcionales que puedes borrar sin tocar el GLSL.
¿Consume mucha batería o se ve mal en móviles antiguos?
Limita la densidad de píxeles a 1,5 en móvil, baja la calidad sola si detecta fotogramas lentos y se detiene cuando sales de la pantalla o cambias de pestaña. Sin WebGL muestra un degradado CSS con los mismos tonos.
¿Cómo cambio los colores de la iridiscencia?
Con el color base (--nacar) cambias el blanco de fondo, y con el espesor de película (420 nm por defecto) desplazas toda la gama: valores más bajos tiran a verdes y oros, más altos a azules y lavandas.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13924 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2900 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
