Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Una sección a pantalla completa en blanco y negro con un único color vivo. Ocho obras cuelgan de hilos en un pasillo en perspectiva real: suelo con rejilla que huye al horizonte, barras de luz en el techo y un resplandor de acento al fondo. Cada obra tiene su gemelo volteado bajo el suelo, que se balancea con ella. Se avanza con la rueda (un paso por gesto), arrastrando con inercia o con las flechas: la obra cercana se centra bajo una lámpara de acento y las que pasan salen despedidas hacia su lado. Un clic en la obra activa abre el modo foco, con la cartela desplegada. Incluye contador de cifras que ruedan, botones magnéticos, cursor propio, paralaje con el puntero y avance automático. Encaja en galerías, estudios de arquitectura e interiorismo, portfolios y lanzamientos de producto. Sin librerías: unos 35 KB de HTML.

Prompt
≈15.635 tokens · con Lite
Librerías
ninguna
Demo
34,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 galería o marca
  • Ciudad
  • Título de la sala (texto gigante de fondo)
  • Texto del botón de la cabecera
  • Color de fondo (oscuro)
  • 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.433 palabras · ≈15.635 tokens
Lite
1.632 palabras · ≈2.913 tokens
Librerías
ninguna
Peso de la demo
34,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

8.433 palabras en el Completo y 1.632 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»
    • «Haz que las obras pasen más despacio»
    • «Quita el reflejo del suelo»
    • «Desactiva el avance automático»
  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 obras?
Sí. Cambia la lista de obras del JS: archivo de imagen, título, artista, año, categoría, ficha y descripción. Funciona con cualquier número, aunque con una cantidad par el zigzag cierra mejor el bucle.
¿Funciona en el móvil?
Sí. En pantallas estrechas las obras se agrandan, la cartela pasa arriba de los controles y se navega arrastrando en horizontal o con los botones; el scroll vertical de la página sigue libre.
¿Qué pasa con el movimiento reducido?
Se apagan el balanceo, el latido de la luz, las entradas y el avance automático, y la pieza se queda estática y legible. Sigue siendo navegable con teclado y botones.
¿Puedo ponerla dentro de una página con scroll?
Sí. Es una sección de 100svh que se pausa cuando sale de pantalla. Si no quieres que capture la rueda, pon CAPTURA_RUEDA en false y se navega con arrastre, flechas y botones.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈15635 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2913 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.