Gota de aceite
GratisFluidos · three.js
La pieza
Qué hace y dónde encaja
Un túnel de estrellas en espiral que viaja hacia ti a pantalla completa. Cada estrella es una estela con cabeza incandescente y cola que se apaga; el vórtice gira sobre sí mismo y se tuerce con la profundidad, y cada pocos metros te atraviesa un anillo de luz discontinuo que ondula. Al fondo brilla un núcleo y las paredes del túnel son una nebulosa tenue que corre a la misma velocidad que las estrellas. El puntero curva el túnel y alabea la cámara; manteniendo pulsado (ratón, dedo o barra espaciadora) saltas a la velocidad de la luz: las estelas se alargan, el campo de visión se abre y el núcleo se enciende. Encaja como portada de estudios creativos, lanzamientos tecnológicos, eventos o páginas de espera. Tres paletas: Hielo, Brasa y Aurora.
Encaja bien en webs de
- Prompt
- ≈10.400 tokens · con Lite
- Librerías
- ninguna
- Demo
- 22,3 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 fondo
- Color de las estrellas
- Color de los anillos
- Color del núcleo
- Color de acento
- Titular (antes de la palabra destacada)
- Palabra destacada (color de acento)
- Titular (después de la palabra destacada)
- Texto del botón de salto
Í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.905 palabras · ≈10.400 tokens
- Lite
- 1.105 palabras · ≈1.953 tokens
- Librerías
- ninguna
- Peso de la demo
- 22,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
4.905 palabras en el Completo y 1.105 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 túnel más estrecho y con más torsión»
- «Quita los anillos y deja solo las estrellas»
- «Que el salto a la velocidad de la luz dure más y sea más violento»
- «Pon la paleta Brasa por defecto y cambia el titular»
- 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 como fondo de un hero con mi propio texto?
Sí. El lienzo es fijo y a sangre; pon tu contenido encima con position: relative y z-index. El velo inferior ya oscurece la zona del titular para que el texto blanco cumpla contraste.
¿Va fluido en móvil?
Sí: en móvil baja a 9.000 estrellas y DPR 1,5, descarta en el vértice las estelas invisibles y se pausa cuando sale de pantalla o la pestaña se oculta.
¿Cómo quito el salto automático?
Borra el bloque del modo escaparate en el bucle (el que lanza un pulso de 1,1 s tras 6 s sin interacción). El salto con pulsación sostenida sigue funcionando.
¿Necesita three.js?
No. Es WebGL2 a mano con dos programas: un fondo a pantalla completa y las estelas instanciadas. Sin librerías ni recursos externos salvo las fuentes.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈10400 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈1953 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.
Versión 1.0 · publicada el 30-09-2026
