∞ forever components

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 motionclick

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 →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

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.

Working with an AI agent

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

Change badge color from #ff4d6d to #6366f1, 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.

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)
  • idle demo 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)

Known limitations

  • Idle demo cycle runs by default (real input takes over, resumes after a few idle seconds) — 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

bellnotificationbadgemicrointeractionclickrippleui-control

More UI Micro-interactions components

  • Add to Cart FlyProduct tile flings a mini clone in a bezier arc into a cart icon on click; badge count bumps with a spring bounce. Auto-cycles as demo.
  • 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 mockup with draggable list rows; pulling down reveals a teal arc spinner that fills and rotates, then triggers a skeleton-row flash on release.
  • 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.