Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Una sección fija a pantalla completa en blanco y negro con un único color vivo. Ocho tarjetas de papel con su foto se apilan como un mazo: al hacer scroll, la de arriba se eleva un instante, cae con la aceleración de un objeto real girando sobre sí misma y sale por abajo, mientras las de atrás avanzan, se enderezan, se encienden y pasan de gris a color. Un muelle suaviza todo y el movimiento es reversible. A la izquierda rueda un índice numerado gigante con el título de cada obra; a la derecha, una lista que se subraya. La tarjeta activa se inclina con el cursor, trae brillo, cursor propio y asentado en tarjeta entera. Incluye tres acentos (azul eléctrico, rojo, lima), modo claro y rejilla estática con movimiento reducido. Sin librerías: 31 KB de HTML. Encaja en portafolios, catálogos, estudios de diseño y arquitectura.

Prompt
≈13.432 tokens · con Lite
Librerías
ninguna
Demo
30,2 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 del estudio o marca
  • Titular de la sección
  • Rótulo del periodo (cabecera)
  • Texto del botón y del cursor
  • Texto en la última tarjeta
  • Color del negro
  • Color del papel
  • 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
7.224 palabras · ≈13.432 tokens
Lite
1.804 palabras · ≈3.175 tokens
Librerías
ninguna
Peso de la demo
30,2 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

7.224 palabras en el Completo y 1.804 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 rojo y el fondo en blanco»
    • «Haz que la caída sea más lenta y con más rebote»
    • «Deja solo cinco tarjetas en el mazo»
    • «Quita el índice de la derecha y deja solo el número gigante»
  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 fotos?
Sí. Edita la lista OBRAS del script: archivo de foto sin extensión, título, categoría, año y texto alternativo. Funcionan mejor fotos verticales 3:4; con otras proporciones se recortan para llenar el marco.
¿Cómo cambio el número de tarjetas?
Cambia la lista OBRAS, los textos «/08» e «Índice (08)», el número de elementos .snap y el alto de la pista (100svh más el paso por N − 1). El resto del cálculo sale del número de elementos.
¿Funciona en móvil?
Sí. El scroll vertical es nativo y, al parar, la pila se asienta en una tarjeta entera; el índice se convierte en ocho marcas junto al botón y un toque en la tarjeta activa avanza. No hay inclinación ni cursor propio en táctil.
¿Y si el usuario tiene el movimiento reducido?
No se ejecuta ningún bucle: las ocho tarjetas se muestran como una rejilla estática con su numeración y título, el titular se ve grande y se ocultan el número gigante, el índice y los botones de avance.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈13432 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3175 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.