Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Un gradiente a pantalla completa con el rigor de un cartel suizo: un campo líquido que se divide en bandas, cada una una rampa de negro a blanco con una franja central de un único color vivo y un corte seco al final. Es un solo shader WebGL2 de menos de 2 KB. El puntero actúa como lente que curva el campo y dibuja anillos concéntricos; cada clic o toque suelta una onda que se expande y se apaga, y en reposo la lente recorre un ocho y lanza ondas sola. Trae tres colores vivos conmutables, Rojo, Azul eléctrico y Verde ácido, con una pestaña que se desliza con muelle, y un control para pasar de 4 a 20 bandas. El texto va sobre placas sólidas para tener contraste siempre. Encaja como portada de estudio, lanzamiento de producto, marca deportiva o separador entre secciones, y sirve de fondo de una sola sección.

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

  • Nombre de la marca (placa superior)
  • Texto junto al nombre
  • Titular, primera línea
  • Titular, segunda línea (sin la palabra de color)
  • Palabra del titular en color vivo
  • Línea bajo el titular
  • Color vivo 1 (Rojo)
  • Color vivo 2 (Azul eléctrico)
  • Color vivo 3 (Verde ácido)

Í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
3.577 palabras · ≈6.693 tokens
Lite
1.058 palabras · ≈1.993 tokens
Librerías
ninguna
Peso de la demo
20 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

3.577 palabras en el Completo y 1.058 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 el color más fino, como un filete entre el negro y el blanco»
    • «Usa solo 5 bandas para un look más gráfico»
    • «Que el campo fluya la mitad de rápido»
    • «Cambia el color vivo a naranja y quita las otras dos paletas»
  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 poner texto encima?
Sí, y es lo que hace la pieza: el texto va sobre placas sólidas negras o blancas, así el contraste es máximo sobre cualquier parte del gradiente. Si prefieres texto suelto, tendrás que dejar una zona fija en negro con un velo dentro del shader.
¿Cómo cambio el color vivo?
Cambia los tres valores color_acento. Elige colores saturados: la franja central de cada banda los muestra puros. Con la anchura de la campana (el .17 de la función ramp) decides cuánto color y cuánto blanco y negro ves.
¿Puedo usarlo como fondo de una sola sección?
Sí. Cambia .escena y .capa de position: fixed a absolute dentro de un contenedor con position: relative y la altura que quieras. El IntersectionObserver ya para el bucle cuando la sección sale de pantalla.
¿Qué pasa en un navegador sin WebGL2?
Se muestra un degradado CSS con corte seco que usa el mismo color vivo, y el selector de color y el resto de la página siguen funcionando. Con movimiento reducido se pinta un único cuadro estático.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈6693 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈1993 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.

Versión 1.0 · publicada el 01-10-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.