​
Effects

SBCanvas includes built-in effect methods on the root object. No imports or setup needed.

​
Sound

Play an audio file with optional volume (0 to 1): 
SBCanvas.sound('/sounds/alert.mp3', 0.8);
SBCanvas.sound('https://cdn.example.com/ding.wav'); // defaults to volume 1.0
Returns an HTMLAudioElement or null if audio is muted.

​
Animate

Apply a CSS animation class to an element. The class animate-{name} is added, then auto-removed on animation end: 
SBCanvas.animate(element, 'bounce');
SBCanvas.animate(element, 'slide_up');
SBCanvas.animate(element, 'fade');

​
Shake

Shake an element with configurable intensity (pixels): 
SBCanvas.shake(element);          // default 5px
SBCanvas.shake(element, 10);     // stronger shake

​
Toast

Show a temporary toast notification: 
SBCanvas.toast('Alert triggered!');
SBCanvas.toast('Combo x5!', 5000); // custom duration (ms), default 3000

​
Confetti

Trigger a confetti burst: 
SBCanvas.confetti();
SBCanvas.confetti({ count: 150, spread: 80, duration: 3000 });
Options:
OptionDefaultDescription
count80Number of confetti pieces
spread60Horizontal spread
duration2500Animation duration (ms)

​
Example: Full Alert with Effects

SBCanvas.activities.on('tip', (activity) => {
  const el = document.getElementById('tip-alert');
  el.textContent = `${activity.username} tipped $${activity.amount}!`;
  el.classList.remove('hidden');

  SBCanvas.sound('/sounds/tip.mp3', 0.7);
  SBCanvas.animate(el, 'bounce');

  if (activity.amount >= 50) {
    SBCanvas.confetti({ count: 200, duration: 4000 });
    SBCanvas.shake(document.body, 8);
  }

  SBCanvas.setTimeout(() => {
    SBCanvas.animate(el, 'fade');
    SBCanvas.setTimeout(() => el.classList.add('hidden'), 500);
  }, 5000);
});

​
Example: Combo Feedback

let combo = 0;

SBCanvas.activities.on('subscribe', () => {
  combo++;
  SBCanvas.toast(`Sub combo x${combo}!`);
  SBCanvas.shake(document.getElementById('counter'), combo * 2);

  if (combo % 5 === 0) {
    SBCanvas.confetti({ count: combo * 10 });
  }
});