Suburbia Skateboards

A high-performance, interactive 3D e-commerce storefront.
Built with Next.js, WebGL, and static local data for unparalleled speed and autonomy.

Overview

Suburbia is an experimental e-commerce frontend demonstrating the integration of real-time 3D rendering within a modern web application architecture. Using React Three Fiber and Next.js App Router, it provides a seamless shopping experience where users can interact with products in 3D space, heavily optimized through static site generation (SSG).

The repository has been recently refactored to operate 100% autonomously, migrating away from remote headless CMS dependencies in favor of a strictly typed, version-controlled local data layer.

Interface Showcase

The application features advanced scroll-linked animations, parallax effects, and a custom 3D configurator.

Hero section featuring GSAP animations and dynamic text composition.


Interactive product grids highlighting the latest deck concepts.


Parallax scrolling interfaces leading to the 3D board customizer.


The Team roster showcasing distinct masking and overlay effects.


Clean, responsive application footprint.

Technical Architecture

• Rendering Engine: WebGL via three and @react-three/fiber for real-time 3D board customization.
• Data Layer: Fully autonomous and decoupled. Dynamic content (slices, product data, customizer options) is managed statically via TypeScript interfaces in src/data/.
• Styling: Utility-first styling with Tailwind CSS, orchestrated with clsx for dynamic responsive states.
• Animations: High-performance DOM animations powered by gsap.

Local Development

The project utilizes Bun as its primary package manager and runtime for optimal execution speeds.

1. Install Dependencies:

   bun install

2. Start the Development Server:

   bun run dev

3. Production Build:

   bun run build

The application will be running locally at http://localhost:3000.