🚗 Car Scroll Reveal Animation

A high-performance, interactive landing page built with Next.js. This project features a scroll-linked animation where a top-down car drives across the screen, dynamically revealing text using CSS masking and hardware-accelerated animations.

✨ Features

• Scroll-Linked Animation: Custom React hook utilizing requestAnimationFrame for buttery-smooth, 60fps scroll tracking without overloading the browser.
• Dynamic CSS Masking: Uses CSS variables (--progress and --reveal-x) combined with clip-path: inset() to perfectly sync the text reveal with the car's position.
• Staggered Elements: Stat cards use CSS clamp() to fade in and float up sequentially based on scroll depth.
• Fully Responsive: Built with viewport units (vw, vh) to ensure the track and animations scale perfectly across different screen sizes.

🛠️ Tech Stack

• Framework: Next.js (React)
• Styling: Native CSS (focusing on CSS Variables and custom animations)
• Assets: Optimized locally using Next.js <Image /> component.

🚀 Getting Started

To run this project locally on your machine:

1. Clone the repository:

   git clone [https://github.com/python8790-web/car-animation.git](https://github.com/python8790-web/car-animation.git)

Navigate to the project directory:

Bash cd car-animation Install the dependencies:

Bash npm install Run the development server:

Bash npm run dev Open your browser: Navigate to http://localhost:3000 to see the animation in action.

💡 Technical Implementation Details Instead of relying on heavy third-party animation libraries, this project calculates the scroll progress natively. The React component listens to the window's scroll event inside a passive event listener, calculates a normalized progress value (0 to 1), and passes that data to the DOM via a single CSS variable (--progress). The CSS stylesheet handles all the heavy lifting for the visual transformations, ensuring maximum performance.