Landing page cinematográfico para Lap Custom (tapizado automotriz de alta gama, Lima). La experiencia abre con un auto 3D matizado que gira con el scroll y luego se enfoca en el interior y el cuero — que es lo que realmente vende Lap Custom — con fotos reales, una transición de zoom al habitáculo, un Estudio de Cuero para elegir el tipo de cuero y ver cómo lucirá, y un detalle de costuras.
Tecnología: HTML/CSS + Three.js (3D) + GSAP ScrollTrigger (scroll).
Todo en un único index.html, sin paso de compilación. Las fotos viven en images/.
- Hero — auto 3D matizado (HDR + luces suaves) con un blur sutil para que funcione como fondo.
- Actos 01–02 — al bajar, la cámara se mete dentro de la cabina (techo abierto) mostrando el interior, con pop-ups (oficio + materiales).
- Transición al interior — zoom cinematográfico a una foto real del habitáculo.
- Estudio de Cuero — selector de tipo de cuero (5 opciones) con foto real + descripción de diferencias.
- Detalle — 3 fotos con zoom agresivo: costura, perforado y diseños personalizados e iluminación.
- Feed de redes — grilla estilo Instagram/Facebook (placeholder, conectar a la cuenta real).
- Beneficios · Contacto · WhatsApp.
⚠️ No la abras con doble clic. Los módulos 3D necesitan servirse por HTTP. Usa un servidor local:
python -m http.server 8123
# Luego abre: http://localhost:8123- Sube el repositorio a GitHub (con
index.htmly la carpetaimages/en la raíz). - Settings → Pages → Source: Deploy from a branch →
main/(root). - En ~1 minuto queda público. GitHub Pages sirve por HTTPS, así que todo funciona sin configuración extra.
| Qué cambiar | Dónde |
|---|---|
| Tipos de cuero (nombre, descripción, foto, color del swatch) | Array LEATHERS en el <script type="module">. |
| Fotos del interior | Carpeta images/. Reemplaza los archivos por fotos reales de Lap Custom manteniendo el nombre, o cambia las rutas. |
| Foto de la transición al interior | <img> dentro de .interior-transition. |
| Fotos del detalle / costuras | <figure class="detail-tile"> en la sección .detail. |
| El auto 3D | Constante del modelo (...ferrari.glb). Reemplaza por tu .glb; conserva los nombres de malla body, glass, rim_* o ajusta setMat(...). |
| Recorrido de cámara / blur | camPath y lookPath (trayectoria al interior) y el blur(...) dentro del onUpdate del #stage. |
| Feed de redes | Array FEED (fotos + likes/comentarios) y los enlaces instagram.com/lapcustom · facebook.com/lapcustom (cambia el handle por el real). |
| Textos / servicios | Secciones .act, .studio, .detail, .benefits. |
| Contacto / WhatsApp / mapa | Sección .contact y los enlaces wa.me/51973375151. |
- Las fotos de
images/son de stock (Pexels, uso libre) usadas como referencia realista. Lo ideal es reemplazarlas por fotos reales de trabajos de Lap Custom para máxima credibilidad. - El auto 3D (modelo Ferrari de ejemplo de Three.js) es un placeholder matizado; sirve de telón de fondo y se puede cambiar por el auto que prefieran.
- El selector del Estudio de Cuero muestra fotos reales por tipo de cuero; cuando Lap Custom tenga fotos de un mismo auto en distintos cueros, el efecto "así lucirá tu auto" será aún más directo.
- El feed de redes es un placeholder con fotos reales. Para mostrar las publicaciones REALES de Instagram/Facebook se conecta la cuenta con un widget (Elfsight / Behold / LightWidget) o el embed oficial de Meta, una vez que tengamos el handle real de Lap Custom.
- El auto 3D va desenfocado a propósito (capa de blur) para que se lea como fondo elegante mientras el protagonismo es el interior y el cuero.
- Pulido de UI/UX aplicado (checklist ui-ux-pro-max): íconos SVG,
cursor-pointer, estados de foco para teclado (:focus-visible) y respeto deprefers-reduced-motion.