Exo Ape Digital Agency Portfolio

Overview

This project is a high-end digital agency portfolio that utilizes immersive GSAP-driven animations and large-scale media to create a cinematic browsing experience. It is an exceptional reference for builders looking to master complex scroll-based interactions, custom cursor implementations, and sophisticated preloading sequences that use masking and clip-paths.

Design System

• Color Palette & Visual Hierarchy: The site employs a high-contrast dark mode aesthetic, primarily using deep blacks and off-whites with subtle gray accents (e.g., light-grey, dark classes). Motion is the primary driver of hierarchy, where elements transition from 0% opacity to fully visible as they enter the viewport.
• Typography: The system features a blend of oversized, high-impact serif titles for storytelling and minimalist sans-serif utility text for labels and body copy. HTML reveals a reliance on title-mask and title-line classes to wrap text, enabling split-type entrance animations.
• Page Structure: The flow is vertical and section-based, beginning with a recursive preloader containing a logo mark, followed by a featured-projects grid, a full-width showreel section with video backgrounds, and a media-heavy featured-articles list.
• Reusable Components:
  • Interactive Logo: A minimalist gorilla wordmark and name paired with star icons.
  • Project Cards: Video-first container blocks (.block) that prioritize motion over static imagery.
  • Circular Call-to-Action: A sophisticated button component with a circle-fill hover effect and an underline border transition.
  • Custom Cursor: A cursor div that follows the mouse with smooth lag (transform: translate3d) for a premium feel.
• Interaction & Motion: The site uses heavy GSAP (GreenSock) styling as seen in the inline translate, rotate, and scale attributes. Specifically, sections like HomeShowreel use scale(0.25) and expand to full-screen upon scroll. Clip-path masking is used for preloader transitions.
• Implementation Clues: Built using Nuxt.js (as evidenced by #__nuxt and data-fetch-key), utilizing Storyblok as a headless CMS for media assets. The styling relies on scoped Vue components (indicated by data-v- attributes).

Use Cases

• Creative Professional Portfolios: Ideal for photographers, motion designers, or filmmakers who want their work showcased through high-bitrate video backgrounds and immersive transitions.
• Luxury Brand Landing Pages: Products in the high-fashion, architecture, or premium automotive space can remix the "Showreel" section to build brand atmosphere before introducing product details.
• Remix Directions:
  • Style Swap: Replace the dark theme with a clean, high-key white and pastel palette while maintaining the GSAP scaling logic.
  • Functional Adaptation: Adapt the featured-articles media-wrapper to serve as a dynamic "press" or "history" timeline for corporate sites.
  • Clone Scope: For a quick win, clone the preloader and the circular-link button component. For a full-page clone, focus on the implementation of the smooth-scroll container and the entrance animations for text masks.