shipped project
Noir Studio.
Animated creative agency landing page with GSAP ScrollTrigger, SplitText line reveals, pinned horizontal scroll gallery, magnetic CTA and a custom dual-element cursor.
$ less ./full-description
What this build covers.
Noir Studio is a motion-first creative agency landing page — every section is an animation showcase. Built with Next.js and GSAP's complete plugin suite (ScrollTrigger, SplitText), it demonstrates the kind of kinetic, editorial web experience you see on Awwwards-winning agency sites.
The page opens with a full-screen loader — a counter ticking 0→100 in JetBrains Mono, followed by a curtain wipe that reveals the hero. Two giant stacked wordmarks ("NOIR" / "STUDIO") animate in via clipPath reveals. Below that, an infinite marquee ticker reverses direction on scroll-up and pauses on hover.
The centrepiece is a pinned horizontal scroll gallery: the user scrolls vertically for 300vh while four project cards slide horizontally — each scaling from 0.9 to 1 as it enters the viewport. A magnetic CTA button physically follows the cursor with GSAP quickTo physics. A custom dual-element cursor (dot + lagged ring) completes the premium feel.
ok
Full-screen page loader with animated counter and curtain reveal (GSAP timeline)
ok
SplitText clipPath line reveals for hero wordmarks and section headers
ok
Infinite marquee ticker with scroll-direction reversal and hover pause
ok
Pinned horizontal scroll gallery (300vh scrub, 4 cards, per-card scale + opacity)
ok
Magnetic CTA button with GSAP quickTo physics — follows cursor within 80px
ok
Custom dual-element cursor (8px dot + 40px lagged ring) — disabled on touch
ok
Lenis smooth scroll synced to GSAP ticker for buttery 60fps momentum
$ find ./projects -related
Related builds.
2025 / Web App
Pulse Dashboard
SaaS analytics dashboard with real-time KPI cards, revenue area charts, customer table with slide-out panels, and full dark/light mode theming.
2024 / Web App
Sweet Layer
Headless e-commerce storefront built with Nuxt and Payload CMS. Full product catalog, cart, checkout flow, and a clean content management backend.
2026 / Web App
DataSync
SaaS landing page for a real-time database sync API. Offline-first architecture, automatic conflict resolution, and multi-platform SDK support showcased across a full marketing site.