Saltar al contenido
motionframe
motionframe

Biblioteca

Entrar

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Landing minimalista para marcas de ropa urbana, streetwear y tiendas de producto, en negro, blanco y un único rojo vivo, sin pasteles, cursivas ni manuscritas. El hero muestra «Sin medias tintas.» a toda anchura en una grotesca condensada; una lente circular sigue al cursor con inercia e invierte los colores de lo que cubre, las letras se estiran al pasar cerca y, al mantener pulsado, se invierte la pantalla entera. Siguen una cinta roja que corre y se inclina con el scroll, un manifiesto que se enciende palabra a palabra, cuatro tarjetas de producto apiladas con un comparador arrastrable de la prenda en negro y en blanco, un lookbook que se tiñe de rojo, cifras con rodillos y un cierre con botón magnético, bolsa con contador y copiar con check dibujado. Cambia el rojo por naranja, azul eléctrico, amarillo o verde ácido.

Prompt
≈22.254 tokens · con Lite
Librerías
gsap · lenis
Demo
59,1 KB · medio
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 marca
  • Color vivo
  • Email
  • Teléfono
  • Código de bienvenida
  • Precio de la sudadera (€)
  • Precio de la camiseta (€)
  • Precio del pantalón cargo (€)
  • Precio de la gorra (€)

Í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
6.646 palabras · ≈22.254 tokens
Lite
1.762 palabras · ≈3.278 tokens
Librerías
gsap 3.15.0 · lenis 1.3.26
Peso de la demo
59,1 KB (medio)
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

6.646 palabras en el Completo y 1.762 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 rojo por un azul eléctrico y pon el texto grande sobre él en blanco»
    • «Haz la lente más grande y que no vague sola cuando el ratón está quieto»
    • «Añade una quinta prenda a la pila de tarjetas con su propio dibujo»
    • «Sustituye las tres imágenes del lookbook por mis fotos en formato vertical»
  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

¿Funciona sin ratón, en móvil o tablet?
Sí. La lente vaga sola y sigue al dedo mientras tocas (mantener pulsado invierte toda la pantalla), el comparador se arrastra con el dedo o con las flechas del teclado, la cinta y los rodillos van solos y el menú se abre con una máscara circular.
¿Puedo usar otro color vivo?
Sí, cambia la variable --rojo y el color de las etiquetas rojas dentro de los símbolos SVG de las prendas. Rojo, naranja y azul eléctrico admiten texto grande en blanco; con amarillo o verde ácido pasa el texto sobre el color a negro. Evita los pasteles: rompen el contraste.
¿Cómo pongo mis propias prendas y fotos?
Cada tarjeta usa un símbolo SVG (g-hoodie, g-tee, g-cargo, g-cap); dibuja otro en un viewBox de 400×400 con relleno currentColor y trazos var(--det). Las fotos del lookbook salen del banco compartido: sustituye la constante BANCO por tu carpeta y usa imágenes verticales 3:4.
¿Qué pasa con el movimiento reducido?
No se usan Lenis ni ScrollTrigger: no hay entrada animada, ni cinta en movimiento. La lente queda fija en diagonal con su aro, el manifiesto se ve entero, las cifras muestran su valor final y el comparador sigue funcionando sin la pista inicial.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈22254 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3278 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.

Versión 1.0 · publicada el 01-10-2026

Otras plantillas

Todas las plantillas

Combina bien con esta pieza

Más para tu sectorToda la biblioteca

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.