FixLab. A scroll-driven 3D repair shop website.

Overview

FixLab is a nine-page website for a fictional mobile phone repair shop. It is designed to feel like an award-winning editorial experience - the kind you see on Apple product pages or Awwwards Site of the Year winners. The site is entirely static, with no build step, no framework, and no backend.

Design philosophy

• No glassmorphism. No frosted glass. No backdrop-filter blurs. Solid backgrounds only.
• No text gradients. Every headline uses a single solid color.
• No generic AI look. Hand-crafted, editorial, technical.
• No external media. Every visual is pure CSS or inline SVG. The phone illustration is built from six separate CSS layers that disassemble in 3D space.
• No em dashes. Hyphens and commas only.

What you get

Tech stack

The project uses a minimal, dependency-light stack. Everything loads via CDN. No build step required.

File structure

The project is flat. All files live in a single folder. No subfolders, no build tools.

Installation

There is no installation. Clone or download the folder, then open index.html in a browser. That is it.

Option 1: Direct open

# Double-click index.html, or:
open index.html

Option 2: Local server (recommended)

Some browsers restrict certain features (like fonts and ES modules) when opened via file://. A local server avoids this.

# Python 3
python -m http.server 8000

# Node.js (npx)
npx serve

# PHP
php -S localhost:8000

Then visit http://localhost:8000.

Option 3: Deploy

Upload all files to any static host: Netlify, Vercel, GitHub Pages, Cloudflare Pages, or a plain Apache/Nginx server. No build step. No environment variables. No configuration.

Colors

The palette is light, warm, and technical. It avoids the cold sterility of pure white and the visual noise of gradients. Every color has a clear role.

Usage rules

• --bg is the default page background. Used on most sections.
• --bg-alt is used to create subtle section separation (stats, why-us, certs).
• --dark is used for high-contrast sections (tunnel, process, CTA, footer).
• --accent is the primary action color. Buttons, icons, links on hover.
• --accent-2 is the darker accent, used for text highlights and the "accent" span class.
• --amber is reserved for warnings, "most popular" badges, and the emergency hotline.

Typography

Two typefaces. That is it. They pair cleanly and cover every use case.

Type scale

h1: clamp(2.4rem, 5vw, 4.2rem)   /* hero headlines */
h2: clamp(1.8rem, 3.5vw, 2.8rem) /* section titles */
h3: clamp(1.2rem, 2vw, 1.5rem)   /* card titles */
h4: 1.05rem                       /* small headings */
body: 1rem / 1.6 line-height
small: 0.85rem - 0.9rem

All headings use letter-spacing: -0.02em for a tighter, more editorial feel. Body text uses the default tracking.

Spacing & layout

Spacing is consistent and based on an 8px grid. Sections use generous vertical padding (100-140px) to create breathing room.

Responsive breakpoints

Desktop:  > 992px   /* full layout, 3D effects at full intensity */
Tablet:   768-992px /* stacked hero, reduced 3D */
Mobile:   < 768px   /* single column, 3D scaled to 50% */
Small:    < 480px   /* compact stats, stacked buttons */

Components

Every reusable UI element is defined once in style.css and used across all pages.

Buttons

Four button variants, all pill-shaped with smooth hover transitions.

Cards

Three card styles, all with white backgrounds, subtle borders, and hover lift effects.

• Service cards (.service-card) - 3D rotation reveal on scroll
• Feature cards (.why-card, .guarantee-card) - simple lift on hover
• Gallery cards (.gallery-card) - before/after comparison

Forms

Inputs use rounded corners, subtle borders, and a teal focus ring. Validation states use red borders and inline error messages.

Eyebrow

The small uppercase label above every section title. Uses .eyebrow class with Space Grotesk, 0.85rem, 0.12em letter-spacing, teal color.

The phone rig Core feature

The centerpiece of the site is a fully CSS-drawn smartphone that disassembles in 3D space as the user scrolls. It is built from six separate layers, each a .phone-layer div positioned absolutely inside a .phone-rig container with transform-style: preserve-3d.

Layer structure

HTML structure

