Favorit Studio Portfolio Landing Page

Overview

This portfolio landing page for Favorit Studio is a masterclass in high-end, motion-driven storytelling for creative agencies. It utilizes progressive scroll-linked animations and a sticky section architecture to transform a linear layout into a cinematic experience. It is a strong reference for builders looking to implement sophisticated scroll-trigger effects and custom cursor interactions without sacrificing performance.

Design System

• Color Palette & Visual Hierarchy: A high-contrast monochromatic system primarily using black and white. It shifts between light sections (section--light) and dark sections (section--dark) to delineate content boundaries. There is a frequent use of the CSS mix-blend-mode: difference for a minimalist, editorial aesthetic.
• Typography: The design relies on a large-scale serif typeface for major headings and a clean, utility-focused sans-serif for secondary copy. Headings use aggressive scale (section__title-medium) with overflow: hidden containers to enable "mask-slide-up" text reveals.
• Page Structure:
  1. Loader: A numerical progress indicator (045 in the screenshot) that syncs with asset loading.
  2. Intro Section: A sticky full-height hero with split-text animations.
  3. About Section: Text-heavy layout with scroll-linked opacity and scaling transitions.
  4. Project Gallery: A recurring pattern of large horizontal sliders (Swiper.js) where each slide is a high-resolution image or autoplaying video.
  5. Contact/Footer: Large list-style links with hover-sensitive cursors.
• Reusable Components:
  • Swiper Gallery: Full-width project carousels integrated with custom navigation buttons.
  • Sticky Hints: Vertical sidebar headings that remain visible while the user scrolls through a specific section.
  • Custom Cursor: A dynamic cursor element that changes labels based on the context (e.g., "Prev", "Next", "View Shop").
• Interaction & Motion: The site uses data-attributes (data-config) to define scroll triggers (e.g., top-middle to middle-top). Motion patterns include horizontal translation of titles on the X-axis during vertical scroll and smooth blur/fade transitions.
• Implementation Clues: Built using Nuxt.js, the site utilizes js-scroll-translate and js-scroll-in classes to hooks into a custom scroll library. The HTML reveals a heavy reliance on Flexbox and a specialized canvas component for the hero background.

Use Cases

• Who should clone this: Independent designers, boutique agencies, or architecture firms needing a premium, "one-page" showcase that feels more like an immersive digital installation than a standard website.
• Effective Remixes:
  • E-commerce Lookbooks: Reuse the horizontal Swiper galleries and sticky image layers for high-fashion catalogs.
  • Waitlist Pages: Adapt the intro section and high-contrast typography to create a high-impact landing page for upcoming SaaS products.
• Practical Remix Directions: Builders can easily swap the monochromatic palette for a brand-specific duo-tone. The project sections can be modified to replace videos with static images for lighter performance.
• Suggested Clone Scope: A full-page clone is recommended to maintain the internal logic of the sticky transitions, but the Scroll-linked Title Reveal (using the scroll-translateY pattern) is a perfect candidate for a quick, standalone section clone.