Melograph
High-performance digital experiences and motion design.
Visit Live Site ↗Melograph Studio needed a web presence that matched the energy of their creative output. The site serves as both a portfolio and a statement piece — every scroll, every transition, every hover is intentional. It had to load fast, feel premium, and leave an impression.
The studio wanted a site that felt like a reel — cinematic and fluid — but also functioned as a practical portfolio clients could browse. Balancing heavy motion design with performance and SEO was the core tension. The site also needed a CMS-backed project feed that non-technical team members could update.
I used Next.js for SSR and SEO, with GSAP ScrollTrigger for scroll-driven animations that only activate in viewport. A Neon serverless Postgres database powers the project feed. Critical CSS is inlined, fonts are subset, and images use blur-up placeholders. Every animation is GPU-composited — no layout thrashing.
Set the visual language: dark, editorial, motion-forward. Every interaction references film — cuts, reveals, dissolves.
Next.js App Router with SSR for SEO. Project data lives in Neon — editable without touching code.
GSAP timeline for page-load choreography. ScrollTrigger scrubs each section in viewport only — no wasted frames.
Lighthouse audits after every major change. Subset fonts, defer non-critical JS, preload hero image.
A studio's website is its handshake. It has to say everything before a single word is read.
90+ Lighthouse performance score
Scroll-driven cinematic transitions at 60fps
Self-service project management via Neon backend