Monopo London Creative Agency Portfolio

Overview

Monopo London is a high-end creative agency portfolio that utilizes immersive WebGL visuals and highly tactile scroll mechanics to showcase brand work. It serves as a premier reference for builders looking to implement sophisticated scroll-driven animations and custom cursor-based navigation within a minimalist framework.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast dark mode foundation (Black background, White typography) to make the vibrant, multi-colored WebGL gradients and colorful project photography pop. The hierarchy is established through extreme shifts in typography size rather than color.
• Typography: The system features a unique combination of bold, condensed sans-serif fonts for headings and delicate, italicized glyphs (e.g., lowercase 'o' and 'i') to add a high-fashion, boutique feel. Text scales from massive h1 descriptors to tiny, functional utility labels (ruler marks).
• Page Structure & Flow: The site opens with a full-screen PixiJS gradient hero, transitioning into a project gallery. The layout uses a vertical 'ruler' scroll indicator (class c-Home-ruler) on the left, while project titles and images remain sticky and scale dynamically as the user scrolls through the js-sticky-container.
• Reusable Components:
  • Vertical Ruler Progress: A creative alternative to a standard scroll bar that tracks position using c-Home-ruler-cursor.
  • Custom Cursor: A circular interaction element (c-Cursor-info-circle) that changes its text content (e.g., "View case study") based on the hovered element.
  • Sticky Project Sections: Projects are contained in 1080px high blocks that use sticky positioning to overlay each other during transitions.
• Interaction & Motion: The site relies heavily on scroll-jacking concepts where scrolling controls the scale and opacity of images. The HTML reveals a monopo-gradient component with parameters for displacement, seed, and zoom, suggesting a shader-based background system.
• Implementation Clues: Built with Nuxt.js (id="__nuxt"), the site leverages PixiJS for WebGL rendering and Prismic as a headless CMS for dynamic image loading. It follows a class-based naming convention (e.g., t-h1, c-App) for clear separation of typography and components.

Use Cases

• Creative Portfolios: Designers and directors should clone the sticky image scaling and the vertical ruler to create a 'gallery' feel that distinguishes them from template-based sites.
• Premium Product Launches: Hardware or luxury goods brands can remix the WebGL gradient background to match their brand palette, using it as a high-fidelity backdrop for 3D product renders.
• Remix Strategy: A quick clone of the c-Cursor-info logic and the CSS for the custom typography system can elevate a standard landing page without requiring a full site rewrite. For a full-page clone, builders should focus on the intersection of the sticky scrolling container and the PixiJS canvas transitions.
• Practical Scope: High-impact for homepages or 'Work' landing pages; less practical for content-heavy blogs or data-driven dashboards due to its focus on visual immersion over density.