UI Micro-interactions

Notification Bell

SVG bell swings and rings with a ripple wave on click; a red badge counter pops in with a springy bounce and increments each ring. Auto-cycles every 2 seconds.

svglight complexitymoderate motionclickmobile-ready

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →

When to use it

Notification icons, alert triggers, inbox or activity bell in nav bars or dashboards.

When not to

Passive display contexts — remove the auto-cycle loop before production use. Avoid where badge count semantics need real data wiring. Autonomous preview ends at first deliberate input and never resumes.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change badge color from #ff4d6d to #9b6450, increase swing angle from 16deg to 24deg in the swing array, and slow the auto-cycle interval from 2000 to 3000ms. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime. Autonomous preview ends at first deliberate input and never resumes.

Safe to edit

bell fill color (#ffd45c)
badge background (#ff4d6d)
swing angles array ([0,-16,14,-10,7,-4,0])
wave expansion scale (1.8)
ring animation duration (820ms)
autonomous preview until first deliberate input cadence (FIRST=450 / DEMO_EVERY=2600 / IDLE_BACK=3600 ms)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

visibilitychange pause/resume guard
prefers-reduced-motion check (reduce var)
Web Animations API animate() calls on bell + clap + wave + badge
IIFE wrapper + click listener on wrap
theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)
demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions

Known limitations

autonomous preview cycle that stops at first deliberate input runs by default (real input takes over permanently for this visit) — remove the demo block for purely on-demand interaction
Badge div lacks aria-live region for screen reader announcements
SVG bell path hardcoded — not easily restyled beyond fill color
State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

bellnotificationbadgemicrointeractionclickrippleui-control

More UI Micro-interactions components

Add to Cart FlyNative Add button flings a product clone into a cart; first input cancels unfinished attract flights, while each manual action keeps its full 680ms flight…
Copy ConfirmCopy icon morphs to a drawn-stroke checkmark with a green button flash and a "Copied!" toast on click; auto-cycles as a demo loop.
Swipe Card StackTinder-style draggable card stack — drag the top card left/right to reveal NOPE/LIKE stamps; fling-away animates it off-screen and cycles to the next card.
Pull to RefreshA phone-frame list supports pointer/touch pull and a native Refresh button. First input stops attract refreshes; manual refresh completes its spinner, row…
Accordion ExpandThree FAQ panels smoothly expand and collapse with a CSS height transition; a chevron rotates 180 degrees to indicate open state. Auto-cycles as demo.
Tooltip PopHeart icon button springs a mint-green tooltip above it on hover with a cubic-bezier spring pop; click triggers a subtle press-bounce via Web Animations API.