Gus Portfolio Three.js Canvas Landing

Overview

This portfolio landing page serves as a high-impact technical demonstration, utilizing Three.js and WebGL to create a gamified, grid-based aesthetic. It features a unique interaction model where the primary call-to-action is a scroll-activated scale effect that bridges the gap between digital art and traditional agency portfolios. This is an excellent reference for developers looking to master canvas-based backgrounds and scroll-linked animations in a minimalist container.

Design System

• Color Palette and Visual Hierarchy: The design lead with a bold Emerald Green (#009B65) grid background that provides high contrast against the primary accent colors: a vibrant Scarlet Red used for the "gus" splash logo and a warm Marigold Yellow for the interactive "Scroll" trigger. The hierarchy is flat across the grid, focusing attention entirely on the central interaction point.
• Typography System: The site uses a clean, utilitarian sans-serif. The logo features a lowercase, wide-tracked serif ("gus") housed in a classic red jagged "explosion" or "splash" vector, referencing vintage comic book or retail sale graphics. Supporting text in the marquee and navigation uses a geometric sans-serif that remains legible at small scales.
• Page Structure and Section Flow: The layout is a fixed-viewport single-page application (SPA) centered on a WebGL canvas. It follows a non-traditional flow: a top marquee for credentials, a top-left brand asset, a top-right hamburger menu, and a central circular "Scroll" element that acts as the focal point for the entire experience.
• Reusable Components:
  • Interactive Grid Background: A Three.js canvas rendering a reactive coordinate system.
  • Animated Marquee: A continuous horizontal news-ticker style announcement bar ("Ad Age Small Agency of the Year").
  • Overlay Navigation: A slide-out or list-based menu controlled by a minimalist hamburger icon.
  • Scale-Link Trigger: A centered circular button that animates based on scroll input (mapped to the --scale CSS variable in the HTML).
• Interaction and Motion: The core mechanic is scroll-driven; as the user scrolls, the central yellow circle scales and shifts (indicated by ---scale: 0.9998... and ---shift: 0 in the code). The grid likely responds to mouse movement, creating a sense of depth.
• Implementation Clues: The site is built with React (indicated by the #root div) and Three.js (r166). It uses CSS custom properties (variables) to bridge the gap between JS animation values and CSS transforms, allowing for high-performance visual updates.

Use Cases

• Who should clone this: Creative developers, motion designers, and boutique digital agencies who want to showcase technical expertise through a bold, experimental UI.
• Effective Remixes: This pattern works well for game landing pages, high-end fashion lookbooks, or technical product launches where a "discovery" phase is part of the user journey.
• Remix Directions:
  • Brand Swap: Change the green grid to a dark navy with bioluminescent lines for a cyberpunk aesthetic.
  • Information Architecture: Replace the central "Scroll" circle with a 3D product model that rotates as the user scrolls.
  • Selective Reuse: Clone only the top marquee and the coordinate-grid background to use as a header for a more traditional blog or portfolio site.
• Suggested Scope: A full-page clone is recommended to maintain the integrity of the scroll-to-interaction relationship, but the marquee component is a perfect "quick clone" for any promotional site.