Souss Furniture Interactive 3D Portfolio

Overview

This website is a minimalist interactive portfolio for Souss Furniture, utilizing a Three.js canvas to showcase 3D product models. Its strength as a clone reference lies in its "text-first" navigation strategy, where a dense paragraph of links acts as the primary interface for triggering 3D state changes without traditional thumbnails or complex UI chrome.

Design System

• Color Palette & Visual Hierarchy: The design employs a low-contrast, muted neutral palette (off-white/light grey background) to provide a soft backdrop for charcoal-dark text and 3D assets. The visual hierarchy is extremely flat, prioritizing the interaction between typography and the central 3D canvas.
• Typography System: A clean, geometric sans-serif is used throughout. The primary navigation uses a large, weighted font size (~2rem+) to create a "wall of text" effect. Active states are indicated by a solid underline (.c-jOJuLc-jAqIvk-active-true), providing clear feedback in a dense layout.
• Page Structure: The layout is structured as a vertical stack: a utility header (Logo/Info/Social), a central 100vw by 56vw Three.js canvas container, and a bottom section dedicated to the text-based product menu.
• Reusable Components: The core components to clone are the Next.js-based route links that integrate with a Three.js scene and the universal header links for branding and external social redirects.
• Interactions & Motion: The primary interaction is the seamless transition of the 3D model upon selecting a text link. The HTML reveals that each product is a unique route (e.g., /models/vinyl-storage), suggesting a robust state management system that persists the 3D environment across page transitions.
• Implementation Clues: Built with Next.js (indicated by the __next div and route announcer) and Stitches or a similar CSS-in-JS library (indicated by the c- class prefixing). The 3D engine is explicitly identified as three.js r145.

Use Cases

• Who should clone this: Digital artists, industrial designers, and furniture makers who want a sophisticated, high-end gallery that feels like a physical lookbook rather than a standard e-commerce grid.
• Product Remixing: This pattern is ideal for luxury small-batch goods, architectural visualizations, or digital NFT galleries where the single-object focus is paramount.
• Remix Directions: Builders can swap the muted color palette for a high-contrast dark mode, replace the Three.js canvas with high-resolution video embeds, or adapt the text menu to act as a filter for a larger collection.
• Suggested Clone Scope: A full-page clone is recommended to capture the specific relationship between the aspect-ratio controlled canvas and the responsive text-link block.