Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Un toro de plasma suspendido sobre un campo de estrellas, trazado por rayos en un único shader WebGL: núcleo casi blanco con bandas que recorren el anillo, cuatro filamentos eléctricos que giran a su alrededor y a veces saltan fuera, un halo que tiñe el fondo y un disco tenue en su interior. Cada pocos segundos salta una chispa; al acercar el cursor, los rayos salen del punto más cercano del anillo hacia él, y un clic o un toque provoca una descarga con onda de choque. Encaja como fondo de un hero tecnológico, portada de un evento, pantalla de carga o sección de lanzamiento. Trae tres paletas conmutables (Tesla, Solar y Aurora), no usa librerías y pesa unos 22 KB.
Encaja bien en webs de
- Prompt
- ≈9.862 tokens · con Lite
- Librerías
- ninguna
- Demo
- 21,7 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:
- Color del núcleo
- Color de los arcos
- Color del halo
- Titular
Í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.541 palabras · ≈9.862 tokens
- Lite
- 1.322 palabras · ≈1.994 tokens
- Librerías
- ninguna
- Peso de la demo
- 21,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
5.541 palabras en el Completo y 1.322 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 el tubo más grueso y los filamentos más brillantes»
- «Pon el anillo de frente, como un portal»
- «Que las chispas salten el doble de a menudo»
- «Cambia la paleta a violeta y magenta»
- 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 usarlo de fondo detrás de un titular?
Sí. Cambia la escena de position: fixed a absolute dentro de tu sección; el lienzo se adapta solo con ResizeObserver y el halo oscuro deja leer texto blanco encima.
¿Va fluido en portátiles sin tarjeta gráfica?
Limita la resolución a unos 2,2 megapíxeles y baja la calidad sola si el fotograma pasa de 21 ms. Además se pausa cuando no está en pantalla o la pestaña está oculta.
¿Qué pasa en el móvil?
El anillo se ve más abierto para aprovechar el alto, las chispas saltan solas y un toque provoca la descarga. Con movimiento reducido queda un fotograma fijo.
¿Necesita alguna librería?
No. Es WebGL a mano con un único fragment shader; sin WebGL se muestra un anillo en CSS con los mismos colores.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈9862 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈1994 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