<div class="phone-stage">
  <div class="phone-rig">
    <div class="phone-layer layer-frame">...</div>
    <div class="phone-layer layer-back">...</div>
    <div class="phone-layer layer-board">...</div>
    <div class="phone-layer layer-battery">...</div>
    <div class="phone-layer layer-camera">...</div>
    <div class="phone-layer layer-screen">...</div>
  </div>
  <div class="phone-labels">...</div>
</div>

Each layer contains

• Screen: notch, status bar, 8 app icons (each a different gradient), home indicator
• Camera: three lenses with radial gradients, a flash with warm glow
• Battery: teal top stripe, "Li-Ion 5000" label, plus/minus terminals
• Motherboard: green PCB with grid pattern, A17 chip, smaller ICs, gold traces, capacitors
• Back glass: dark gradient with subtle "FixLab" watermark
• Frame: dark titanium gradient, volume/power buttons, speaker grille

Explosion sequence GSAP

The explosion is a single GSAP timeline pinned to the hero section. As the user scrolls, the timeline scrubs forward, moving each layer to its exploded position.

Timeline phases

Layer destinations

// Screen
translateZ: 200px, rotateX: -15deg

// Battery
x: 300px, rotateY: 45deg

// Motherboard
x: -250px, rotateZ: 20deg

// Camera
y: -100px, translateZ: -150px

// Back glass
y: 200px, rotateX: 30deg

// Frame
scale: 0.9, opacity: 0.7

ScrollTrigger config

ScrollTrigger: {
  trigger: heroSection,
  start: 'top top',
  end: '+=2200',      // 2200px of scroll
  pin: true,
  scrub: 1,            // 1 second smooth scrub
  anticipatePin: 1     // prevents jitter on desktop
}

Mobile fallback

On screens narrower than 768px, all translateZ values are multiplied by 0.5 to reduce the 3D intensity and improve performance. The rig also uses gentler rotations (4deg X, -10deg Y instead of 8deg and -18deg).

Tunnel transition

After the phone explodes, the viewport appears to fly forward through the scattered parts into the next section. This is achieved in two ways:

1. Rig scale-up: In the final phase of the explosion timeline, the rig scales from 1.05 to 3, creating the illusion of the camera rushing forward.
2. Tunnel rings: Three concentric circles (.tunnel-ring) scale up and fade in as the user scrolls through the tunnel section, reinforcing the sense of forward motion.

// Tunnel rings animation
gsap.fromTo(ring,
  { scale: 0.3, opacity: 0 },
  {
    scale: 1.5 + i * 0.3,
    opacity: 0.6,
    scrollTrigger: {
      trigger: tunnel,
      start: 'top bottom',
      end: 'bottom top',
      scrub: 1
    }
  }
);

Reassembly (CTA section)

In the final section, a smaller version of the phone reassembles itself as the user scrolls into view. This mirrors the explosion and brings the experience full circle.

How it works

1. On page load, each layer is set to its exploded position using gsap.set().
2. A ScrollTrigger watches the CTA section.
3. When triggered, a single gsap.to() animates all layers back to x: 0, y: 0, translateZ: 0, rotateX: 0, scale: 1, opacity: 1 with a 0.1s stagger.

All 9 pages

1. index.html Homepage

The full 3D scroll experience. Seven sections: Hero (explosion), Tunnel, Services (3D cards), Stats (parallax counters), Process (horizontal scroll), Testimonials (3D carousel), CTA (reassembly). Includes sticky navbar and full footer.

2. services.html

Detailed breakdown of all 10 repair services. Each service has an icon, description, price, time estimate, and "Book this service" button. Ends with a 5-question FAQ.

3. pricing.html

Transparent pricing organized by brand (iPhone, Samsung, Pixel, OnePlus, Other). Tab switcher reveals the relevant table. Each row shows service, price range, time, and a "Book" button. Includes three guarantee cards (price match, no fix no fee, 12-month warranty).

4. about.html

Shop story with CSS-drawn workshop illustration. "Why FixLab" section with six feature cards. Team section with four CSS avatar circles. Certifications grid. Company timeline from 2016 to 2026.

5. contact.html

Two-column layout. Left: full booking form with validation. Right: shop info, CSS-drawn map placeholder with animated pin, social links. Emergency hotline banner in amber.

