> case files / insonified
Case file 009 · Website + sound
Insonified
A record label in Pittsburgh, on a page you play instead of read.
LIVE
A new label with no roster to show yet. It needed to feel like a real place for artists before there was a catalog to point to.
To insonify a space is to fill it with sound. So the page is a room: half shadow, half light, with a sound source at the seam you can hold down to fill it.
Live at insonified.com: one page, record-groove rings that bend under your cursor, a sound made in the browser, and one address for demos.
01The context
Insonified is a new record label based in Pittsburgh. The name comes from an old word: to insonify a space is to fill it with sound.
The label’s mark was already set: a circle split into dark and light, sound arcs on the lit side and a red dot at the center. The site had to grow out of that mark, not sit next to it.
02The problem
Most label sites are a logo, a roster grid and a contact form. Without a roster yet, that layout is mostly empty boxes. And a page about sound that makes no sound says less than it should.
The page needed to do one job, get demos sent to the right inbox, and leave people with a feeling about the label they’d remember.
03The room
The whole screen is the mark, blown up. The left half is shadow, the right half is light, and the red dot sits on the seam. Everything else is four small labels in the corners: the name, the city, what it is, and where demos go.
- ShadowWho is this? INSONIFIED, top left. Record label, bottom left.
- LightWhere? Pittsburgh, PA, top right.
- The ringsIs this alive? Grooves spread from the dot and bend as your cursor crosses them.
- The red dotWhat does it sound like? Hold it, or hold Space on it, and the room fills.
- Demos →How do I send music? demos@insonified.com, bottom right.
04The sound
There’s no audio file. The sound is built in the browser when you hold the dot: a few detuned tones through a low filter that slowly breathes, then a reverb so it sounds like it’s filling a real room. While you hold, the filter opens and the room gets brighter. Let go and it settles back.
Nothing plays until you ask for it. The page is silent by default, with a quiet “hold” beside the dot.
05The rings
Each ring is a string pinned at the seam, 520 points per half, and each point springs toward where your cursor pushes it. Between the rings are fine grooves with a little wiggle cut into them, like music in a record, and the whole thing turns slowly, the way a record does.
The spin went through four rounds. Every version felt too fast once it had been on screen for a minute, so it was halved, and halved again, three times. Now you notice it’s turning only if you watch.
06The system
Three colors and two typefaces. Outfit in its heaviest weight says the name; JetBrains Mono, small and tracked out, says everything else.
The dark half and all type on the light half.
The lit half and the rings.
Only the dot. Nothing else is red.
07Key decisions
One page
No roster yet, so no roster page. Everything fits on one screen, and the only thing to do is listen or send a demo.
Chose: one screen ·Silent until you ask
The sound starts only while you hold the dot. Nobody gets surprised by audio at work.
Chose: press and hold ·The rings react, the light stays put
An early version moved the light with your cursor. It made the mark wobble. Now the split stays fixed and the rings do the moving.
Chose: a fixed mark ·Made in the browser
The sound is synthesized live, so there’s no file to download and it can respond to how long you hold.
Chose: Web Audio ·Keyboard and calm modes
Hold Space on the dot to play it without a mouse. With reduced motion on, the rings stand still.
Chose: everyone can play it ·08The site, up close
09Timeline
The landing page goes up. That night, the room learns to listen: hold the dot to hear it.
The rings start responding to the cursor, spin like a record, and get grooves cut into every line. The spin is slowed three times.
Launch details: a share image, search tags, icons, and a 404 with Monty split into shadow and light.
The first artists, and a page for each of them.
10What Swamp Kitten did
- Website: concept, design and build of the one-page room
- Interaction: the bending rings, record grooves and slow spin
- Sound: the hold-to-play room, built live in the browser
- Writing: four labels and one email address, nothing more
- Details: share image, search tags, icons, keyboard support, reduced motion, a Monty 404, and hosting on Cloudflare