Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Una esfera de brasas hecha con 90.000 puntos en WebGL respira sobre un negro cinematográfico: late, ondula y tiene el borde encendido como un volumen de verdad. Cada diez segundos la corteza se desprende por zonas, como papel que arde, y las partículas se abren en una tormenta inclinada que gira como un ciclón, con brazos más brillantes y un viento que las arrastra; después recorren el camino de vuelta y la esfera se recompone. El cursor sopla sobre ella y enciende las partículas que toca, y un clic, un toque o la barra espaciadora la hacen estallar. Encaja como cabecera de una web oscura, separador de sección, fondo de un lanzamiento o pantalla de un evento. Trae tres paletas conmutables (Brasa, Granate y Ceniza), versión para móvil, modo de movimiento reducido y fallback sin WebGL.
Encaja bien en webs de
- Prompt
- ≈11.228 tokens · con Lite
- Librerías
- ninguna
- Demo
- 22,2 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
- Segunda línea del titular (acento)
- Color del núcleo y el resplandor
- Color medio de la esfera
- Color de las chispas y el acento del titular
- Color de fondo
Í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.328 palabras · ≈11.228 tokens
- Lite
- 1.257 palabras · ≈2.229 tokens
- Librerías
- ninguna
- Peso de la demo
- 22,2 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.328 palabras en el Completo y 1.257 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:- «Que la tormenta dure más antes de volver a formarse»
- «Hazla azul eléctrico: núcleo #0a1a4a, brasa #2f6bff y chispa #bfe3ff»
- «Quita el titular y los controles para usarla de fondo»
- «Que el cursor sople con más fuerza y en un radio mayor»
- 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 alguna librería o archivo externo?
No. Es WebGL puro con dos shaders y unas matrices escritas a mano; solo carga dos tipografías de Google Fonts. No hay imágenes, modelos ni texturas.
¿Va bien en móvil?
Sí. En pantallas táctiles o pequeñas usa 42.000 partículas y limita la resolución a 1,5×; la esfera sube para dejar sitio al titular y el dedo sopla al arrastrar o la hace estallar al tocar.
¿Puedo ponerla detrás de mi propio contenido?
Sí. Elimina el bloque del titular y la barra de estado, deja el canvas a pantalla completa y coloca tu contenido encima; conviene un velo oscuro bajo el texto durante la fase de tormenta.
¿Qué ve alguien sin WebGL o con movimiento reducido?
Sin WebGL se muestra un degradado radial con los mismos colores de la paleta. Con movimiento reducido se dibuja un único fotograma fijo de la esfera y las paletas siguen funcionando.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈11228 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2229 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
