Noir Editorial
A dark, editorial-luxury direction. Full-bleed photography and serif display type set the tone, carried by scroll-driven motion in every section.
The Challenge
Translate a single brief into a dark, editorial-luxury voice that still reads as confident and legible, not just moody.
The Approach
Full-bleed photography and a serif display type (paired with a sans for body copy) sit over a restrained single-accent dark palette, with GSAP ScrollTrigger pacing the read instead of extra chrome.
UI Showcase
The hero fills a 100svh viewport fold anchored to the bottom edge, so the headline and CTA stay visible on first load rather than tucked below it; six independent practice-area pages and standalone privacy/terms pages reuse the same dark hero and CTA pattern.
- Full-bleed hero anchored to a 100svh fold, so the headline and CTA are visible on first load
- Serif display type (Playfair Display) paired with a Manrope sans for body copy
- GSAP ScrollTrigger stages each section's reveal in sequence while scrolling
Motion Breakdown
Scroll-triggered reveals stage each section's entrance in sequence, one at a time, rather than animating the whole page at once.
Tech Stack
- Next.js
- TypeScript
- GSAP ScrollTrigger
- Tailwind CSS