Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Un índice de proyectos, servicios o carta a base de filas enormes en tipografía condensada. Al pasar el puntero por una fila, una tarjeta de imagen en blanco y negro aparece junto al cursor y lo sigue con muelle: se inclina, se estira y desplaza la foto por dentro según la velocidad, con una placa de color vivo que va detrás y llega más tarde. Cada cambio de fila trae su imagen con una cortina vertical que respeta el sentido en que recorres la lista. La fila activa se acentúa: las letras del título suben en cascada al color vivo, se dibuja una línea superior, el número se ilumina y la flecha cambia de sitio con imán hacia el puntero; el resto se atenúa. Con teclado la tarjeta se ancla a la fila enfocada; en móvil la imagen se abre dentro de la fila que cruza el centro de la pantalla. Encaja en estudios, arquitectura, interiorismo, agencias y cartas de autor. El color vivo es una variable.

Prompt
≈11.479 tokens · con Lite
Librerías
ninguna
Demo
23,9 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
  • Título de la lista
  • Email de contacto
  • Color vivo (fila activa, placa y píldoras)
  • Color de fondo
  • Color del texto

Í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.260 palabras · ≈11.479 tokens
Lite
1.483 palabras · ≈2.791 tokens
Librerías
ninguna
Peso de la demo
23,9 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.260 palabras en el Completo y 1.483 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 naranja por azul eléctrico y que la placa de detrás sea más grande»
    • «Haz la tarjeta más grande y que se incline más al moverla rápido»
    • «Sustituye las ocho filas por los servicios de mi negocio con mis propias fotos»
    • «Pasa la página a fondo negro con texto blanco»
  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 filas y las imágenes?
Edita el array OBRAS del script: cada elemento lleva el título, la disciplina, el año, el archivo de la imagen y su descripción. Valen fotos horizontales en proporción 16:10, de unos 800 px de ancho; la tarjeta las recorta con object-fit y las pasa siempre a blanco y negro.
¿Qué pasa en el móvil, donde no hay cursor?
No se muestra la tarjeta flotante. La imagen se despliega dentro de la propia fila, y la fila que cruza el centro de la pantalla se abre sola al hacer scroll; un toque fija otra fila.
¿Se puede usar con el teclado?
Sí. Con Tab llegas a cada fila, que se enciende con un contorno visible; la tarjeta se ancla junto a la fila enfocada y las flechas arriba y abajo, Inicio y Fin recorren la lista.
¿Cómo hago que las filas lleven a páginas reales?
Cambia el href de cada fila por tu ruta y quita el preventDefault del clic en el script. Todo lo demás sigue funcionando igual porque cada fila ya es un enlace.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈11479 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈2791 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.