Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Una sección de portfolio en negro, blanco y un único color vivo. Al cargar, nueve portadas giran despacio en anillo alrededor de un titular enorme; al pasar el puntero por una, se ilumina con un borde de acento y aparece su nombre. El primer scroll, clic o tecla las lanza a un tambor vertical con unos 40° entre tarjetas, perspectiva fuerte y un arco que se curva hacia la izquierda. Todo depende de un único valor de giro suavizado que siempre se asienta en una obra entera. A la izquierda, el título del proyecto entra letra a letra con su ficha y un botón; a la derecha, un índice navegable. El scroll es el nativo de la página (escena sticky), con arrastre de ratón y teclado como extras. Encaja en estudios de arquitectura, interiorismo, fotografía, producto y portfolios creativos. Cambia el acento a rojo, naranja o azul eléctrico sin tocar nada más.

Prompt
≈12.580 tokens · con Lite
Librerías
ninguna
Demo
28,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
  • Ciudad
  • Email de contacto
  • Color de fondo
  • Color del texto
  • Color de acento (el color 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
5.892 palabras · ≈12.580 tokens
Lite
1.721 palabras · ≈2.808 tokens
Librerías
ninguna
Peso de la demo
28,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

5.892 palabras en el Completo y 1.721 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 #ff3b1f»
    • «Cambia las nueve obras por proyectos de una agencia de viajes»
    • «Que el anillo gire más rápido y las tarjetas sean más grandes»
    • «Pasa el fondo a blanco con texto negro»
  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 cambio las imágenes de las obras?
Edita el array OBRAS del script: cada elemento lleva el archivo de la imagen, el título, el tipo, el lugar, el año y el texto. Las imágenes se recortan a 3:4 con object-fit, así que valen fotos verticales u horizontales.
¿Puedo tener más o menos de nueve obras?
Sí. El número se deduce de la longitud del array, pero conviene ajustar el ángulo entre tarjetas (360 dividido entre el número de obras) y la altura de la pista para que cada paso de scroll siga siendo cómodo.
¿Secuestra la rueda del ratón?
No. El scroll es el nativo de la página: la escena está fijada con position sticky dentro de una pista alta y el valor de giro se calcula a partir de la posición de scroll, así que funciona igual en táctil y dentro de un iframe.
¿Qué pasa con movimiento reducido?
La sección arranca ya abierta, sin el anillo giratorio, sin suavizado ni animaciones de texto. El scroll sigue moviendo las obras y asentándose en cada una.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈12580 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2808 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.