Songder

An editorial experience exploring the music behind sports.

Next.js 14 React TypeScript Tailwind CSS Framer Motion

The problem

The soundtrack of sports is invisible. Every sport has its own sonic identity — the sacred drums of Muay Thai, the organ at Dodger Stadium, the tribal chants of soccer terraces — but nobody tells those stories together.

The approach

Songder is a digital magazine built as a web experience. Eleven chapters each explore a different sport’s relationship with music, and each chapter has its own visual identity — custom colors, typography, and mood designed to match the sonic world it covers.

Songder homepage with animated waveform and chapter grid

The chapters span from the ceremonial (Muay Thai’s Sarama) to the electric (NBA arena anthems) to the contemplative (sports played in silence). Each one is a standalone visual essay.

Chapter grid showing distinct visual themes per sport

How it works

Next.js 14 with the App Router handles routing and SSR. Framer Motion drives the scroll animations and page transitions. A chapter-theme system maps each chapter to its own color palette, font stack, and ambient mood. Audio playback is powered by Howler.js — so you can hear each sport’s soundtrack as you read about it.