Colter Bane
A single-page artist site for a singer-songwriter's debut single, featuring an interactive vinyl player, vintage Americana typography, and film-grain texture.
The Brief
Colter Bane is a singer-songwriter out of Brooklyn by way of eastern Kentucky. He needed a site for his debut single "Ridge Line" — something that felt like the music: warm, unhurried, honest. One page. One single. Make it count.
Typography as Identity
The visual identity comes almost entirely from type. Cormorant Garamond handles the artist name, song title, pull quote, and one-liner — light weight with generous tracking, like letterpress on old paper. Alegreya SC serves as the small-caps voice for labels and navigation. IBM Plex Sans at weight 300 handles the bio.
The type scale uses CSS custom properties with clamp() at every step, built on a minor-third ratio. No breakpoint jumps — the hierarchy scales fluidly from mobile to widescreen.
The Vinyl Player
The centerpiece is an interactive record player. A 300px vinyl disc sits behind a square album sleeve. Press play and the sleeve slides left, the disc slides right, revealing the spinning record underneath. The disc rotates at 3 seconds per revolution via Framer Motion's animate chained recursively.
The vinyl is rendered entirely in SVG — 30 concentric groove rings at 3% white opacity, a radial gradient shimmer, and a circular album art label at 48% diameter. A static conic gradient overlay simulates the light reflection that sweeps across a real record — two soft white arcs that stay fixed while the disc spins underneath.
Controls: a circular play/pause button, a 2px progress bar with click-to-seek and arrow-key support, track name in Cormorant italic, timecode in tabular-nums IBM Plex.
Below the Fold
A pull quote from Americana Highways in large Cormorant italic, with a ghosted open-quote mark (8rem, 8% opacity) positioned above. The bio opens in Alegreya SC small caps before shifting to IBM Plex — a typographic wink from book design. Thin rules animate in with a scaleX transition from center. The one-liner — She was every road that led me home. — sits framed between them.
The entire page is covered by a film-grain overlay: SVG feTurbulence noise tiled at 200px and set to 3.5% opacity. When music plays, an ambient glow layer breathes on a 6-second cycle. Every section fades in on scroll with staggered delays. It's all subtle enough that you feel it more than you see it.
Technical Details
| Layer | Detail |
|---|---|
| Framework | React 19 — two components, three useState hooks, no router |
| Animation | Framer Motion 12 — scroll-triggered fades, staggered reveals, recursive vinyl spin |
| Styling | CSS custom properties — minor-third clamp() type scale, no preprocessor |
| Typography | Cormorant Garamond, Alegreya SC, IBM Plex Sans via Google Fonts |
| Audio | HTML5 <audio> with preload="metadata", click-to-seek, keyboard controls |
| Texture | SVG feTurbulence film grain at 3.5%, radial ambient glow with breathing animation |
| Build | Vite 7 |
| Deploy | GitHub Pages at colterbane.com |
