Offfice Studio Minimal 3D Portfolio

Overview

This website is a high-impact, dark-mode 3D portfolio for Offfice Studio, featuring a sophisticated integration of WebGL models and high-contrast typography. It serves as an excellent reference for builders wanting to merge interactive 3D assets with a brutalist, minimal design aesthetic. Its strength lies in its seamless transitions between list-based navigation and real-time rendered 3D product displays.

Design System

• Color Palette & Visual Hierarchy: A strict monochromatic palette dominated by a deep black background (#000000) and pure white text. Hierarchy is established through extreme scale variations in typography rather than color, creating a stark, high-fashion editorial feel.
• Typography System: The design utilizes a mix of a clean, geometric sans-serif for headings (e.g., OFFFICE FOR FUTURE FURNISHING) and a specialized serif/italic font (marked by class font-gs) for brand accents and buttons like "Archive". Text sizes range from massive 15vw hero units to functional text-xs utility links.
• Page Structure & Flow: The layout follows a linear vertical flow: a bold responsive hero section with integrated 3D models, followed by a centered "Archive" list section, and concluding with a multidisciplinary bio and contact information section.
• Reusable Components:
  • Interactive List Item: A vertical <ul> where hovering or selecting an item triggers both a visibility change in project metadata (data-a="alpha") and a swap of the central 3D model.
  • Minimal Nav: A fixed top navigation bar built with flex justify-between to anchor the brand and CTA at extreme corners.
  • 3D Canvas Container: A dedicated data-gl="c" div that serves as the viewport for .glb models, which can be repositioned behind or over text.
• Interaction & Motion: The HTML reveals heavy use of GSAP/ScrollTrigger patterns (data-a-mod, data-a="char") for character-by-character entrance animations. The archive uses a "taxi" transition system for smooth page routing and state changes when switching between project models.
• Responsive Behavior: On mobile, the hero typography scales down to 13vw and stacks vertically. The side-aligned metadata in the hero (IT / ES / CH) moves into a justified block above the archive section to maintain readability on narrow screens.

Use Cases

• Who should clone this: Industrial designers, furniture studios, and architectural visualization artists looking to showcase physical products in a digital-first environment.
• Effective Remixes:
  • E-commerce: Replace the "Archive" list with a "Collection" list where selecting a product updates a 3D preview and provides an "Add to Cart" link.
  • Luxury Branding: Swap the black/white for a cream/navy palette and use the large typography to tell a brand story while the central 3D asset rotates.
• Remix Directions: Builders can extract just the hero transition logic to create a striking landing page or clone the full archive list style to replace standard grid-based portfolios.
• Suggested Scope: A full-page clone is recommended to capture the synchronized relationship between the project list and the WebGL canvas, as the layout relies heavily on the spatial interaction between text and the 3D model.