Skip to content
siyo, home

scntix / siyocomponents with sound

Components that answer back

siyo is a component library with a sound engine built in. Buttons, dialogs and toasts answer with short sounds synthesized in your browser, so there are no audio files to ship.

npm i siyo
Get startedHear the sounds

Sound is on. Every control on this page plays its own sound, and the speaker in the top bar mutes them all.

Why sound

Every state already has a look. Now it has a sound.

A save, a delete or a failed upload changes a few pixels, often where nobody is looking. siyo gives each moment a short sound so it registers anyway, and keeps the visual cue, so nothing depends on sound alone.

  1. Confirmation you can hear

    Saves, sends and uploads land with a soft chime the moment they finish, wherever the eye happens to be.

  2. Refusals that stay polite

    Errors and blocked actions use muffled, falling tones. Clearly wrong, never shrill.

  3. Quiet by design

    41 of the 60 interface sounds are over in under a third of a second, and one switch silences all of them.

Files

All files

  • Mockup.fig
  • Notes.md
  • Export.zip

Try it: star a file, delete one and undo, switch folders, hide the sidebar, upload, or ring the bell. Each action plays the sound siyo pairs with it.

The components

Rounded surfaces, pill controls, one accent.

Everything below is live, and every state has a matching sound. Press, drag, type and right-click your way through it.

One token set in light and dark

Button

Button

Sounds: tap, warning

Input and switch

Input, Switch

Spatial audio

Place sounds in the stereo field

Sounds: type, toggle

Slider

Slider
840 Hz
60%

Sounds: scrub, rising with the value

Tabs

Tabs
Cues are synthesized with the Web Audio API when they play, so there are no sound files to download.

Sounds: tab

Toast

Toast

Short confirmations that clear themselves after three seconds. Hover one to hold it.

Sounds: save, warning, error, notify, dismiss

Alert

Alert

Changes are saved

Everything is up to date.

Connection is slow

Retrying in a moment.

Upload failed

The file couldn't be read.

Checkbox and select

Checkbox, Select
Notify me about

Sounds: tick, menu, option

Context menu

ContextMenu

No action yet

Sounds: context, option, remove

Dialog and popover

Dialog, Popover

Built on the native dialog element, so focus stays inside and Escape closes it.

Discard changes?

Your edits will be lost. This can't be undone.

Sounds: dialog, popover, toggle

Badge, tooltip and progress

Badge, Tooltip, Progress
ReadySyncingOfflineIdleStatuses always pair a color with a word
Level 348 / 100 XP

Sounds: tooltip, tick, reward

Accordion

Accordion

Each sound is a few oscillators with a fast envelope, built in the browser when it plays.

Yes. The speaker in the top bar mutes every sound, and the choice is remembered.

Sounds: expand

PlaygroundAll 17 components, with variants and craft notesOpen the playground

The sound library

211 sounds, and not one audio file.

Each one is a small recipe of tones, filtered noise and struck bells that your browser builds the moment it plays. Tap an orb to hear it.

  • Tap

    Actions · 80 ms

  • Switch

    Controls · 100 ms

  • Success

    Feedback · 1.1 s

  • Notify

    Notifications · 1.5 s

  • Send

    Actions · 300 ms

  • Remove

    Actions · 200 ms

  • Error

    Feedback · 250 ms

  • Reward

    Feedback · 1.0 s

Interface

60 sounds

The core set for navigation, controls, windows and feedback, the sounds siyo's components play.

Materials

80 sounds

Families with one character each: tactile presses, glass, liquid, metal, air and more.

States

71 sounds

Variations for the moments every app has: success, alerts, loading, typing, syncing and social.

Open the sound library

Search, tune any sound with five knobs and copy its code.

Under the hood

Synthesized, not sampled.

siyo ships recipes instead of recordings. The engine is a single file with no dependencies, and every sound on this page runs through it.

  1. Built at the moment of the click

    A sound is a recipe: a few oscillators, a burst of filtered noise, sometimes a struck bell. The Web Audio API builds it when the event fires, so there is nothing to download and nothing to decode.

    tap, the default button sound
    tap({tone, noise}){
  noise({f:2200, q:0.8, dur:0.012, vol:0.16});
  tone({f:260, to:880, glide:0.03, dur:0.08, vol:0.3, rev:0.08});
  tone({f:880, to:180, dur:0.05, at:0.025, vol:0.1});
}

  2. Five knobs reshape any sound

    Pitch, length, volume, reverb and brightness change a sound without touching its recipe. Try three of them on Success.

    1.00
    1.00
    0.00

  3. One room, one limiter

    Every sound passes through the same short room reverb and a limiter, so a chime and a click sit together like parts of one product, and sounds that overlap stay under control.

  4. It waits for permission

    Browsers only allow audio after a click, tap or key press, and siyo starts on that first gesture. Hover sounds stay silent until then. Volume and mute are one call each.

Get started

Add it once, then play a sound from any event.

  1. Install

    Add siyo with the package manager you already use.

    npm i siyo

  2. Play a sound

    Call siyo.play in the same handler as the action it belongs to.

    save.js
    import { siyo } from 'siyo'

saveButton.addEventListener('click', async () => {
  await save()
  siyo.play('success')
})

  3. Shape and control

    State sounds take options, any sound can be tuned, and volume and mute are one call each.

    options.js
    siyo.play('toggle', { on: true })    // state sounds take on or open
siyo.play('scrub', { pitch: 1.2 })   // tick and scrub take pitch
siyo.play('copy', { paste: true })   // copy or paste
siyo.tune('success', { pitch: 1.2, length: 0.8, volume: 1, reverb: 0.2, brightness: 1 })
siyo.volume(0.6)                     // 0 to 1
siyo.mute(true)                      // silence everything

Prefer a single file?

Copy siyo.js: the engine and all 211 recipes, with no dependencies. Import siyo from it and call siyo.play from any event.

Browse sounds

Tokens

Ten tokens, two themes.

Every component reads its colors from the same ten tokens. Flip the theme and the values below change with it, read straight from this page.

  • --bgPage background 
  • --fgText and the primary fill 
  • --surfaceTiles and wells 
  • --raisedControls on a surface 
  • --mutedSecondary text 
  • --lineBorders and dividers 
  • --ringTracks, rings and idle states 
  • --okSuccess 
  • --warnWarning 
  • --badError 

Questions

Before you add sound.

They are short and soft by design: 41 of the 60 interface sounds are over in under a third of a second, and hover sounds are nearly silent. siyo.mute(true) silences everything, and on this site the speaker in the top bar does the same and remembers the choice.

No. Each sound is a recipe of oscillators, filtered noise and struck bells that the Web Audio API builds the moment it plays. There is nothing to download, cache or decode.

Browsers only allow audio after a click, tap or key press. siyo starts its engine on that first gesture, so the first sound you hear is one you asked for.

Yes. Every sound takes five knobs: pitch, length, volume, reverb and brightness. In siyo.js a new sound is a short function that layers the same tone, noise and bell voices, and it sits next to the built-in ones.

Yes. Pass silent to a component to mute just that instance, for example a button that fires many times in a row.

Yes. Light and dark share one token set and components never hard-code a color. Switch the theme in the top bar and every component on this page follows.

No. Every control keeps a static cue, a color, an icon or a label, so state never lives in sound or motion alone.

Give your interface a voice.

Install siyo, wire one sound to one action, and listen to how it changes the feel of a click.

npm i siyo
Get startedOpen the playground
Made with Modulify