Creative Agency Website
An award-style creative agency website featuring advanced GSAP ScrollTrigger animations, Lenis smooth scrolling, horizontal scroll sections, magnetic cursor effects, and a dark luxury aesthetic.
About the Project
Noir Studio is a creative design agency website built as a full technical showcase — the kind of site that competes with Awwwards submissions. Every section was designed to demonstrate what's possible when advanced GSAP animation engineering meets intentional visual design.
Built in React.js with Tailwind CSS for the design system, GSAP and ScrollTrigger for animation orchestration, and Lenis for scroll physics — this project represents the highest level of frontend animation craft I've shipped to date.
Built to Prove a Point
Creative agencies sell creativity. Their website needs to be the strongest proof of concept they have. Noir Studio was designed to answer one question for every visitor: can this team actually do what they say they can? Every scroll interaction, cursor effect, and transition answers yes.
Advanced GSAP ScrollTrigger Architecture
The animation system is built on a centralized GSAP context — initialized once at the app level and scoped to prevent memory leaks across route changes. Every ScrollTrigger instance is registered, tracked, and killed cleanly on component unmount.
Section reveals use staggered timeline sequences pinned to scroll position. The "Our Work" section features a full horizontal scroll — the viewport pins, and the project cards travel left as the user scrolls down, creating a natural browsing motion without breaking scroll flow.
Lenis + GSAP Ticker Sync
Lenis smooth scroll is integrated at the root level and connected to GSAP's internal ticker via gsap.ticker.add(). This is the critical integration that prevents the most common GSAP + smooth scroll bug: animation values desyncing from actual scroll position.
The result is a scroll experience where every animation responds to the user's actual momentum — accelerating when they scroll fast, settling precisely when they stop.
Magnetic Cursor System
A custom magnetic cursor effect is implemented across all interactive elements — navigation links, CTA buttons, and project thumbnails. As the cursor approaches a magnetic element, it snaps and follows with spring-like ease.
The cursor itself morphs — scaling up on hover, blending into image thumbnails with a mix-blend-mode: difference effect, and displaying contextual labels ("View", "Drag", "Open") based on element type.
Text Animation System
Headlines use a character-split animation system built with a custom React hook. On scroll entry, each character animates in with a staggered GSAP timeline — rotating from a Y-axis skew into position, creating a kinetic typographic entrance.
This same system is reused across six sections with different timing and easing parameters — consistency through a shared animation API rather than repeated code.
Horizontal Scroll Work Section
The featured work section pins the viewport and drives horizontal card travel via ScrollTrigger's x transform. Each project card scales slightly as it enters the center viewport position, with the card's background image parallaxing independently inside its container — creating a layered depth effect within each card.
The Most Technically Complex Project I've Shipped
Noir Studio pushed every frontier I'd worked in before — GSAP architecture at scale, Lenis physics integration, custom cursor systems, horizontal scroll sequences, and character-level text animation — all working together in a single cohesive product.
What This Project Unlocks for Clients
Any creative studio, branding agency, or premium product company that sees this project understands immediately what's possible. This is the work that attracts the clients worth working with — the ones who understand the difference between a website and an experience, and are willing to invest in building the latter.
This is the benchmark. Everything else is built toward it.
