∞ forever components

UI Micro-interactions

Volume Slider Pulse

Auto-cycling volume slider with a glowing thumb and 13 spring-bouncing equalizer bars that react to slider position; numeric readout counts 0–100.

canvasmedium complexitymoderate motionpointer

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

Audio player UIs, media controls demos, ambient dashboard widgets showing dynamic range or activity.

When not to

Contexts requiring a real interactive slider — thumb position is auto-driven and cannot be user-controlled without rewriting drivePos().

Working with an AI agent

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

Change the accent color from #A9D22D to #C0B459, increase bar count to 18 (NB=18), and slow the slider cycle by changing t*0.018 to t*0.012. 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

  • accent color (AC='#A9D22D')
  • bar count (NB=13)
  • slider speed (t*0.018)
  • bar max height (H*0.32)
  • nudge boost on click (nudge=1.8)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • DPR-aware canvas sizing
  • visibilitychange pause/resume
  • prefers-reduced-motion static fallback
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Slider is auto-driven only — no real user drag control
  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • Random flicker on bars causes minor frame variance

slidervolumeequalizercanvasglowui-controlspring-physics

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.
  • Notification BellSVG 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…
  • 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.