Loading ...

Responses by Ross Anderson, creative director, OFF+BRAND; Piet Dewijngaert, creative developer; Bryan James, designer; and Stuart Ross, director of strategy, OFF+BRAND.

Background: The OFF+BRAND Manifesto is an immersive interactive experience designed to communicate our philosophy. Instead of a conventional About page, however, the site challenges visitors to discover our values through interaction. The experience wasn’t built with high conversions in mind; it is for people who are curious about OFF+BRAND, our design and our creative development capabilities.

Design core: The manifesto is fragmented into five sections, each hidden behind an interactive journey. Instead of guiding users with explicit instructions, the site encourages discovery through gesture-based interactions—taps, drags and holds—to mirror the exploratory nature of our creative work.

The design leans into mystique and contrast, using 3-D environments where light and shadow play a key role in revealing content. The thin-line UI keeps the interface minimal, enabling the interactive elements to stand out. Each section concludes with an “unburning” reveal, where text emerges as if it had been uncovered by fire—reinforced by crackling audio.

Challenges: From a design perspective, the biggest challenge was balancing intentional ambiguity with a smooth, engaging experience. The site needed to feel mysterious without being frustrating, encouraging discovery while maintaining flow. This meant refining interaction mechanics, ensuring each reveal felt natural and fine-tuning pacing to keep users engaged. As with all our experiences, we never want to talk down to our audience, but we didn’t want it to feel ridiculously difficult.

On the technical side, optimizing real-time 3-D rendering while keeping performance high was a major hurdle. Since we used no prebuilt 3-D models, everything had to be dynamically processed within the browser, requiring careful asset management and rendering techniques to prevent lag or long load times.

Navigation structure: We love ambitious projects, and we like to do things differently. We wanted to convey this idea, so we created a navigation that feels exactly like what you would never do: not indicate to a user how they should interact with the site. This decision wasn’t just about being different; the navigation itself subtly communicates our design philosophy—creative work often requires persistence, curiosity and a willingness to step into the unknown. A “clues” panel provides cryptic riddles that hint at how to progress, adding an element of gamification that makes engaging with the manifesto feel earned rather than passively consumed.

Technology: The site was built using React for structuring and managing the experience, with three.js and React Three Fiber handling the WebGL-rendered 3-D elements. The core stack includes HTML, CSS and JavaScript, with GLSL shaders enhancing visual effects like the unburning animation. All 3-D assets and interactions are generated in real time, and we used no pre-rendered elements. This required heavy performance optimization to maintain fast load times and seamless transitions, despite the complexity of live rendering.

manifesto.itsoffbrand.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In