Music Director Portfolio

Project Overview

A high-impact 3D portfolio site for a film music director, built to visually represent the client's creative identity and attract directors and producers. The site features a particle universe hero built with Three.js, an animated vinyl record that plays audio previews, and scroll-driven GSAP transitions between sections.

Key Creative Features

• Particle Universe Hero — 50,000+ GPU-rendered particles forming the client's name in 3D space, animated with custom GLSL vertex shaders.
• Vinyl Record Audio Preview — Interactive vinyl record component that spins and plays 30-second previews of the client's film compositions on click.
• Scroll-Driven Transitions — GSAP ScrollTrigger moves between discography, filmography, and contact sections with cinematic ease curves and pinned scroll animations.
• Lottie Fallback — For devices without WebGL support, Lottie animations replace the Three.js components — no broken experience for any user.
• 98/100 Lighthouse Score — Despite heavy 3D assets, lazy loading, GLSL shader optimization, and CDN delivery achieve near-perfect Core Web Vitals.

Tech Stack

Next.js for SSR and routing, Three.js for 3D WebGL rendering, GSAP for scroll animations, Framer Motion for UI transitions, Lottie for fallback animations, and Tailwind CSS for layout.