Sounds

Beep Sounds

Beep sounds are perfect for notifications, alerts, and feedback in your app. These 24 sounds range from subtle pings to attention-grabbing alerts.

Usage

// Play a beep sound
play ~beep-pop

// Play with volume control (0-100)
play ~beep-alert -volume:80

Available Beep Sounds

Click the play button to preview any sound and copy its tag. You can also click the sound name to copy it.

Examples

Notification System

// Different sounds for different notification types
if $notification-type = "error"
  play ~beep-rejected
elif $notification-type = "warning"  
  play ~beep-alert
elif $notification-type = "success"
  play ~beep-brightpop
else
  play ~beep-pop
end

Loading Feedback

// Play sustained tone while loading
play ~beep-holdtone
load-data
play ~beep-brightpop  // Success sound when done

Tap Sounds

Tap sounds provide tactile feedback for button clicks and user interactions. These 24 sounds help users feel connected to your app’s interface.

Usage

// Play a tap sound
play ~tap-click

// Play on button press
button "Submit" => play ~tap-professional

Available Tap Sounds

Click the play button to preview any sound and copy its tag. You can also click the sound name to copy it.

Examples

Button Types

// Primary action button
button "Save" -primary =>
  play ~tap-professional
  save-changes

// Secondary button  
button "Cancel" =>
  play ~tap-muted
  close-dialog

// Destructive action
button "Delete" -danger =>
  play ~tap-metallic
  confirm-delete

Interactive List

// Play different sounds for different list items
list $items => item
  row =>
    play ~tap-click
    select-item item

Toggle Switches

// Different sounds for on/off
toggle $setting => value
  if value
    play ~tap-crisp1  // On
  else
    play ~tap-crisp2  // Off
  end

Event Sounds

Event sounds provide clear audio feedback for important app events like success, errors, and task completion. These 4 sounds help users understand what’s happening in your app.

Usage

// Play event sounds
play ~event-success
play ~event-error

Available Event Sounds

Click the play button to preview any sound and copy its tag. You can also click the sound name to copy it.

Examples

Form Submission

submit-form => result
  if result.success
    play ~event-success
    notify "Form submitted successfully!"
    navigate-to "/thank-you"
  else
    play ~event-error
    notify "Please check your information"
    highlight-errors result.errors
  end

File Upload

upload-file $file => status
  if status = "uploading"
    show-progress
  elif status = "complete"
    play ~event-complete
    notify "Upload finished!"
  elif status = "cancelled"
    play ~event-cancel
    notify "Upload cancelled"
  elif status = "error"
    play ~event-error
    notify "Upload failed"
  end

Game Achievements

// Achievement unlocked
if $score > $high-score
  play ~event-success
  show-achievement "New High Score!"
  set $high-score to $score
end

// Level complete
if $level-complete
  play ~event-complete
  show-results
  unlock-next-level
end

Process Monitoring

// Long running process
start-process => 
  show-loading "Processing..."
  
process-complete =>
  play ~event-complete
  hide-loading
  show-results

process-error => error
  play ~event-error
  show-error error.message

Best Practices

1. Be Consistent - Use the same sound for similar events across your app
2. Don’t Overuse - Reserve event sounds for important moments
3. Consider Context - Error sounds in a game might be different than in a business app
4. Test Volume - Event sounds are often louder, so test at different volumes

Slide Sounds

Slide sounds are perfect for transitions, swipe gestures, and moving between screens. These 6 sounds add smooth audio feedback to motion in your app.

Usage

// Play a slide sound
play ~slide-paper

// Play during navigation
navigate-to "/next-page" => play ~slide-network

Available Slide Sounds

Click the play button to preview any sound and copy its tag. You can also click the sound name to copy it.

Examples

Page Transitions

// Swipe between pages
swipe-left =>
  play ~slide-paper
  show-next-page

swipe-right =>
  play ~slide-paper
  show-previous-page

Tab Navigation

// Tab switching with different sounds
tab "Home" => 
  play ~slide-network
  show-home

tab "Profile" =>
  play ~slide-network  
  show-profile

tab "Settings" =>
  play ~slide-metal
  show-settings

Reveal Animations

// Magical reveal
button "Show Secret" =>
  play ~slide-magic
  animate-reveal $secret-content

Drawer/Panel Controls

// Sliding drawer
toggle $drawer-open => open
  if open
    play ~slide-metal
    slide-in $drawer
  else
    play ~slide-metal
    slide-out $drawer
  end

Cut/Crop Operations

// Image cropping
button "Crop" =>
  play ~slide-scissors
  apply-crop $image
  
// Text trimming  
button "Trim" =>
  play ~slide-scissors
  trim-whitespace $text

Animation Timing

Slide sounds work best when synchronized with visual animations: