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:

// Coordinate sound with animation duration
animate $panel -slide-in:300ms =>
  play ~slide-network
  
// Play sound at animation midpoint
animate $card -flip:600ms =>
  wait 300ms
  play ~slide-magic

Best Practices

1. Match Sound to Motion - Choose sounds that match the visual movement
2. Consider Speed - Faster animations need shorter sounds
3. Direction Matters - You might use different sounds for left vs right
4. Don’t Overdo It - Not every transition needs a sound