Registro del concepto
Fecha del registro: 19 de mayo de 2026. La tecnología y las capturas describen el prototipo según quedó documentado en esta fecha. Cualquier observación de rendimiento corresponde al mismo registro puntual. No se implica que exista una implementación actual para un cliente.
Veloce es una landing page inmersiva de alta gama de una sola página diseñada para la industria de alquiler de autos de lujo. Cada interacción es intencional, desde el page loader cinematográfico hasta la galería de flota de scroll horizontal y el storytelling impulsado por parallax. La experiencia trata al usuario como miembro de un club exclusivo, no como un navegante casual.
Construido sin frameworks, el sitio se apoya en CSS y JavaScript vanilla para entregar animaciones scroll-scrubbed, secciones fijadas y un cursor personalizado, demostrando que el diseño de motion de clase mundial no requiere bibliotecas pesadas.
Demo en Vivo: https://veloce.apalaugonzalez.com/
Características Principales
Page Loader Cinematográfico
- Animación de revelado con paneles divididos: una línea delgada crece desde el centro, se divide en un marco rectangular y se "abre" para develar el héroe
- Duración total del loader: ~1.8s con curvas de easing precisas
- La marca de la marca se desvanece mientras el telón se levanta
Galería de Flota de Scroll Horizontal
- La sección secuestra el scroll vertical en una experiencia de galería horizontal (desktop)
- El panel izquierdo se fija con título de sección, descripción y contador en vivo ("01 / 08")
- Ocho tarjetas de vehículos con fotografía de estudio, overlays de gradiente y especificaciones en vivo
- Las tarjetas entran con sutil skewX que se endereza al alcanzar el centro del viewport
- Las imágenes hacen parallax ligeramente más rápido que los marcos de tarjeta para profundidad
- El contador se actualiza con un efecto de roll de máquina tragamonedas
- Móvil: carrusel snap deslizable con momentum y spring-back
Sección de Experiencia de Parallax Profundo
- Fondo aéreo de pantalla completa hace parallax a velocidad de scroll 0.3x
- Tres paneles de características flotantes se mueven a diferentes velocidades (0.8x, 1.0x, 1.2x) creando separación física de profundidad
- Los paneles se desvanecen y ascienden desde 80px al entrar en el viewport
- Móvil: parallax reducido 50%, fondo estático por debajo de 768px
Pasos Sticky de Cómo Funciona
- Contenedor de scroll de 300vh con tres pasos sticky de 100vh
- La imagen izquierda hace crossfade entre visuales de reservar, entregar y conducir
- La línea de progreso crece con el scroll; el número de paso activo se rellena desde outline hasta sólido
- Móvil: flujo de columna única con barra de progreso horizontal
Revelado de Datos y Testimonios
- Los números de estadísticas cuentan hacia arriba desde cero al entrar en el viewport con easing power2.out
- Marquee infinito de nombres de flota a 80px de altura
- Cita destacada con revelado palabra por palabra scrubbed por scroll
Cursor Personalizado (Desktop)
- Cursor por defecto oculto; anillo Champagne de 32px sigue con lag de 0.12s
- Escala a 56px en hover interactivo; se convierte en etiqueta "EXPLORE" en tarjetas de flota
- Paleta: Obsidiana (#050505), Carbón (#0F0F0F), Champagne (#C9A96E), Marfil (#F5F0E8)
- Tipografía: Inter (Display + Cuerpo) + JetBrains Mono (labels, specs, micro-copy)
- Sin border radius excepto CTAs píldora; sin box shadows, la profundidad proviene de layering y luz
- Overlays de viñeta y gradientes cinematográficos para legibilidad de texto
Aspectos Técnicos Destacados
- Vanilla CSS + JavaScript, sin dependencias de frameworks para máximo control de rendimiento
- IntersectionObserver para disparar cambios de estado; la posición de scroll impulsa todas las animaciones principales
- will-change: transform en capas de parallax para aceleración GPU
- prefers-reduced-motion respetado: desactiva parallax, count-up y marquees infinitos
- Gestos mobile-first: inercia de swipe, estados tap-active, resistencia rubber-band, padding bottom-safe
- Optimización de imágenes: Los 14 assets entregados como WebP, 89% más pequeños que los originales
Veloce demuestra la capacidad de crear experiencias de marca de lujo desde especificación de diseño hasta producción, donde motion, tipografía y espacio negativo trabajan juntos para vender una sensación antes de una transacción. Sirve como showcase de portfolio para landing pages de alta gama en industrias automotriz, hospitalidad y de membresías privadas.
Ver Proyecto
