Regis Grumberg Interactive Portfolio Loader

Overview

This interactive portfolio represent a high-end creative benchmark for immersive loaders and motion design. It showcases an experimental "lab" approach to web development, using a minimal aesthetic to frame high-impact animations. Builders should clone this to master the art of the "loading experience" and seamless transitions between static content and interactive canvases.

Design System

• Color Palette & Visual Hierarchy: A strict monochromatic high-contrast theme (Black #000000 and White #FFFFFF). Hierarchy is driven by motion and scale rather than color; the central loader acts as the primary focal point during the initialization phase.
• Typography: Features heavy, bold, condensed sans-serif type used for both the central percentage indicator and the large-scale rotating background characters. The typography acts as a structural element of the UI, with extremely tight letter spacing in the circular path.
• Page Structure:
  • Loader Phase: A full-screen overlay with a circular typographic animation and a central percentage counter (span.percent).
  • Landing: A centered branding block (.cigle) following the entry interaction.
  • Gallery: A modular project grid (.projects__section) utilizing video previews for project tiles.
  • Footer: Minimalist information layout (.contact, .reserved, .designed) with thin typography.
• Reusable Components:
  • Circular Typography Loader: The rotating SVG/text path pattern.
  • Custom Cursor System: A multi-state cursor (.Cursor__Dot, .Cursor__Arrow, .Cursor__Drag) that changes based on interaction data-attributes like data-cursorclick and data-cursoreyes.
  • Project Cards: Video-based hover tiles within a CSS grid layout.
• Interaction & Motion: Heavy reliance on scroll-triggered transformations via a ScrollWrapper and a dedicated canvas layer (.outwebsite__canvas). Transitions use an "overlay bar" system (.Overlay__bar) to wipe between states.
• Implementation Clues: Built with Next.js (__next) and Prismic CMS for media delivery. Navigation uses a data-attribute-driven routing system (data-template="Home", data-loader="Home").

Use Cases

• Who should clone this: Creative developers, agency studios, and digital artists looking to build a "theatrical" entry for their portfolio.
• Effective Remixes: High-end architectural firms or luxury fashion brands could adapt this minimalist, high-contrast aesthetic to maintain premium branding while adding interactivity.
• Practical Directions:
  • Typography Swap: Change the condensed sans-serif to a high-contrast serif for a more editorial, luxury feel.
  • Loader Reuse: Extract only the Loader and Cursor components to add a professional polish to an existing, more traditional website.
  • Media Focus: Replace the video grid tiles with high-definition product photography or 3D model renders.
• Suggested Scope: Most builders will benefit from cloning the Loader and Transition system specifically, as the full-page scroll-canvas complexity requires tight integration between three.js/pixi.js and the DOM.