Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Una nebulosa de emisión volumétrica hecha con raymarching en WebGL 2: cada píxel atraviesa la nube en 56 pasos, acumula la luz del gas ionizado y la sombra de las vetas de polvo. Una estrella dentro de la nube ilumina las paredes de su burbuja con un tono frío y casi blanco, mientras los bordes caen al rojo del hidrógeno y después a negro. Cinco estrellas con rayos de difracción viven en 3D y se reproyectan al orbitar, y el campo de estrellas del fondo se atenúa detrás del gas. La cámara orbita sola y el cursor (o el dedo) la inclina; la acumulación temporal limpia el ruido y la resolución se adapta para mantener 60 fps. Trae tres paletas conmutables (Hidrógeno, Carina y Boreal) y un titular mínimo que se puede quitar. Encaja como portada de estudios creativos, productoras, marcas tecnológicas, eventos o lanzamientos que quieran escala y silencio.

Prompt
≈10.908 tokens · con Lite
Librerías
ninguna
Demo
22,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:

  • Antetítulo
  • Titular
  • Subtítulo
  • Color del gas caliente (bordes)
  • Color del gas interior
  • Color de la luz estelar

Índice del prompt

Qué hay dentro del prompt

Qué trae el prompt, por apartados

  1. 01Qué es
  2. 02Librerías y esqueleto
  3. 03Tokens de diseño
  4. 04Estructura y contenido
  5. 05Movimiento
  6. 06Código clave
  7. 07Interacción
  8. 08Adaptación a móvil y tablet
  9. 09Accesibilidad y movimiento reducido
  10. 10Rendimiento
  11. 11Personalización
  12. 12Comprobación final
Completo
5.290 palabras · ≈10.908 tokens
Lite
1.272 palabras · ≈2.214 tokens
Librerías
ninguna
Peso de la demo
22,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.290 palabras en el Completo y 1.272 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

  1. 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.
  2. 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.
  3. 03

    Pega e itera

    Pégalo en una conversación nueva. Si quieres cambiar algo, pídelo con una frase corta:
    • «Haz la nube más alta que ancha, como una columna»
    • «Que haya más vetas de polvo oscuro delante del gas»
    • «Quita el titular y deja solo la escena»
    • «Que la cámara orbite más despacio»
    • «Cambia la paleta principal a dorado y azul»
  4. 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.

Guías por herramientaClaudeChatGPTGeminiCursorLovableBoltv0

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 de fondo detrás de mi contenido?
Sí. Borra el bloque del titular y el selector, deja el velo inferior para el contraste y pon tu contenido encima con position: relative. El bucle se pausa solo cuando la escena sale de pantalla.
¿Va bien en móviles y portátiles modestos?
Calcula la nube a resolución reducida, con menos pasos en móvil, y ajusta la escala cada 45 fotogramas para mantener 60 fps. Sin WebGL 2 muestra un degradado con los mismos colores.
¿Cómo pongo los colores de mi marca?
Cambia los tres colores de la primera paleta (gas caliente, gas interior y luz estelar). Las otras dos paletas se editan en el mismo array y en la muestra de su botón.
¿Necesita alguna librería o imagen?
No. Es WebGL 2 a mano en un único HTML de unos 23 KB; el ruido 3D se genera al cargar y no hay texturas ni vídeos externos.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈10908 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2214 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.

Versión 1.0 · publicada el 30-09-2026

Cópialo desde aquí

Tu navegador no nos deja escribir en el portapapeles. El texto ya está seleccionado: pulsa Ctrl + C (o ⌘ + C) o el botón.