Homunculus Portfolio Canvas Experience

Overview

This project features a sophisticated WebGL-based portfolio for a Japanese creative agency, utilizing a full-screen canvas to create a fluid, immersive digital experience. It is a premier reference for builders looking to master cinematic web design, specifically in how it bridges the gap between raw data storage (the hidden project list) and high-fidelity visual rendering.

Design System

• Color Palette & Visual Hierarchy: The aesthetic is strictly minimalist and dark-mode, utilizing a deep black background (#000000) and subtle gray guide lines (.bg-line-set). Hierarchy is established through motion and light rather than color, with high-contrast white text reserved for critical project titles.
• Typography System: A dual-language approach featuring sans-serif Japanese characters paired with modern English typography (.t-cov-title.en). The UI uses scaled numbers (#t-cov-num) and small-caps labels to provide a refined, technical feel.
• Page Structure & Flow: The site uses a non-traditional layout where content is loaded into a hidden data wrapper (.dt-contents) and then projected onto the <canvas id="world">. The flow moves from a loading sequence (#loading) into a scrollable canvas experience, supported by a persistent header (#header-set) and a minimalist footer.
• Reusable Components:
  • Project Data Wrapper: The .dt-work class structure is an excellent model for organizing metadata (images, paths, and translation strings) that can be accessed by a JS engine.
  • Custom Transition Overlays: The #transition-cover component includes a progress bar (.t-cov-barIn) and dynamic text blocks capable of transforming based on the active state.
  • Loading Bar: A sleek, horizontal loading indicator (.loading-bar-in) that sets a high-end tone immediately upon entry.
• Interaction & Motion Patterns: The experience is driven by "immersive scrolling," where vertical movement triggers WebGL transitions. Key interactions include the horizontal scroll tracker (.top-scroll-line-in) and the animated hamburger menu (.header-humb) which uses matrix transformations for positioning.
• Implementation Clues: The HTML reveals a heavy reliance on absolute positioning for layout components and a dedicated scroll container (#scroll-wrapp) set to a dynamic height to proxy the user's scroll position to the WebGL world.

Use Cases

• Who Should Clone This: Creative developers and boutique agencies looking to build "award-worthy" portfolios that emphasize visual storytelling over standard grid layouts.
• Remix Directions: Replace the WebGL engine with a library like Three.js while keeping the HTML data structure (.dt-work) to populate the scene. One could also remix the #transition-cover logic for more traditional multi-page sites to create seamless "PJAX-style" transitions.
• Suggested Clone Scope: Start by cloning the HTML data wrapper and the loading sequence for a high-impact intro. A full-page clone is recommended only for developers comfortable with JavaScript-heavy animation orchestration, while the UI elements like the .top-scroll-txt and .bg-line-set are great for quick, isolated section remixes.