Concesionario y Alquiler de Autos
Experiencia web de alta gama para el sector automotriz. OBSIDIAN es un concesionario de superdeportivos con un showroom 3D donde el cliente gira el auto, cambia el color de la pintura y consulta las especificaciones; y su versión de rent a car de lujo presenta la flota con un hero en video a pantalla completa. Construido con Next.js 16, React Three Fiber, Tailwind CSS v4 y Motion.
Showroom 3D
Three.js en el navegador
Características Principales
Lo que hace que el cliente se quede mirando el auto
Hero 3D Interactivo
Un Ferrari 458 sobre piso reflectante con iluminación de estudio; la cámara responde al movimiento del mouse y al scroll con parallax.
Configurador de Pintura
Showroom con Ferrari 458 Italia, Lamborghini Urus y Porsche 911 Carrera 4S que se pueden girar y repintar en vivo con los colores oficiales de cada marca.
Fichas Técnicas
Potencia, 0–100 km/h, velocidad máxima, motor y precio de cada modelo, todo leído desde una sola fuente de datos tipada.
Inventario Filtrable
Cuadrícula editorial del inventario con filtros por categoría para encontrar rápido el tipo de auto que busca el cliente.
Rent a Car con Video
Landing de alquiler de autos de lujo con video a pantalla completa que se mantiene reproduciendo aunque el navegador lo pause o cambie de pestaña.
Visita Privada
Formulario para agendar una visita al showroom, más secciones de atelier y servicios con contadores animados e imágenes en parallax.
Stack Tecnológico
Gráficos 3D en tiempo real y un frontend moderno
Desafíos y Soluciones
Problemas técnicos resueltos durante el desarrollo
Modelos 3D Pesados
Los modelos de autos con todo su detalle pesaban demasiado para cargar rápido en una página web, sobre todo en móvil.
Tres Modelos, Tres Orientaciones
Cada modelo venía de un autor distinto, con su escala y su rotación propias, y no quedaban alineados en el showroom.
Cambiar el Color sin Romper el Auto
Repintar el modelo afectaba también vidrios, llantas y partes cromadas.
Video de Fondo que se Detiene
Los navegadores pausan los videos de fondo al cambiar de pestaña o al ahorrar batería, y el hero quedaba congelado.
Código Fuente
Explora mis proyectos en GitHub. Este incluye las escenas 3D, el modelo de datos de los autos y las secciones del sitio.
¿Tienes un concesionario o un rent a car?
Puedo crear la página web de tu negocio automotriz con showroom 3D, inventario y reservas