Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Una sección a pantalla completa en papel y tinta con un solo color vivo. Ocho portadas de libro se reparten sobre un círculo enorme cuyo centro queda fuera de pantalla: la del medio crece, pasa de gris a color y se enmarca con cuatro esquinas de acento, mientras las demás descienden a los lados girando como un abanico. Se gira arrastrando con inercia, con la rueda, con las flechas o tocando una portada, y siempre se asienta en una. Debajo, el nombre en mayúsculas condensadas rueda letra a letra, el contador cambia con él y una regla de marcas se desplaza con el giro. Hay cursor propio, ladeo con brillo según el ratón, botones que se rellenan, avance automático y una ficha que se abre con un círculo de color desde el clic. Encaja en editoriales, estudios, galerías, catálogos de producto y portfolios. Sin librerías; 38 KB de HTML. Tres colores de acento y fondo claro u oscuro.

Prompt
≈15.870 tokens · con Lite
Librerías
ninguna
Demo
38,6 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 editorial o marca
  • Descriptor bajo la marca
  • Nombre de la colección
  • Texto del botón principal
  • Color de fondo
  • Color del texto
  • Color vivo de acento

Í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
8.155 palabras · ≈15.870 tokens
Lite
1.865 palabras · ≈3.108 tokens
Librerías
ninguna
Peso de la demo
38,6 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

8.155 palabras en el Completo y 1.865 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:
    • «Pon el acento en azul eléctrico y el fondo en negro»
    • «Haz el arco más cerrado, con las portadas más juntas»
    • «Quita el avance automático y deja solo el arrastre»
    • «Usa 12 portadas de mi catálogo en lugar de 8»
  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 usar mis propias portadas?
Sí. Sustituye la lista DATA del script con tus archivos (cualquier imagen vertical 3:4 en WebP o AVIF), títulos, subtítulos y datos de la ficha. Funciona con cualquier cantidad de 5 a 12; solo hay que ajustar el contador «/ 08».
¿Cómo se gira en el móvil?
Con el dedo en horizontal sobre el arco; el scroll vertical de la página sigue libre. Además hay flechas, y el avance automático enseña el gesto a quien no lo descubre.
¿Y si el usuario tiene el movimiento reducido?
No hay entrada ni avance automático, el giro es instantáneo, el titular cambia sin rodillo y desaparecen el cursor propio y las inclinaciones. La navegación con flechas, arrastre y teclado sigue funcionando y todo queda legible.
¿Puedo ponerla debajo de otras secciones de mi web?
Sí. Es una sección de 100svh que pausa su bucle cuando sale de pantalla. La rueda vertical pasa una portada por gesto: si la incrustas en una página con scroll, elimina ese listener o ciérralo a la zona del arco.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈15870 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3108 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.