Skip to content

README.md

Latest commit

 

History

History
126 lines (95 loc) · 5.2 KB

README.md

File metadata and controls

126 lines (95 loc) · 5.2 KB

🏎️ Velocity Drive X (UDX-GT)

image

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.

Live Demo Three.js Next.js


🚀 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