Concept snapshot
Record date: May 19, 2026. Technology and screenshots describe the prototype as documented on this date. Any performance observations belong to the same point-in-time record. No current client deployment is implied.
Veloce is a high-end, single-page immersive landing page designed for the luxury automotive rental industry. Every interaction is intentional, from the cinematic page loader to the horizontal-scroll fleet gallery and parallax-driven storytelling. The experience treats the user like a member of an exclusive club, not a casual browser.
Built without frameworks, the site relies on vanilla CSS and JavaScript to deliver scroll-scrubbed animations, pinned sections, and a custom cursor, demonstrating that world-class motion design doesn't require heavy libraries.
Live Demo: https://veloce.apalaugonzalez.com/
- Split-panel reveal animation: a thin line grows from center, splits into a rectangular frame, and "opens" to unveil the hero
- Total loader duration: ~1.8s with precise easing curves
- Brand mark fades in as the curtain lifts
Horizontal Scroll Fleet Gallery
- Section hijacks vertical scroll into a horizontal gallery experience (desktop)
- Left panel pins with section title, description, and live counter ("01 / 08")
- Eight vehicle cards with studio-portrait photography, gradient overlays, and live specs
- Cards enter with subtle skewX that straightens as they reach viewport center
- Images parallax slightly faster than card frames for depth
- Counter updates with a slot-machine roll effect
- Mobile: swipeable snap-carousel with momentum and spring-back
Deep Parallax Experience Section
- Full-bleed aerial background parallaxes at 0.3x scroll speed
- Three floating feature panels move at different speeds (0.8x, 1.0x, 1.2x) creating physical depth separation
- Panels fade and rise from 80px as they enter viewport
- Mobile: parallax reduced 50%, background static below 768px
Sticky How-It-Works Steps
- 300vh scroll container with three 100vh sticky steps
- Left image crossfades between reserve, delivery, and drive visuals
- Progress line grows with scroll; active step number fills from outline to solid
- Mobile: single column flow with horizontal progress bar
Data Reveal & Testimonials
- Stat numbers count up from zero on viewport entry with power2.out easing
- Infinite marquee of fleet names at 80px height
- Featured quote with word-by-word scroll-scrubbed reveal
- Default cursor hidden; 32px Champagne ring follows with 0.12s lag
- Scales to 56px on interactive hover; becomes "EXPLORE" label on fleet cards
- Palette: Obsidian (#050505), Charcoal (#0F0F0F), Champagne (#C9A96E), Ivory (#F5F0E8)
- Typography: Inter (Display + Body) + JetBrains Mono (labels, specs, micro-copy)
- No border radius except pill CTAs; no box shadows, depth from layering and light
- Vignette overlays and cinematic gradients for text legibility
- Vanilla CSS + JavaScript, no framework dependencies for maximum performance control
- IntersectionObserver for triggering state changes; scroll position drives all major animations
- will-change: transform on parallax layers for GPU acceleration
- prefers-reduced-motion respected: disables parallax, count-up, and infinite marquees
- Mobile-first gestures: swipe inertia, tap-active states, rubber-band resistance, bottom-safe padding
- Image optimization: All 14 assets delivered as WebP, 89% smaller than originals
Veloce demonstrates the ability to craft luxury brand experiences from design spec to production, where motion, typography, and negative space work together to sell a feeling before a transaction. It serves as a portfolio showcase for high-end landing pages in automotive, hospitality, and private-membership industries.
View Project
