Behind the Sounds
Interface Craft Onboarding
I recently got to collaborate with Josh Puckett on the sound for his new project Interface Craft. He designed a really fun onboarding experience where you get to customize your library card before slotting it in to enter the site. From there, founding members get a couple of bonus gifts: a scratch-to-reveal card with v0 credits, and one free month of Claude Pro from Anthropic.
After connecting, it felt like a natural opportunity to add an extra layer of delight with some custom sound design.
Before a single sound was made, I had Josh complete a quick Sound Cloud Exercise, a simple FigJam board that helps bring a common language and alignment on the overall sound direction. For Interface Craft, we landed on warm, modern, and friendly. The interaction sounds needed to feel physical and real, while the payoff moments could lean into something more musical.
Below you'll find a breakdown of the sound layers behind the onboarding. Click any layer to hear it soloed, or hit Play All to hear how the full sequence sits together.
Library Card Interaction
This first interaction has three beats:
- A quick snap if the pull down doesn't pass a certain threshold.
- A bright chime and tactile click once the card slots in.
- A warm full chord that sustains into the next step.
Snap-back
This sound is a variation of the cork pop sample from the click-in sequence below. It's snappy yet subtle and lets the user know there's more to do.
Slot-in
After seeing this interaction, the first thing that came to mind was the sound of getting a library book stamped. While there's no stamping on screen, it felt like the right place to start.
I grabbed my mic, found a date stamp lying around, and started recording. While I had everything set up, I also grabbed a few Analog capture cards and recorded some swipe sounds.
Once these tactile sounds were cleaned up and working, I added a short melodic chime. This was created using a ping-pong drum loop I found and resampled into a brighter mallet-like instrument. With these, I'm using the cork pop sound (mentioned above) in two ways: reversed and layered with the swipe for some added movement, and straight with the chime for a little extra punch.
Welcome Chord
Josh wanted something symphonic but not too orchestral here. I ended up layering woodwind, string, and choir synth pads for texture, then added a reverb-soaked variation of the "slot-in" chime to give the moment a little more forward momentum.
Scratch to Reveal Interaction
This interaction is made up of the tactile scratches and the reveal sound.
Scratches
I wanted real source material here, so again I set up my mic and recorded myself scratching a few gift/reward cards with a quarter. With repeated interactions, a single sound can get old fast. So, after another round of editing, I ended up with three variations to cycle through at random.
Reveal Chord
This sound is a variation of the welcome chord from the first step. It features similar layers, but with different chord voicing and an added shimmer to match the holographic feel of the card. The goal was for it to feel familiar but still distinct.
Claude Gift Animation
This step was a last-minute addition and needed to stay simple and in line with Anthropic's brand. I found a few samples and molded them into a tonal pop as the gift bounces up, a whoosh as it spins, and a short hit as it lands.
Sound is easy to overlook, especially in digital products, but I hope moments like these show how much it can add. A huge thanks to Josh for bringing me in on this one! Please check out Interface Craft and give him a follow @joshpuckett.
If you have any questions or are looking for a sound design collaborator, feel free to reach out on Twitter (X) @neversitdull.