Lusion 3D Interactive Agency Portfolio

Overview

This website is a premier reference for high-end creative portfolios, centered around a full-screen Three.js 3D canvas and sophisticated scroll-driven orchestration. It effectively demonstrates how to blend immersive WebGL graphics with a structured HTML UI, making it an ideal clone candidate for developers looking to master the 'FWA-style' interactive experience.

Design System

• Color Palette & Visual Hierarchy: The baseline is a deep black (#000000) for the background to ensure 3D elements pop. Projects utilize dynamic backdrops defined by data attributes (e.g., #1a1411 for Oryzo AI, #EFD5D3 for Porsche), creating localized thematic shifts as the user scrolls. The hierarchy is driven by contrast, using white typography against dark backgrounds and serif/sans-serif mixtures for emphasis.
• Typography: The system uses clean, modernist sans-serifs for body text and navigation, paired with refined headings. Actionable text like "scroll to explore" is set in lowercase for a minimalist feel, while hero titles use large-scale typography (#home-hero-title) to anchor the visual weight.
• Page Structure: The flow follows a "cinematic scroll" sequence: 1) Three.js-integraded Hero, 2) Intro Reel with a video overlay, 3) Grid-based Featured Work, 4) Thematic "Goal" section with tunnel-style imagery, 5) Sticky Footer/Contact call-to-action.
• Reusable Components:
  • Project Cards: The .project-item is highly reusable, featuring a nested footer with metadata (.project-item-line-1) and interactive hover states.
  • Dot CTAs: Links like #home-reel-cta use a specific dot-text-arrow pattern.
  • Preloader: A specialized percentage-digit counter (.preloader-percent-digit) for high-fidelity assets.
• Interaction & Motion: The site relies on scroll-triggered transformations. The HTML structure shows a page-container-inner inside a page-container, suggesting a smooth-scrolling implementation (likely GSAP or a custom lerped scroll) that coordinates the overlay UI with the Three.js canvas in the background.
• Implementation Clues: Built with Three.js r158. The UI is separated into a #ui layer over a #canvas element, allowing the interactive 3D scene to remain static while the DOM scrolls over it or drives camera movements via scroll events.

Use Cases

• Who should clone this: Creative developers, 3D artists, and high-end digital agencies who want to showcase a small number of premium projects with maximum visual impact.
• Effective Remixes: This pattern works perfectly for product launch landing pages (e.g., luxury goods, hardware tech) or immersive educational experiences where the background must change based on the information section.
• Remix Directions:
  • Content Swap: Replace the agency projects with a single-product showcase, using the project grid to highlight different features or technical specs.
  • Architecture Adaptation: Keep the header and footer but replace the middle sections with a traditional blog or service layout while maintaining the smooth-scroll 3D background.
• Clone Scope: For a quick win, clone the .project-list and the #preloader mechanics. For a full-scale project, clone the dual-layered Canvas/UI structure to ensure perfect alignment between 3D visuals and HTML text.