CTHDRL Digital Agency Portfolio Slider

Overview

This website is a premium portfolio for a creative agency, showcasing high-impact visual storytelling through a full-screen vertical slider. It is an excellent clone reference for its sophisticated use of SVG masking, grain-textured aesthetic, and a minimalist UI that prioritizes large-scale media assets and bold typography.

Design System

• Color Palette & Visual Hierarchy: A high-contrast monochromatic base (deep charcoal/black and off-white/cream) is used for UI elements and typography. High-saturation colors are introduced via backgrounds and full-screen video/images in project slides, allowing content to drive the hierarchy.
• Typography: The system uses a clean, sans-serif grotesque for the main display (likely a heavy-weight custom font) with a strong horizontal emphasis. Secondary information and navigation use a monospaced font at a smaller scale, creating a technical, architectural feel.
• Page Structure: The site follows a linear horizontal slider flow. It begins with a manifesto hero section and transitions into a series of project slides. Each project slide consists of a full-screen background video/image and a grid-aligned text overlay for technical details (Client, Project, Services).
• Reusable Components:
  • Animated SVG Arcs: Large-scale decorative arcs (visible in the bg-arc-animation class) that define the visual space.
  • Dynamic Project Counter: A numerical counter (0/14) positioned at the top right to provide user orientation.
  • Grain Overlay: A bg-noise div applied globally to soften digital gradients and add texture.
  • Custom Word Cursor: A dynamic cursor that follows position and changes icons based on context (visible in the word-cursor div).
• Interaction & Motion: The site utilizes "text-slideup" animations for headlines. Layout transition involves translating the slider div across the viewport, synchronized with CSS custom properties (--c-one-length) that likely control the drawing speed of the SVG arcs.
• Responsive Behavior: The HTML reveals a dedicated mobile-arc-wrap and clippy class, intended to adapt the complex SVG mask patterns for smaller vertical viewports, ensuring the artistic identity remains consistent on mobile.
• Implementation Clues: Built with Nuxt.js (as evidenced by #__nuxt), the site uses CSS variables for real-time animation calculations and Prismic as the headless CMS for dynamic content delivery.

Use Cases

• Who should clone this: Independent creative studios, high-end production houses, or independent designers needing a minimalist but technically impressive portfolio.
• Effective Remixes: This pattern works perfectly for launch-teasers, luxury brand landing pages, or digital art galleries where the visuals are the primary communication channel.
• Practical Directions: Builders can swap the monochromatic theme for a brand-specific gradient, or simplify the SVG arc shapes to other geometric forms (circles, polygons) while keeping the slider logic.
• Suggested Clone Scope: A full-page clone is recommended to preserve the integrated motion between the navigation, typography, and background arcs, as these elements are visually codependent.