JEFFBUILDS

SHEET 02-ECASE STUDY — BACK TO ALL WORK

Synapt1k
Sounds.

An electronic music artist's home on the web. Not a store — a catalog you can walk through: every release in a 3D archive, kept current by Spotify, with visuals that move to the music.

The brief

An artist with a growing catalog and a strong identity — dark electronic music for night drives, workouts, and headphones after midnight — needed one place that holds every album, EP, and single, stays current without anyone updating it by hand, and feels like the records do. A Linktree page was not going to cut it.

The build

The catalog is the interface. Releases live in a spatial archive you can enter and drift through by mood, and the index underneath is synced live from Spotify, so a new release shows up on the site the day it lands. Videos get a featured-video hero. The visuals react to the audio, with several shader presets, and everything respects reduced-motion settings and scales down for phones.

  • 3D spatial archive of the full catalog — 23 releases across two eras at launch
  • Live Spotify sync: the index updates itself, with preview playback
  • YouTube integration with a featured-video layout for the Videos sheet
  • Audio-reactive visualizations built on React Three Fiber, with shader presets
  • Reduced-motion support and mobile performance tuning so it runs on a phone
SYNAPT1K SOUNDS music page, full scroll — the Spatial Archive header and the release index
01 — The Music sheet, full scroll. Hover to walk the page.
SYNAPT1K SOUNDS — “Spatial Archive” header with the Enter 3D Archive panel and live Spotify sync SYNAPT1K SOUNDS on a phone
02 — The archive entry on desktop, and the same page on a phone, where most listeners find it.

Revisions

RevStageDescription
ADirectionNight-signal identity — dark, type-led, the archive as the interface rather than a list of links
BDesignSpatial archive concept, mood constellations, release index with signals and eras
CBuildNext.js on Vercel, React Three Fiber visuals, Spotify and YouTube integrations, shader presets, reduced-motion paths
DLaunchLive at synapt1k.com; the catalog keeps itself current from Spotify

The result

A catalog that stays current on its own and a site that feels like the music. Listeners get one place for every release, every video, and every streaming link, and the artist gets a home that does not need a webmaster every time a track drops.

Got a project that
needs a home?

Free estimate — replies within one business day

Start a project