6. track-repair.html

Ticket number input. On submit (try FL-12345), a status timeline animates in showing five stages: Received, Diagnosing, Repairing, Quality Check, Ready. Includes animated progress bar and ETA.

7. gallery.html

Before/after comparison cards. Each card shows a CSS-drawn phone in "broken" and "fixed" states. Filter buttons let users view by repair type (screen, battery, water, back, camera). Each card includes a customer testimonial.

8. faq.html

Searchable FAQ with six categories (General, Screen, Battery, Water Damage, Warranty, Pricing). Accordion uses GSAP for smooth height animation. Search filters questions in real time.

9. 404.html

Creative error page with CSS-drawn broken phone illustration (with flying shards). Large "404" in teal. Search bar and two CTAs. Animates in on load.

Shared elements

Every page shares the same navbar and footer for consistency.

Navbar

• Fixed to top, 76px tall
• Transparent on load, gains shadow and border on scroll (via .scrolled class)
• CSS-drawn logo: phone icon + wrench dot + "FixLab" text
• Eight nav links with active state
• "Book Repair" CTA button
• Mobile: hamburger menu that opens a slide-in drawer from the right

Footer

• Dark background (navy), four-column layout
• Column 1: Logo, about text, social icons
• Column 2: Quick links
• Column 3: Services
• Column 4: Contact info (address, phone, email, hours)
• Bottom bar: copyright with dynamic year, privacy/terms links, back-to-top button

CSS architecture

The single style.css file is organized into 26 clearly commented sections. No preprocessor, no modules, no build step.

Section breakdown

Naming conventions

