Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Una pantalla en negro puro con un único rojo vivo. Un botón gigante con forma de corazón, estrella o chispa reacciona al toque: si lo tocas, suelta una ráfaga; si lo mantienes, se aplasta con un muelle, un anillo se completa a su alrededor y las partículas se absorben hacia el centro, para soltar un estallido mayor al levantar el dedo. La explosión se dibuja en un canvas por capas: chispas con rastro, glifos que flotan y giran, dos ondas, rayos y un destello, con un ligero temblor de pantalla. El relleno rojo crece desde el punto exacto del contacto y quitar el me gusta hace el camino inverso. Incluye un contador de rodillos, un selector de forma con pastilla deslizante, tres tarjetas con botones pequeños que usan el mismo motor y un piloto automático que se explica solo. Ideal para redes, apps, tiendas y portfolios; cambia el acento para adaptarla a tu marca.

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

  • Nombre de la marca
  • Primera palabra del titular
  • Segunda palabra del titular
  • Tercera palabra del titular
  • Color del fondo (negro)
  • Color del texto (blanco)
  • Color de acento vivo

Í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
4.199 palabras · ≈13.016 tokens
Lite
1.503 palabras · ≈2.868 tokens
Librerías
ninguna
Peso de la demo
31,3 KB (ligero)
Resolución máxima (DPR)
2
Se pausa fuera de pantalla
sí
Respeta «menos movimiento»
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.199 palabras en el Completo y 1.503 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:
    • «Cambia el rojo por un azul eléctrico»
    • «Que el estallido tenga más partículas y dure más»
    • «Quita las tres tarjetas y deja solo el botón grande»
    • «Añade una cuarta forma con un pulgar hacia arriba»
  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

¿Cómo conecto el botón a mi base de datos o a mi tienda?
Llama a tu función de me gusta dentro de toggle(), que se ejecuta una vez por cada alternancia, y sustituye los contadores de ejemplo (objeto SH y data-n de las tarjetas) por tu propio estado. El motor visual no depende de los datos.
¿Puedo cambiar la forma del corazón por mi logotipo?
Sí. Añade una entrada al objeto SH con el trazo de tu logotipo en un cuadro de 100 por 100, con su etiqueta y su base, y un botón en el selector con data-m. Las partículas con forma, el recorte del relleno y la silueta usan ese mismo trazo.
¿Funciona con el dedo y con teclado?
Sí. Usa Pointer Events con captura, así que mantener y soltar funcionan igual con ratón y con táctil. Con teclado, Espacio o Intro mantenidos cargan y al soltar estallan, y las flechas cambian la forma.
¿Se nota en el rendimiento de la página?
No: el bucle de animación solo corre mientras hay partículas, carga o muelles sin asentar, y se detiene al terminar o si la pieza no está visible. El lienzo limita el DPR a 2 (1,5 en móvil) y las partículas a 900.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13016 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2868 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.