Motion-Rich Studio Landing Site (Next.js)

Overview

A polished single-page marketing/landing experience built on the Next.js App Router, leaning heavily on scroll-driven motion and micro-interactions. An internal build used to refine a high-end studio web aesthetic.

Why It Exists

Created to push a more cinematic, motion-led marketing-site style and to standardize a reusable front-end baseline (App Router + Tailwind + Framer Motion + smooth scrolling) for future client landing pages.

What We Built

A Next.js 14 App Router project with a Tailwind design system and PostCSS pipeline, animated with Framer Motion and a Lenis smooth-scroll layer for momentum scrolling. The page composition lives under app/ with a public asset set, optimized fonts via next/font, and tailwind-merge for clean conditional styling.

Technologies & Approach

TypeScript throughout, Next.js 14, React 18, Tailwind CSS, Framer Motion for entrance and scroll animations, and Lenis for inertial scrolling. Structured for a Vercel deployment.

Outcome / Impact

A reference-quality animated landing build that validated a smooth-scroll + Framer Motion pattern reusable across marketing engagements.

Capabilities Demonstrated

• Modern Next.js App Router front-end engineering
• Scroll-driven and micro-interaction motion design
• Reusable Tailwind design-system scaffolding