• BEM-lite: .block-element (e.g., .svc-icon, .tcard-quote)
• Modifiers: .is-active, .is-open, .has-error
• JS hooks: IDs for JS targets (#phoneRig, #carousel), classes for styling
• Utility classes: .accent, .eyebrow, .lead

JavaScript architecture

The single script.js file is organized into 24 numbered sections. No modules, no classes, no framework. Plain functions and event listeners.

Section breakdown

GSAP configuration

Every scroll-linked animation uses the same core pattern. Understanding this pattern is the key to modifying the site.

Standard ScrollTrigger pattern

gsap.to(element, {
  /* animation properties */
  scrollTrigger: {
    trigger: '.section',    /* what element triggers it */
    start: 'top 80%',        /* when to start */
    end: 'bottom 20%',       /* when to end */
    scrub: 1,                /* smooth scroll sync */
    pin: false,              /* pin the trigger? */
    markers: false           /* debug markers (turn on to debug) */
  }
});

Start/end syntax

Pin configuration

Used on the hero and process sections. Pins the element in place while the animation plays.

scrollTrigger: {
  trigger: heroSection,
  start: 'top top',
  end: '+=2200',
  pin: true,
  scrub: 1,
  anticipatePin: 1  // critical for smooth pinning
}

Debugging

To see exactly when each animation starts and ends, set markers: true on any ScrollTrigger. This draws colored lines on the page showing the start and end positions. Remember to turn it off before shipping.

Customization guide

The site is designed to be easy to rebrand. Here are the most common changes.

Change the shop name

Search for FixLab across all HTML files and replace with your name. The logo text is in the navbar and footer. The logo mark (the CSS-drawn phone + wrench) can be replaced with your own SVG.

Change the colors

All colors are CSS variables at the top of style.css. Change them once, and the whole site updates.

:root {
  --bg: #FAFAF8;        /* page background */
  --ink: #1A1A2E;       /* primary text */
  --accent: #00B4D8;    /* primary accent */
  --accent-2: #0096C7;  /* deeper accent */
  --amber: #F77F00;     /* warning / CTA */
}

Change contact details

Search for these HTML comments in the HTML files:

• <!-- UPDATE SHOP DESCRIPTION -->
• <!-- UPDATE ADDRESS -->
• <!-- UPDATE PHONE -->
• <!-- UPDATE EMAIL -->
• <!-- UPDATE EMERGENCY PHONE -->

Change the phone illustration

The phone is built from six layers. Each layer is a .phone-layer div. You can:

• Change colors by editing the CSS for each layer
• Change the size by editing width and height on .phone-layer
• Change the exploded positions by editing the GSAP timeline in script.js section 7
• Replace the entire phone with your own SVG by replacing the contents of .phone-rig

Add a new service

1. Add a new <article class="service-card card-3d"> in index.html section 3
2. Add a new <article class="svc-detail"> in services.html
3. Add a new row to the relevant pricing tables in pricing.html
4. The scroll animations will apply automatically (they target all .card-3d elements)

Change the scroll distance

The hero explosion uses end: '+=2200'. This means the animation plays over 2200px of scroll. Increase this number for a slower, more dramatic explosion. Decrease it for a faster one.

Performance

The site is designed to be fast. No images, no videos, no heavy libraries. The total payload is under 200KB (gzipped).

Optimizations applied

• will-change applied only to animated elements (not globally)
• transform-style: preserve-3d only on the rig, not on every element
• Mobile fallback: 3D translateZ values halved on mobile
• Font preconnect: <link rel="preconnect"> for Google Fonts
• CDN loading: GSAP, Bootstrap, FontAwesome all load from fast CDNs
• No images: Zero image requests. Every visual is CSS.
• Passive scroll listeners: { passive: true } on scroll handlers

Lighthouse targets

Accessibility

The site follows WCAG 2.1 AA guidelines where possible.

Implemented

• Semantic HTML: <nav>, <main>, <section>, <article>, <aside>, <footer>
• ARIA labels: on icon-only buttons, social links, logo
• ARIA expanded: on FAQ accordion and mobile menu
• Keyboard navigation: all interactive elements are focusable
• Focus styles: visible focus rings on inputs and buttons
• Color contrast: all text meets 4.5:1 minimum ratio
• Reduced motion: prefers-reduced-motion slows the timeline and disables scrub
• Form labels: every input has a visible label
• Error messages: inline, associated with inputs

Known limitations

• The 3D phone is decorative. Screen readers will not describe it (it has no alt text, as it is CSS, not an image). Consider adding a visually-hidden description if the phone conveys meaning.
• The horizontal scroll section may be confusing for keyboard-only users. Consider adding a skip link or alternative navigation.

Browser support

The site works in all modern browsers. IE is not supported.

Required features

• CSS custom properties (variables)
• CSS 3D transforms (perspective, preserve-3d, translateZ)
• CSS Grid and Flexbox
• CSS clamp()
• JavaScript ES6+ (arrow functions, template literals, const/let)
• GSAP 3 (requires modern browser)

Deployment

The site is fully static. Deploy it anywhere.

Netlify

# Drag and drop the folder into netlify.com/drop
# Or connect a Git repo for auto-deploys

Vercel

npm i -g vercel
vercel

GitHub Pages

# Push to a repo, enable Pages in settings
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main

Cloudflare Pages

Connect your Git repo in the Cloudflare dashboard. No build command needed.

Any static host

Upload all files via FTP, S3, or any other method. No server-side code required.

Troubleshooting

The phone does not animate

• Check that GSAP and ScrollTrigger are loading (open DevTools console, type gsap)
• Check that the script.js file is loaded after the HTML
• Check the browser console for errors
• Make sure you are not opening the file via file:// (use a local server)

Animations feel janky

• Add will-change: transform to the animated elements (already done)
• Reduce the number of 3D layers
• On mobile, the 3D values are already halved. If still janky, disable the tunnel transition
• Check that no other JS is fighting with GSAP

The pin feels sticky or jitters

• Add anticipatePin: 1 to the ScrollTrigger config
• Make sure the pinned element has a solid background (no transparency)
• Check that no other element has position: fixed inside the pinned section

Fonts do not load

• Check the Google Fonts link in the HTML head
• Make sure you have internet access (fonts load from CDN)
• If using a local server, check CORS headers

Mobile menu does not open

• Check that the viewport is under 992px (the menu is hidden on desktop)
• Check that script.js is loaded
• Check the browser console for errors

Form validation does not work

• The form is a mockup. It validates client-side but does not submit to a backend
• To connect a real backend, replace the contactForm.addEventListener('submit') handler with a fetch() call