Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Una copa de vidrio generada por torno refracta un telón cálido de bodega con el nombre del vino en Bodoni gigante. Al bajar la página se sirve: cae un chorro fino, la superficie dibuja anillos donde toca y el nivel sube según el volumen real del cáliz, mientras un medidor cuenta los mililitros. La copa gira despacio con un grabado al ácido, sigue al cursor con un muelle y el vino se balancea con su inercia; el botón «Remover la copa» (o un toque sobre ella) la hace girar en círculos hasta que el vino entra en resonancia. En el suelo, una cáustica granate crece con lo servido. Encaja en la portada de una bodega, la ficha de un vino, la carta de un restaurante o una landing de catas. Cambia el color del líquido para rosados o blancos, y la palabra del telón para cualquier marca.
Encaja bien en webs de
- Prompt
- ≈13.629 tokens · con Lite
- Librerías
- three · gsap
- Demo
- 33,3 KB · ligero
- Prueba en frío
- 9,6/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 bodega
- Palabra del telón (nombre del vino)
- Añada
- Zona de origen
- Localidad de la bodega
- Mililitros servidos
- Precio de la botella
- Email de contacto
- Teléfono
- Color del vino (núcleo)
- Color del ribete del vino
- Color de fondo
- Luz del telón
- Color de acento
Í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.472 palabras · ≈13.629 tokens
- Lite
- 1.313 palabras · ≈2.463 tokens
- Librerías
- three 0.186.1 · gsap 3.15.0
- Peso de la demo
- 33,3 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.472 palabras en el Completo y 1.313 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,6/10
Prácticamente un calco: misma copa de vidrio, mismo vino con anillos, chorro, medidor, textos y comportamiento con el scroll y el puntero; el código solo difiere en un salto de línea. La única diferencia visible (captura a mitad de scroll desplazada y con 64 ml en vez de 75) viene del momento de la captura, no del resultado.
Prompt LiteAceptable6,4/10
Maquetación, tipografía, textos y toda la física (muelle de la copa, oleaje, chorro, remover, llenado por scroll) salen muy fieles. Lo que falla es la atmósfera: el telón es un bloque cobre brillante que corta en seco contra un suelo negro, la palabra «Lucero» aparece opaca en oro en vez de insinuada, el chorro es bastante más grueso y la ficha usa Bodoni donde el original usa Hanken Grotesk.
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:- «Conviértelo en un rosado: vino #c2455a y ribete #f08a8a»
- «Que la copa se llene antes, a mitad de página»
- «Haz el oleaje más exagerado al mover el ratón»
- «Cambia la palabra del telón por el nombre de mi restaurante»
- 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
¿Necesito un modelo 3D o imágenes de la copa?
No. La copa, el vino, el chorro, los reflejos y el telón se generan con código: un perfil de torno, shaders y dos canvas. No hay que subir ningún archivo.
¿Funciona en móvil?
Sí. En vertical la copa se coloca arriba y el texto abajo; el scroll sirve el vino y un toque sobre la copa la remueve. El DPR se limita a 1,5 para que vaya fluido.
¿Puedo usarlo para un vino blanco o un rosado?
Sí: cambia el color del núcleo y del ribete del vino. Para un blanco prueba #c9a44a y #f3dc8c; el resto de la escena se mantiene.
¿Qué pasa si el navegador no tiene WebGL?
Se muestra una copa dibujada en SVG sobre el mismo degradado cálido y el vino sube igualmente con el scroll, con el medidor funcionando.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13629 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2463 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
