<aside> 🏎️

VELOCITY is a cinematic automotive landing-page experiment built around full-screen media, smooth scrolling, layered content, and high-performance scroll choreography.

</aside>

1. Project overview

Velocity was built as frontend practice for combining premium automotive presentation with media-heavy scrollytelling.

The project is not a complete vehicle marketplace or inventory backend. Its focus is the interaction/presentation architecture: a persistent cinematic video environment, foreground editorial sections, responsive gallery behavior, and synchronized smooth scrolling.

Stack: React, TypeScript, Vite, Tailwind CSS, GSAP, Lenis, Vercel.

2. Experience objective

The page aims to make a private car collection feel cinematic rather than catalog-like.

The core visual principles are:

• full-screen moving media;
• deep dark surfaces;
• restrained gold/silver accents;
• large editorial vehicle names;
• technical specification typography;
• continuous visual motion between sections.

3. Layered architecture

flowchart TD
    VIDEO["Fixed cinematic media layer"] --> VIEWPORT["Viewport"]
    CONTENT["Foreground scroll layer"] --> VIEWPORT
    CONTENT --> HERO["Hero"]
    CONTENT --> MARQUEE["Marquee"]
    CONTENT --> SPECS["Specifications"]
    CONTENT --> GALLERY["Pinned / horizontal gallery"]
    SCROLL["Lenis scroll"] --> GSAP["GSAP ScrollTrigger"]
    GSAP --> VIDEO
    GSAP --> HERO
    GSAP --> MARQUEE
    GSAP --> SPECS
    GSAP --> GALLERY

The fixed media layer and foreground content are separate. This lets the video environment persist while the page narrative moves over it.

4. Fixed video background

A viewport-sized background media layer provides continuity between sections.