Suburbia Skate

A modern, interactive skateboarding brand website built with Next.js 15, featuring a 3D board customizer, physics-based footer animations, and CMS-driven content via Prismic.

Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS with fluid-tailwind
• CMS: Prismic (headless CMS)
• 3D Rendering: React Three Fiber + Drei + Three.js
• Physics: Matter.js
• Animations: GSAP
• Fonts: Bowlby One SC, DM Mono (via next/font)

Features

• Interactive Hero — 3D skateboard that performs tricks (ollie, kickflip, frontside 360) on click
• Product Showcase — Grid of skateboards with hover effects, prices, and customizer links
• Team Roster — Skater profiles with photo reveals and hover scribble animations
• Sticky Scroll Sections — Text & image content with mouse parallax, bundled for scroll stacking
• Video Block — Lazy-loaded YouTube video with custom mask shape
• 3D Board Customizer — Real-time skateboard builder with deck/wheel textures and truck/bolt colors; orbit controls and shareable URLs via search params
• Physics Footer — Matter.js simulation of skateboards falling and bouncing with drag support
• Fully Responsive — Mobile-first design across all sections
• CMS-Driven — All content managed through Prismic (pages, products, team, settings)
• Cart Page — Basic shopping cart with support for multiple items, quantity controls, and order summary

Getting Started

npm install
npm run dev

Open http://localhost:3000 to view the site.

Prismic Setup

This project uses Prismic for content management. To connect to your own Prismic repository:

1. Create a .env.local file with your Prismic environment variables
2. Update the Prismic client configuration in src/prismicio.ts

Build

npm run build
npm start

Lint

npm run lint

Project Structure

src/
├── app/                  # Next.js App Router pages
│   ├── (with-header)/    # Routes with Header & Footer
│   │   └── cart/         # Shopping cart page
│   ├── build/            # 3D board customizer
│   ├── api/              # API routes (revalidate, preview)
│   └── slice-simulator/  # Prismic Slice Machine
├── components/           # Shared React components
├── lib/                  # Utility libraries
├── slices/               # Prismic Slice components
└── prismicio.ts          # Prismic client config

Deployment

Deploy on Vercel for the best experience with Next.js.