Accept & Proceed Creative Portfolio

Overview

This is a high-end agency portfolio website that prioritizes atmospheric storytelling through a sophisticated full-screen slider and custom interaction model. It is a premier reference for builders looking to implement complex GSAP-style transitions, a custom-branded cursor, and high-performance CMS-driven grids that blend video and imagery seamlessly.

Design System

• Color Palette & Visual Hierarchy: The site uses a high-contrast foundation (pure whites and deep blacks) overlaying vibrant, ambient-mapped gradients. Visual hierarchy is established through a "scale-first" approach, where the hero slider dominates the viewport while UI elements like the top navigation and secondary project titles are kept minimal and peripheral.
• Typography: A clean, modern sans-serif (likely a custom Swiss neo-grotesk) is used. It features a robust scale: massive H3 headers for overlaying the dynamic slider, and smaller, utility-focused monochrome type for the navigation and project metadata tags.
• Page Structure:
  1. Dynamic Hero: A full-screen slider (main-slider) with a split-layer transition effect and a kinetic text mask (slider-overlay-words-mask) that cycles through design values.
  2. Project Grid: A staggered 2-column CMS list (cms-collection-list) featuring large-scale cards with integrated video embeds.
  3. Journal Section: A dense, square-ratio grid for editorial content.
  4. Accordion Workshop: A "Endless Vital Activity" section utilizing a clean, line-separated accordion (fs-accordion) to manage heavy text and podcast/video content without cluttering the UI.
• Interaction & Motion: The site features a highly customized cursor (custom-cursor-wrap) that changes text (e.g., "Prev", "Next", "View Project") and grows based on the hover target’s cc-type attribute. Elements utilize a "placeholder wrap" logic for a consistent fade-in sequence as the user scrolls.
• Implementation Clues: The HTML reveals a heavy reliance on Webflow CMS data attributes for custom logic, likely combined with standard libraries like Finsweet Attributes for the accordions (fs-accordion-element) and potentially GSAP for the slider's coordinate-based transforms (translate3d).

Use Cases

• Who should clone this: Creative directors, design studios, and high-end architects who need a portfolio that feels more like an "experience" than a traditional list of links.
• Remix Directions:
  • The Hero Slider: Clone the main-slider to replace static banners with a dynamic carousel that uses horizontal image shifts and vertical text masks simultaneously.
  • The Accordion List: Extract the S4 "Podcast" accordion for any site requiring a clean way to host mixed media (audio links, descriptions, and video players) in a vertical stack.
  • Tagging System: Reuse the project-tag component, which includes a distinct icon-separator-text structure, perfect for categorizing complex service offerings.
• Suggested Scope: A full-page clone is best for those wanting to maintain the rigorous whitespace and custom interaction feel; however, the cms-card logic is easily portable as a standalone "remixable" grid for any external CMS project.