Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Un lazo cerrado de vidrio con sección plana y cantos redondeados se retuerce tres medias vueltas y gira despacio en un estudio en penumbra. El material usa transmisión real, dispersión cromática, iridiscencia de película fina y barniz: refracta y parte en colores las tres cuchillas de luz del fondo y refleja un estudio invisible más brillante. La torsión respira, el ancho late y la sección rueda sobre sí misma; el puntero inclina la pieza y el arrastre la hace girar con inercia. Trae tres paletas conmutables (Boreal, Ámbar y Glaciar) y una interfaz mínima con titular en grotesca. Encaja como cabecera de estudios creativos, marcas de producto, joyería, arquitectura o tecnología, y como pieza protagonista de una sección de manifiesto.
Encaja bien en webs de
- Prompt
- ≈9.926 tokens · con Lite
- Librerías
- three
- Demo
- 24 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:
- Nombre de la marca
- Ciudad
- Titular: inicio
- Titular: palabra destacada (acento)
- Titular: segunda línea
- Color de fondo
- Luz principal
- Luz secundaria
Í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.629 palabras · ≈9.926 tokens
- Lite
- 1.143 palabras · ≈2.004 tokens
- Librerías
- three 0.186.1
- Peso de la demo
- 24 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.629 palabras en el Completo y 1.143 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:- «Conviértela en una banda de Möbius con una sola media vuelta»
- «Haz el vidrio esmerilado y sin arcoíris»
- «Cambia las luces a dorado y blanco cálido»
- «Que gire el doble de rápido y reaccione más al ratón»
- 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 usarla como cabecera con mi propio texto?
Sí. El titular, la marca y la ciudad son variables; la cinta se queda centrada y el velo inferior oscurece la zona del texto para que se lea bien.
¿Va fluida en móvil?
Sí. En táctil baja a 360 anillos, limita el DPR a 1,5, inclina la cinta de forma automática y para el bucle cuando sale de pantalla.
¿Qué pasa si el navegador no tiene WebGL?
Se muestra un degradado CSS con los mismos colores de la paleta y la interfaz sigue intacta.
¿Puedo cambiar la forma de la cinta?
Sí: el número de medias vueltas, el ancho, el grosor y los coeficientes de la curva están en constantes al principio del código; cualquier número entero de medias vueltas cierra sin costura.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈9926 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2004 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
