# PROMPT: Landing page de venta de perfumes con 3D, stop mot...

Prompt

# PROMPT: Landing page de venta de perfumes con 3D, stop motion y animaciones ## 1. ROL Y OBJETIVO Actúa como un equipo senior formado por un diseñador UI/UX, un desarrollador front-end creativo (WebGL/Three.js) y un copywriter de lujo. Crea una landing page de ventas de perfumes que sea visualmente espectacular, rápida, responsiva y orientada a la conversión. El resultado debe sentirse como la web de una marca de perfumería de nicho de alta gama. ## 2. CONCEPTO DE MARCA - No uses perfumes reales ni marcas existentes. Inventa una marca ficticia (por ejemplo "MAISON AURA") y una colección de 6 fragancias genéricas, cada una con nombre inventado y una familia olfativa: Cítrica, Floral, Amaderada, Oriental/Ámbar, Fresca/Acuática y Gourmand. - Tono: elegante, sensorial, aspiracional y cercano. - Idioma de la web: español. - Público: hombres y mujeres de 20 a 50 años que compran perfumes online o buscan regalos. ## 3. STACK TÉCNICO - HTML5, CSS3 y JavaScript ES6+ en un solo archivo (o carpeta mínima) listo para abrir en el navegador. - Three.js para el modelo 3D, con OrbitControls o una implementación propia de arrastre. - GSAP + ScrollTrigger para las animaciones al hacer scroll, y Lenis para el scroll suave. - Cargar librerías solo desde CDN confiables (cdnjs o jsdelivr), con versiones fijas. - Sin imágenes externas obligatorias: usar SVG, gradientes, CSS y geometría 3D procedural para que todo funcione sin archivos adicionales. ## 4. SISTEMA DE DISEÑO - Paleta: fondo negro profundo (#0B0B0D), marfil (#F5EFE6), dorado champán (#C9A96E) como acento y un color de acento dinámico que cambia según la fragancia seleccionada. - Tipografías (Google Fonts): una serif elegante para títulos (Cormorant Garamond o Playfair Display) y una sans limpia para texto (Inter o DM Sans), con fallbacks. - Espaciado generoso, grid de 12 columnas, bordes finos, efectos de vidrio (glassmorphism) sutiles y grano de película ligero. - Modo oscuro por defecto, con tokens de color en variables CSS. - Cursor personalizado con efecto magnético en botones. ## 5. MODELO 3D DEL PERFUME (elemento estrella) Construye un frasco de perfume 3D procedural con Three.js: - **Geometría:** cuerpo rectangular de vidrio con bordes biselados, base gruesa de cristal, tapa metálica dorada, cuello, atomizador y etiqueta con el nombre de la marca. - **Materiales:** MeshPhysicalMaterial con transmission, ior (~1.5), thickness, roughness bajo y clearcoat para el vidrio; líquido interior con color y refracción; metal dorado con metalness alto. - **Iluminación:** entorno HDRI procedural o luces de estudio (key, fill, rim), sombras suaves de contacto y reflejos realistas. - **Interacción:** - Rotación 360° arrastrando con mouse o dedo, con inercia suave. - Rotación automática lenta cuando el usuario no interactúa. - Zoom limitado con rueda o pellizco. - Botones para cambiar de fragancia, con transición animada de color del líquido, etiqueta y tema de la sección. - Botón "Ver tapa / Ver base / Vista completa" que mueve la cámara con animación fluida. - **Hotspots descriptivos:** 3 a 4 puntos interactivos sobre el modelo (tapa, líquido, cuello, base). Al tocarlos, la cámara se acerca y aparece una tarjeta con la descripción (material, capacidad, tipo de atomizador, notas). - **Partículas:** burbujas o polvo dorado flotando alrededor del frasco, y una nube de aroma animada al presionar el atomizador. - **Rendimiento:** devicePixelRatio limitado a 2, pausar el render cuando el canvas no esté visible (IntersectionObserver), y un fallback con imagen SVG o animación CSS en dispositivos sin WebGL. ## 6. STOP MOTION Incluye el efecto stop motion en al menos dos apartados: - **Hero:** el frasco se "arma" cuadro a cuadro (la base aparece, luego el líquido sube, después la tapa cae y por último brilla), con una cadencia de 8 a 12 fps usando animación `steps()` o un canvas que reproduce una secuencia de frames generados por código. - **Sección de proceso:** una secuencia que se reproduce según el scroll (scroll-scrubbing), mostrando la creación del perfume: recolección de ingredientes, destilación, mezcla, maduración y embotellado. Cada paso se dibuja con ilustraciones SVG que "saltan" entre poses como en un stop motion artesanal. - Estética: movimientos ligeramente irregulares, texturas de papel recortado y un pequeño temblor entre cuadros para dar sensación artesanal. ## 7. ESTRUCTURA DE SECCIONES (con animaciones y especificaciones) **7.1 Preloader** - Logo que se dibuja con trazo SVG, contador de carga 0–100% y revelado tipo cortina hacia el hero. **7.2 Header / Navegación** - Barra fija transparente que se vuelve vidrio al hacer scroll. - Enlaces con subrayado animado, icono de carrito con contador animado y menú hamburguesa a pantalla completa en móvil. - Se oculta al bajar y reaparece al subir. **7.3 Hero** - Título grande con revelado por palabras o letras, subtítulo y dos CTA ("Descubrir colección" y "Ver ofertas"). - Modelo 3D central con stop motion de entrada y rotación, texto con parallax y un indicador de scroll animado. - Insignias de confianza: envío gratis, 100% original, devolución en 30 días. **7.4 Banda deslizante (marquee)** - Texto infinito con beneficios y palabras clave, en dos filas con direcciones opuestas. **7.5 Colección de fragancias** - Grid de 6 tarjetas con mini frasco 3D o SVG, nombre, familia olfativa, notas principales, precio, valoración por estrellas y botón "Añadir al carrito". - Animaciones: aparición escalonada al hacer scroll, inclinación 3D (tilt) al pasar el cursor y cambio de fondo según la familia. - Filtros animados por familia olfativa, género, intensidad y precio, con ordenamiento. - Chips de estado: "Más vendido", "Nuevo", "Edición limitada". **7.6 Explorador 3D (visor interactivo)** - Pantalla dividida: el visor 3D grande a un lado y a su lado el panel con: - Nombre y descripción emocional de la fragancia. - Pirámide olfativa animada (notas de salida, corazón y fondo) que se despliega capa por capa. - Barras animadas de longevidad, proyección e intensidad. - Mejor ocasión, estación y hora del día (iconos animados). - Selector de tamaño (30 ml, 50 ml, 100 ml), que cambia el tamaño del frasco 3D en tiempo real y actualiza el precio. - La sección se queda fija (pin) mientras el scroll cambia de fragancia. **7.7 Ingredientes y notas** - Ilustraciones SVG animadas de cada ingrediente (bergamota, jazmín, sándalo, vainilla, ámbar, etc.) que florecen o rotan al aparecer. - Tarjetas con origen, textura del aroma y sensación que evoca. **7.8 Proceso artesanal (stop motion con scroll)** - Línea de tiempo vertical con 5 pasos, cada uno con su animación stop motion y su texto descriptivo, más contador de estadísticas ("+200 ingredientes", "12 meses de maduración"). **7.9 Encuentra tu fragancia (quiz interactivo)** - Test de 3 a 4 preguntas con botones grandes y transiciones suaves (¿qué ambiente prefieres?, ¿para qué ocasión?, ¿qué aromas te gustan?). - Resultado con la fragancia recomendada, el frasco 3D girando y botón de compra directa. **7.10 Comparador y guía de tamaños** - Tabla comparativa animada entre 2 o 3 fragancias (notas, duración, estación, precio) y guía visual de tamaños con frascos a escala. **7.11 Sets de regalo** - Tarjetas de cofres con animación de apertura (tapa que se levanta) y opción de grabado o mensaje personalizado. **7.12 Oferta especial** - Contador regresivo animado, precio tachado con porcentaje de descuento y botón con pulso sutil. - Barra de stock limitado ("Quedan 12 unidades") con progreso animado. **7.13 Testimonios y prueba social** - Carrusel con tarjetas de clientes, estrellas animadas, sello de "compra verificada" y contadores de reseñas y satisfacción. **7.14 Garantías y beneficios** - Iconos animados con línea: envío rápido, autenticidad, empaque de regalo, muestras gratis, pago seguro y soporte por WhatsApp. **7.15 Preguntas frecuentes (FAQ)** - Acordeón con animación suave de apertura, sobre durabilidad, autenticidad, cambios y devoluciones, tiempos de envío y conservación del perfume. **7.16 Newsletter / CTA final** - Fondo con humo o partículas doradas, campo de email con validación animada y mensaje de éxito, más un incentivo ("10% en tu primera compra"). **7.17 Footer** - Logo, navegación, redes sociales con hover animado, métodos de pago, políticas, datos de contacto y botón "volver arriba" con progreso circular de scroll. ## 8. E-COMMERCE Y CONVERSIÓN - Carrito lateral (drawer) funcional con JavaScript: añadir, quitar, cambiar cantidad, subtotal y barra de progreso hacia envío gratis. - Botón flotante de WhatsApp para compra rápida. - Microinteracciones al añadir al carrito (el frasco "vuela" hacia el icono). - Toasts de confirmación y notificaciones tipo "Alguien en Santo Domingo acaba de comprar…". - Múltiples CTA coherentes a lo largo de la página. ## 9. ANIMACIONES GLOBALES - Scroll suave, revelado de texto, parallax por capas, barra de progreso de scroll y transiciones entre secciones. - Hover con elevación, brillo y magnetismo en botones. - Duraciones entre 0.4 y 1.2 s, con easings suaves (power3.out, expo.out). - Respetar `prefers-reduced-motion`: desactivar parallax, rotación automática y stop motion, dejando contenido estático equivalente. ## 10. RENDIMIENTO, ACCESIBILIDAD Y SEO - Objetivo de Lighthouse: 90+ en Rendimiento, Accesibilidad, Buenas prácticas y SEO. - HTML semántico, atributos ARIA, navegación por teclado con foco visible, contraste AA y texto alternativo. - Meta tags, Open Graph, favicon, etiquetas de título y descripción optimizadas y datos estructurados (schema.org Product). - Carga diferida (lazy) de la escena 3D, código limpio, comentado y organizado por secciones. ## 11. RESPONSIVE - Diseño mobile-first con puntos de quiebre en 480, 768, 1024 y 1440 px. - En móvil: 3D simplificado (menos partículas y sombras más ligeras), gestos táctiles, menú a pantalla completa y botones grandes. ## 12. ENTREGABLE - Un archivo `index.html` autocontenido (CSS y JS incluidos) que funcione al abrirlo, con comentarios por sección y variables fáciles de editar (nombre de marca, colores, precios, fragancias). - Al final, explica brevemente cómo personalizar las fragancias, los colores y el modelo 3D.

A system prompt was added to support web rendering