Unseen Studio Immersive Digital Portfolio

Overview

This project showcases a high-fidelity immersive portfolio for Unseen Studio, characterized by a sophisticated integration of Three.js 3D backgrounds and custom motion-driven interactions. It serves as a premier reference for builders looking to clone a professional-grade creative agency experience that prioritizes atmospheric immersion and seamless page transitions.

Design System

• Color Palette & Visual Hierarchy: The design employs a deep monochromatic base (charcoal/off-black) providing high contrast for white and light-grey typography. Vibrant accents, such as the "pink" loader box identified in the HTML, are used strategically to emphasize brand personality.
• Typography System: A mix of clean, utilitarian sans-serif for labels and body text (t-sans, t-uppercase) paired with elegant serif italics (t-serif, t-italic) for expressive headings like "Say hello." The scale transitions from large, thin-weight loader letters to smaller, readable metadata.
• Page Structure: The site utilizes a loading-first architecture. It begins with a detailed loader sequence (loader--animate) displaying brand messaging, followed by a primary <canvas> layer for 3D visuals. Content is wrapped in a smooth-scroll container (asscroll-container) and partitioned into views like homeContact and selected project filters.
• Reusable Components:
  • Animated Buttons: High-fidelity buttons (btn--fill, btn--border) featuring cloned text spans for sophisticated slide-up hover effects.
  • Custom Cursor: A complex JS-driven cursor (js-cursor) with states for dragging, clicking, and video indicators.
  • Interactive Loader: A modular loading system that includes audio toggles and progress indicators.
• Interaction & Motion: The site relies on high-fidelity transitions. HTML clues indicate the use of asscroll for smooth scrolling, GSAP-style reveal animations (js-reveal-anim), and Three.js (r143) for the GL background.
• Implementation Clues: The project uses a utility-class system for layout (e.g., d-flex, items-center, w-1/1) and a data-router for AJAX-based page transitions without full refreshes (data-router-wrapper).

Use Cases

• Who Should Clone: Creative agencies, motion designers, and high-end digital studios aiming to establish a "premium" and technically advanced brand presence.
• Effective Remixes: This pattern works exceptionally well for architectural firms, luxury brands, or product landing pages where atmosphere and storytelling are as important as information delivery.
• Remix Directions: Swap the Three.js background for a simpler CSS gradient or video background to reduce complexity, or adapt the project filter system (js-project-filters) for a product catalog or case study library.
• Suggested Clone Scope: For a quick win, clone the custom cursor and button transition logic. For a full rebuild, adopt the page transition and smooth scroll architecture to achieve a unified, app-like feeling across the entire site.