AutoPro Garage Documentation

File Structure

The project is organized for maximum clarity and ease of deployment. All files should reside in the same root directory.

Installation & Setup

This is a static website. No build tools, Node.js, or servers are required for local development.

1. Create a new folder on your computer named autopro-garage.
2. Create the 9 HTML files, 1 CSS file, and 1 JS file exactly as named in the File Structure.
3. Copy and paste the provided code into each respective file.
4. Open index.html in any modern web browser (Chrome, Firefox, Safari, Edge).
5. For the best GSAP ScrollTrigger experience, use a local server (like VS Code Live Server extension) to avoid local file path restrictions, though it will work directly via file:// protocol in most modern browsers.

3D Engine Mechanics

The centerpiece of the homepage is the "Exploding Engine". It is not a video or a 3D model file (like GLTF). It is constructed entirely from 8 stacked HTML div elements styled with CSS.

The 8 Layers (Front to Back)

CSS 3D Setup

The parent container uses strict 3D CSS properties to enable the effect:

.engine-container {
    perspective: 1200px;
}
.engine-wrapper {
    transform-style: preserve-3d;
}
.engine-layer {
    transform-style: preserve-3d;
    /* Initial stacked positions handled via translateZ */
}

GSAP Animations Breakdown

All complex animations are managed in script.js using GSAP and ScrollTrigger. The scrubbing effect ties the animation progress directly to the user's scroll position.

Hero Explosion Timeline

let tl = gsap.timeline({
    scrollTrigger: {
        trigger: ".hero-3d-section",
        start: "top top",
        end: "+=300%",
        scrub: 1 // Smooths the scroll linkage
    }
});

// Explode layers outward from center
tl.to(".engine-valve-cover", { z: 300, rotateX: -15, duration: 1 }, 0)
  .to(".engine-camshaft", { x: 250, rotateY: 30, duration: 1 }, 0.1)
  // ... (additional layers)
  .from(".hero-headline", { z: -500, opacity: 0, duration: 1 }, 0.3);

Camera Tunnel Transition

Located below the hero, this effect uses 8 concentric rectangular frames. As the user scrolls, GSAP scales them up and fades their opacity, creating a convincing illusion of flying forward through a corridor into the next section.

Customization Guide

The project is designed to be easily white-labeled or adapted for different shops. All major styling is controlled via CSS Variables at the top of style.css.

Changing Colors

:root {
    --bg-primary: #0F0F14;      /* Main background */
    --accent: #FF6B00;        /* Change this to blue (#007BFF) for a different brand */
    --text-primary: #F5F5F5;  /* Main text color */
}

Updating Shop Information

Search the HTML files for the comment <!-- UPDATE WITH YOUR SHOP NAME -->. The following elements should be updated globally:

• Navbar Logo Text (e.g., "AutoPro Garage")
• Footer Contact Information (Address, Phone, Email)
• Meta Title Tags in the <head> of each HTML file

Modifying the 3D Engine

To change the speed of the explosion, adjust the duration values in the GSAP timeline in script.js. To change the spread distance, modify the x, y, and z pixel values in the same timeline.

Responsive Design Notes

The website is fully responsive, utilizing CSS Grid and Flexbox with specific breakpoints at 992px (tablet) and 768px (mobile).

• Mobile Navigation: Converts to a slide-in drawer from the right side, triggered by a hamburger icon.
• 3D Hero on Mobile: The flex direction changes to column. The 3D engine scales down and moves below the text to ensure readability on small screens.
• Grids: 4-column and 3-column grids gracefully degrade to 2-column and 1-column layouts on smaller viewports.
• Typography: Heading sizes scale down using relative units to prevent text overflow on narrow screens.

Troubleshooting