🏎️ Velocity Drive X (UDX-GT)

The Legend of Longtail: An Interactive 3D Web Experience. Velocity Drive X is a modern, performance-driven web project built with Next.js, React, TypeScript, and Tailwind CSS. It features a highly interactive 3D showcase of the ultimate evolution of the F1 GTR, combining cutting-edge web technologies with stunning visual design.

🚀 About The Project

Velocity Drive X pushes the boundaries of modern web development by integrating high-fidelity 3D graphics directly into the browser. The repository is structured for scalability, clean architecture, and rapid development, with a strong focus on UI consistency, fluid animations, and production-ready best practices.

Featuring the iconic yellow and green "Sultan" livery of the F1 GTR Longtail, this project serves as a masterclass in combining @react-three/fiber for 3D rendering with framer-motion for seamless DOM animations, all wrapped in a sleek, dark-themed UI.

✨ Key Features

🎮 Interactive 3D Canvas Rendered with Three.js and React Three Fiber. Features user-controlled rotation, dynamic lighting, and detailed model texturing.

⚡ Performance-Driven Built on Next.js 16 and React 19, utilizing the brand-new React Compiler for hyper-optimized rendering and minimal layout shifts.

✨ Fluid Animations Powered by Framer Motion to provide buttery-smooth transitions, text reveals, and UI component interactions.

🛠️ Tech Stack

This project leverages a modern, bleeding-edge tech stack to ensure high performance and incredible visuals:

⚙️ Core Capabilities

• Custom 3D Controls: Integrated UI slider to manually control the precise rotation angle of the 3D vehicle model.
• Responsive Layout: The 3D canvas and overlaying HTML elements are fully responsive, adapting perfectly from desktop to mobile.
• Modern Styling: Utilizes Tailwind CSS v4 alongside clsx and tailwind-merge for clean, conflict-free utility classes.
• Strict Typing: End-to-end TypeScript integration, including @types/three for safe and predictable 3D scene manipulation.

🚀 Getting Started

To get a local development copy of Velocity Drive X up and running, follow these steps.

Prerequisites

• Node.js (v20+ recommended)

Installation

1. Clone the repository

   git clone https://github.com/your-username/velocity-drive-x.git
   cd velocity-drive-x

2. Install dependencies

   npm install
   # or yarn install / pnpm install

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000 to view the 3D experience.

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/Amazing3DFeature)
3. Commit your Changes (git commit -m 'Add some Amazing3DFeature')
4. Push to the Branch (git push origin feature/Amazing3DFeature)
5. Open a Pull Request

---

Engineered with ⚡ by Your Name / Team