Notification bell · pendulum physics · Web Audio
More news,
bigger swing.
Most notification bells wiggle with a fixed animation. This one is a real pendulum: tap it or send a notification and it swings, the clapper lags behind, and every time it hits the side you hear a bell tone made right in your browser. Five notifications swing harder than one. Turn on Do not disturb and it just shivers.
No notifications yet. Tap the bell or send one.
How it swings
A pendulum, not a keyframe
The bell is a damped pendulum: its angle speeds up towards the middle and slows down at the ends, losing a little energy every swing. The clapper is a second, lighter pendulum hanging inside, so it lags behind and strikes the rim on its own timing.
Where the sound comes from
Built with Web Audio
Each strike builds a bell tone from eight sine waves at the uneven ratios real bells have, each fading at its own speed. A harder hit plays louder and brighter. No audio file is downloaded.
Use it on your site
Hook up real events
Call ring(1) when a message arrives and the bell does the rest. The badge, Do not disturb and Mark all read are plain buttons with labels, so screen readers and keyboards work. Reduced motion keeps the bell still.