Slingshot Volume Slider
Requires projectile physics to set volume.
Tags:audiosliderphysics
Tech:vanilla-jscsscanvas
Live Demo
⚠️ Warning: This is an intentionally terrible UI pattern. Do not use in production applications.
Slingshot Volume Control
Volume: 50%
Test with Music
💃
Dance
0:00 / 0:00
Volume: 50%
🔊 Medium
Click and hold the volume icon to charge up power, then release to launch!
Where the ball lands on the volume bar determines your volume level!
⚠️ Physics and randomness make precise volume control nearly impossible!
Why This Control Is Terrible
User pulls back a volume icon like a slingshot and releases. A ball flies and lands on a random value. Icon tilts while charging. The angle and force determine volume, but it's completely unpredictable where the ball will land. There's no way to fine-tune the volume - you just have to keep shooting and hope for the best. Sometimes the ball bounces off the slider entirely.
UX Violations
- Violates user expectations and mental models
- Increases cognitive load and frustration
- May cause accessibility issues
- Breaks established design patterns
- Provides poor feedback and unclear states