Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Toda la pantalla es una pared de mosaicos en three.js, ligeramente girada y con vidriado brillante. Cada pieza tiene dos caras pintadas por código: tres colecciones (Cobalto en azul, Lazo en verde y melado, Terracota en terracota y verde de mar) que casan entre vecinos y forman un tapiz continuo. Al pasar el cursor, los mosaicos cercanos giran sobre su diagonal con un muelle físico y enseñan la colección siguiente; un clic o el botón lanzan una ola circular, y el scroll voltea la pared entera en ola diagonal al cambiar de sección. Una luz rasante sigue al cursor y hace brillar el esmalte. Encaja como portada de talleres artesanos, estudios de interiorismo, restaurantes de autor o tiendas de cerámica, y como fondo de fichas de producto. Los esmaltes se cambian por variables y se pueden añadir motivos nuevos.
Encaja bien en webs de
- Prompt
- ≈14.577 tokens · con Lite
- Librerías
- three · gsap
- Demo
- 34,7 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 del negocio
- Ciudad
- Provincia
- Año de fundación
- Teléfono
- Azul cobalto (colección Cobalto)
- Verde (colección Lazo)
- Melado (colección Lazo)
- Terracota (colección Terracota)
- Blanco de estaño (fondo de los mosaicos)
- Papel de las fichas
Í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.926 palabras · ≈14.577 tokens
- Lite
- 1.630 palabras · ≈2.866 tokens
- Librerías
- three 0.186.1 · gsap 3.15.0
- Peso de la demo
- 34,7 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.926 palabras en el Completo y 1.630 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
Calco exacto: el código generado coincide línea a línea con el original, así que pared, mosaicos, fichas, muelles, olas y scroll se comportan igual. Las pequeñas diferencias en las capturas solo se deben al momento en que se tomaron, a mitad de una ola.
Prompt LiteFiel a la demo8/10
La pared 3D, los tres motivos, los muelles, las olas y el cambio de colección con el scroll usan los mismos valores que el original, y todos los textos están. Cambian detalles de las fichas: la marca va en dos líneas, «Lanzar una ola» es un botón cobalto, el subtítulo está en serif itálica y las cabeceras «Colección · 02 / 03» van en una sola línea.
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 los mosaicos más grandes y la pared menos girada»
- «Que la ola del scroll vaya de abajo arriba»
- «Añade una cuarta colección en blanco y añil»
- «Que el volteo sea más lento y con más rebote»
- 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 usar mis propios dibujos de mosaico?
Sí. Cada motivo es una función de Canvas 2D dentro de paint(); cambia la rama que quieras o añade otra y sube el número de celdas del atlas. Conviene que el dibujo sea simétrico y que sus bordes casen con el vecino para que la pared forme un tapiz continuo.
¿Funciona en móvil, donde no hay cursor?
Sí. En táctil, tocar la pared lanza una ola de volteos, cada pocos segundos sale una ola automática y el scroll cambia de colección. La luz del vidriado pasea sola.
¿Pesa mucho?
No. Es una sola malla instanciada con unos 300 mosaicos y una textura pintada al cargar, sin imágenes externas. El bucle se detiene cuando la pieza no está en pantalla y el DPR se limita a 2 (1,5 en móvil).
¿Qué pasa si el navegador no tiene WebGL?
La pared se sustituye por el mosaico de la colección activa repetido como fondo CSS, que también cambia con el scroll, y todo el texto sigue funcionando.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈14577 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2866 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
