Edit Brand Studio Portfolio Portfolio

Overview

This portfolio for Edit Brand Studio is a masterclass in high-impact, minimalist presentation, utilizing a full-screen video showreel and bold typography to establish immediate brand authority. It serves as an excellent reference for builders wanting to implement scroll-triggered background color transitions and fixed-position project galleries that create an immersive, app-like browsing experience.

Design System

• Color Palette & Visual Hierarchy: The site uses a dynamic palette of vibrant primary and secondary colors (e.g., #F3846A coral, #91D5D1 mint, #F5F23C yellow, and #8584B0 lavender) that shift based on the active scroll section. Hierarchy is established through extreme contrast: heavy white or black text against these solid color blocks.
• Typography: A bold, sans-serif font is used at a massive scale for headings (classes like size-03 and size-04). Secondary information is presented in smaller, italicized, or all-caps styles to create a clear informational distinction.
• Page Structure & Flow: The layout follows a linear vertical flow starting with a full-bleed video-wrap hero, transitioning into a studio-intro text area, and culminating in a long-scroll homepage-featured-projects section where content is pinned as the background changes.
• Reusable Components:
  • Full-Bleed Landing Panel: A robust hero component featuring auto-playing muted video with a tint overlay.
  • Fixed Thumbnail Gallery: A sophisticated pattern where project cards (fixed-thumbnail) remain in view while their container backgrounds and text titles swap during scroll.
  • Overlay Menu: A full-screen navigation container that uses a vertical list of high-contrast links.
• Interaction & Motion: The site relies on scroll-bound triggers. HTML attributes like data-bg-color and data-custom-bg-color indicate a JavaScript-driven system that updates the body background style as different home-panel divs enter the viewport.
• Implementation Clues: The structure uses a "dummy" panel system (dummy-featured-project-panels) to provide scroll height while the actual gallery (fixed-project-thumbnails) stays fixed, suggesting the use of a library like GSAP ScrollTrigger or similar intersection-observer logic.

Use Cases

• Who should clone this: Creative agencies, production houses, and independent designers looking to showcase a high-quality portfolio with a focus on motion and visual impact.
• Effective Remixes: This pattern works effectively for high-end real estate listings, luxury product lookbooks, or event landing pages where visual storytelling outweighs dense text content.
• Practical Directions:
  • Brand Style Swap: Replace the bright colors with a monochrome palette for a more corporate, minimalist tech aesthetic.
  • Information Architecture: Adapt the fixed project gallery into a product feature showcase, using each color shift to highlight a different benefit.
• Suggested Clone Scope: A full-page clone is best to preserve the integrated scroll-and-color logic, but the full-bleed video hero can be easily extracted as a standalone header component.