Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Un fragmento de obsidiana de 26 caras flota sobre un agua negra y quieta. Sus grietas brillan por dentro como lava, laten despacio y se reflejan temblando en el agua, mientras siete esquirlas orbitan a su alrededor y suben brasas. Todo es raymarching en un único shader WebGL, sin modelos ni texturas: facetas con reflejos nítidos, grietas de Voronoi en dos escalas, agua con fresnel, anillos y charco de luz. Cada pocos segundos un pulso de energía recorre las grietas y abre una ola en el agua; también se lanza con clic, toque o un botón, y el puntero inclina la cámara. Encaja como hero de estudios creativos, marcas de tecnología, joyería o eventos nocturnos, o como fondo de una sección de manifiesto. Trae tres paletas: Magma, Glaciar y Amatista.
Encaja bien en webs de
- Prompt
- ≈10.955 tokens · con Lite
- Librerías
- ninguna
- Demo
- 24,9 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
- Subtítulo
- Color de las grietas
- Color del núcleo de las grietas
Í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.822 palabras · ≈10.955 tokens
- Lite
- 1.219 palabras · ≈2.248 tokens
- Librerías
- ninguna
- Peso de la demo
- 24,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.822 palabras en el Completo y 1.219 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 la roca más redonda, con 40 caras»
- «Que las grietas sean verde ácido con el núcleo casi blanco»
- «Lanza el pulso automático cada 5 segundos»
- «Quita las esquirlas y deja solo la roca y el agua»
- «Pon el titular centrado y más grande»
- 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
¿Necesita three.js o algún modelo 3D?
No. Es un único fragment shader de WebGL 1 con raymarching: la roca, las grietas, el agua y las brasas se calculan por píxel, sin librerías, mallas ni texturas.
¿Va bien en portátiles modestos y en móvil?
Renderiza a resolución interna reducida, con tope de píxeles y calidad adaptativa que baja sola si cae de 45 fps. Se pausa fuera de pantalla y con la pestaña oculta.
¿Puedo usarlo de fondo de un hero con mi texto?
Sí. Borra el titular y los controles o sustitúyelos por tu contenido; el velo oscuro de arriba y abajo mantiene el texto legible.
¿Cómo cambio la forma de la roca?
Cambia la semilla o los parámetros de planos(): número de caras, semiejes, jitter y variación. El prompt explica qué hace cada uno.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈10955 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2248 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
