Custom WordPress Theme
For a Design Agency.

Building a WordPress theme that moves — Three.js 3D, scroll-driven storytelling, and zero compromise on performance.

Role

Lead WordPress Developer

Stack

WordPress, Three.js, GSAP, ScrollSmoother

Theme

100% Custom (no page builder)

Modes

Dark + Light

01 // The Technical Challenge

3D Without
the Weight.

A Three.js WebGL scene on page load is a performance risk — especially on mobile. We built a lazy-loading WebGL compositor: the 3D scene is initialized off-screen, transferred via OffscreenCanvas where supported, and degrades gracefully to a CSS animation on low-end devices.

Agency site hero with a glossy 3D object, bold headline and dark gradient background

02 // The Scroll System

ScrollSmoother
Architecture.

GSAP ScrollSmoother wraps the entire site in a virtual scroll container. Each section uses ScrollTrigger pinning and scrub animations. The dark/light mode state is tied to scroll position at defined thresholds, creating a seamless visual transition as users explore the page.

→ GSAP ScrollSmoother — full-site smooth scroll
→ ScrollTrigger pins + scrub per section
→ Dark/light mode toggle via CSS custom properties + class swap
→ Three.js scene parallax linked to scroll velocity

Scroll-driven animation timeline showing section reveals and 3D model transitions across the page

03 // Dual Mode System

Dark. Light.
[Both Perfect.]

The dark and light modes were not afterthoughts. The full design system was built on CSS custom properties from day one — every colour token switches instantly on class toggle with a 300ms smooth transition on all properties.