Plantilla de tienda de moda: Try the Look

Nuevo

Tienda

Seis looks en una pasarela que puedes arrastrar. Explora las prendas, elige tallas y añade conjuntos a la bolsa de compra.

Finalidad: Tienda online (ecommerce) · Catálogo de productos · Experiencia editorial
Sector: Marcas
Estructura: Una página

Empieza con Try the Look — Pasarela de moda interactiva. Es gratis.

Crea tu cuenta y accede al diseño, su prompt y los archivos incluidos.

Obtener gratis Ya tengo cuenta

Te pediremos confirmar tu correo con un enlace.

El video es una vista previa. La demo interactiva se abre con tu cuenta gratuita.

El carrito no incluye cobros, pedidos ni cuentas: conecta tu propia pasarela de pago.

Qué hace especial

Carrito
Carrusel
Fichas modales

Pasarela circular con profundidad: arrastre con inercia y snap al look, flechas y teclado (GSAP Draggable + InertiaPlugin)
Intro editorial una vez por sesión, interrumpible
Al elegir un look, el mismo modelo se desplaza y entra el panel de prendas
Transición de miniatura a foto de la prenda (GSAP Flip) y zoom
Clips de modelos con transparencia (VP9 y HEVC) sobre póster de respaldo
Pausa de vídeos fuera de escena, con la pestaña oculta o con el control de pausa
prefers-reduced-motion respetado

Qué incluye

Prompt para recrear y personalizar el diseño con IA.
Código y archivos del sitio: imágenes, fuentes y licencias.
Demo interactiva e instrucciones.
Uso en sitios propios y proyectos finales de clientes.

Secciones y pantallas de la demo (8)

Barra superior: marca, Runway / Concept y bolsa
Titular editorial y texto breve
Pasarela circular de seis looks con controles, contador y nombre del look
Panel del look: tres prendas, puntos interactivos, precios, total y favorito
Detalle de prenda con foto, zoom y selección de talla
Guía de tallas
Bolsa de compra con cantidades, eliminar y deshacer
Concept (ventana con la idea de la colección)

Qué puedes personalizar

Nombre y logo
Textos de la pasarela, el panel y la bolsa
Catálogo: looks, prendas, precios de ejemplo y tallas
Imágenes de prendas, clips y pósters de los modelos
Posiciones de los puntos sobre cada look
Tokens de color y tipografías

Cómo empezar

Copia el prompt y descarga los archivos.
Llévalos a tu herramienta de IA y pide los cambios: marca, textos e imágenes.
Revisa el resultado y publícalo en tu dominio.

Descarga el paquete y copia el prompt: tu herramienta de IA trabaja sobre sitio/ (README con instalación y dónde personalizar). `npm ci`, `npm run dev` y `npm run build` ejecutan el sitio original con sus vídeos, fotos y tipografías. Cambia marca, catálogo, textos y medios sin tocar la pasarela. La bolsa no cobra ni gestiona pedidos hasta que conectes tu pasarela de pago.

El resultado depende de tu herramienta de IA y de los cambios que hagas. La demo muestra la dirección visual.

Detalles técnicos y requisitos

Requisitos

Node.js 20.19 o superior y npm para ejecutar el proyecto (TanStack Start + Vite); un hosting con Node o Vercel para publicarlo.
Navegador moderno: Safari reproduce los clips HEVC con alfa y Chrome, Edge y Firefox los VP9; si no, se muestra el póster.
No incluye pagos, stock, envíos ni prueba de ropa sobre la foto del visitante: precios en USD y tallas son de ejemplo y el checkout está desactivado.
El clip del look 06 tiene menor resolución y los clips se reproducen hacia delante y hacia atrás (no son bucles perfectos).
No incluido: herramienta de IA (y sus créditos), dominio y hosting.

Tecnologías

React
Vite
TypeScript
GSAP

Implementadas en el paquete que descargas.

React 19 · TanStack Start / Router · Vite 8 · TypeScript · GSAP 3 (Draggable, InertiaPlugin, Flip) · Radix UI · Nitro (renderizado en servidor) · Vídeo con alfa: WebM VP9 y MOV HEVC

Herramientas de IA sugeridas

ClaudeCodexCursor

Compatibles con las instrucciones del diseño; no es una prueba registrada.

Compatibilidad probada: Sin prueba registrada todavía.

Paleta y tipografía

#ffffff#181715#3b3936#6e6a64#e8e5e0#f6f5f2

Bodoni Moda Variable (titulares)
Geist Variable (interfaz)

Composición: Escritorio 1440 · móvil por debajo de 820 px con panel inferior · clips y pósters 720 × 1274

Licencia y versiones

Úsalo en sitios propios y en proyectos finales de clientes, incluido uso comercial. No revendas ni redistribuyas el prompt, los archivos ni el sitio como plantilla. Leer la licencia

Procedencia: Paquete v1.0.0: código y assets del sitio original aprobado (commit 0ecc60d): React, TanStack Start, GSAP, clips con transparencia (WebM VP9 y MOV HEVC), pósters, fotos de producto, logo e iconos; tipografías Bodoni Moda y Geist (OFL) por npm. Avisos en LICENCIAS-Y-AVISOS.md.

Versión: v1.0.0 · Publicado 4 nov 2026