Saltar al contenido
motionframe

Buscar piezas

Categorías

La pieza

Qué hace y dónde encaja

Landing Signature para un atelier ficticio de carrés de seda de 90 × 90. El hero es un pañuelo simulado en three.js (Verlet de 64 × 64, viento con ruido, brillo de sarga con sheen y anisotropía) que cuelga de un hilo de oro; se agarra con el cursor o el dedo y cada clic cambia la lacería (seis diseños procedurales en GLSL) con un sangrado de tinta desde el punto del clic. Al bajar, la seda se aplana en un marco y se imprime pantalla a pantalla (12) mientras la lacería se construye a compás en SVG y el acento almagra inunda la escena; siguen la colección con seis carrés pintados en canvas que se levantan del papel, tres bodegones renderizados en Blender con parallax por mapa de profundidad, cinco nudos dibujados, el loop macro del roulotté, el plegado en cuatro de la seda hasta su caja (GLB con Draco) y una marquesina de estampados. Usa recursos propios servidos desde Motionframe (renders, profundidad, HDRI, mapa de normales, GLB y vídeo); cada uno va por URL absoluta en el prompt y puede sustituirse por los del cliente cambiando esa URL, siempre que mantenga el formato y las proporciones indicadas en la tabla «Recursos». Encaja en moda, complementos, artesanía textil, interiorismo y cualquier marca con un producto que se toca.

Prompt
≈31.048 tokens · con Lite
Librerías
three · gsap · lenis
Demo
78,8 KB · medio
Prueba en frío
9,7/10 · 30-09-2026

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
  • Ciudad
  • Barrio o zona del taller
  • Teléfono
  • Teléfono para el enlace tel: (sin espacios)
  • Email de contacto
  • Dirección del taller
  • Titular del hero, primera parte
  • Titular del hero, segunda parte
  • Acento (almagra)
  • Índigo (trazos y fondo oscuro)
  • Oro viejo (hilo y detalles)
  • Marfil de fondo
  • Negro 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. 03Recursos
  4. 04Tokens de diseño
  5. 05Estructura y contenido
  6. 06Hoja de estilos completa
  7. 07Movimiento
  8. 08Mapa de escenas
  9. 09Código clave
  10. 10Interacción
  11. 11Adaptación a móvil y tablet
  12. 12Accesibilidad y movimiento reducido
  13. 13Rendimiento
  14. 14Personalización
  15. 15Comprobación final
Completo
14.602 palabras · ≈31.048 tokens
Lite
2.155 palabras · ≈3.728 tokens
Librerías
three 0.186.1 · gsap 3.15.0 · lenis 1.3.26
Peso de la demo
78,8 KB (medio)
Resolución máxima (DPR)
2
Se pausa fuera de pantalla
sí
Respeta «menos movimiento»
sí
Alternativa sin WebGL
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

14.602 palabras en el Completo y 2.155 en el Lite. El prompt real solo sale del servidor cuando tienes acceso.

Prueba en frío

Lo que salió al pegarlo en frío

Pegamos el prompt en Claude Sonnet 5.5, sin ayuda ni contexto, y comparamos el resultado con la demo. Prueba hecha el 30-09-2026.

Lo que generó la IA con el prompt Completo de Almagra · Carrés de seda con física real
Prompt CompletoFiel a la demo9,7/10

Sale igual que la demo en escritorio y en móvil: la seda con física, las 12 pantallas, el plegado dentro de la caja y la marquesina. El código coincide con el original salvo una línea de la descripción.

Lo que generó la IA con el prompt Lite de Almagra · Carrés de seda con física real
Prompt LiteAceptable6,6/10

El hero, la impresión en 12 pantallas, la colección, los bodegones y el pie quedan muy cerca del original. El packaging falla: la caja no carga y sale un bloque liso, y la seda flota arriba y tapa la cabecera y el titular.

Solo publicamos lo que hemos probado. Otras herramientas (ChatGPT, Gemini, Lovable…) pueden dar resultados distintos.

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 los seis nombres de estampado y sus precios por los de tu colección»
    • «Que la seda cuelgue más quieta: menos viento y más gravedad»
    • «Sustituye los tres bodegones por fotos de producto reales con su mapa de profundidad»
    • «Pasa la paleta a verde botella, crudo y cobre»
    • «Añade un séptimo carré a la colección y a la marquesina»
  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 poner mis propios estampados en vez de la lacería procedural?
Sí. La textura de la seda es un render target; sustitúyelo por una textura cargada con TextureLoader (una imagen cuadrada de 1536 px por estampado) y conserva el sangrado de tinta como mezcla entre la textura anterior y la nueva.
¿Los recursos (renders, HDRI, GLB, vídeo) tengo que descargarlos?
No. El prompt los carga por URL absoluta desde Motionframe con CORS abierto. Si prefieres alojarlos tú, descárgalos y cambia solo la constante ASSETS.
¿Qué pasa en móvil o sin WebGL?
En móvil la malla baja a 40 × 40, la seda se arrastra con el dedo y una ráfaga periódica la levanta si nadie la toca. Sin WebGL se ve el póster AVIF del hero y las tarjetas de la colección siguen pintándose en canvas 2D.
¿La cesta y la calculadora de envío funcionan de verdad?
Son simuladas: la cesta suma unidades y precio en la cabecera y el envío calcula coste y fecha laborable real según el destino. Conecta el botón «Añadir» a tu tienda (Shopify, Stripe…) en el manejador de clic.
¿Qué diferencia hay entre el prompt Completo y el Lite?
El Completo (≈31048 tokens) describe la pieza con todo detalle y es el que mejor resultado da en Claude, ChatGPT, Gemini o Cursor. El Lite (≈3728 tokens) resume lo esencial para herramientas que aceptan menos texto, como Lovable, Bolt o v0.

Versión 1.0 · publicada el 30-09-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.