∞ forever components

Buttons & Toggles

Thanos Snap Delete

Red DELETE button that disintegrates into ~200 drifting dust particles on click. Particles drift right and fade; a Restore link resets the state.

cssmedium complexityintense 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

Destructive action confirmations (delete, remove, clear) where dramatic feedback reinforces irreversibility. Fun product demos or portfolio pieces.

When not to

Frequent-action buttons or flows where users repeat the action often — the animation has no auto-reset. Avoid in low-motion contexts where reduced-motion is common.

Working with an AI agent

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

Change the button label from 'DELETE' to 'ERASE', set particle colors to '#00eaff' and '#0080ff', and increase the grid to 30 cols and 15 rows for denser dust. 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

  • button label (innerHTML)
  • particle grid density (cols=20, rows=10)
  • particle colors (#ff4757, #ff6b81, #ffffff)
  • velocity bias (vx, vy values)
  • particle decay rate (0.015–0.035 range)
  • idle demo cadence (LEAD=500 / DEMO_EVERY=4000 / REFORM_AFTER=1300 / IDLE_RESUME=3600 ms)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • prefersReducedMotion guard (skip particle creation)
  • cancelAnimationFrame on reset
  • isSnapping guard to prevent double-fire
  • idle demo snap + re-form (the same doSnap()/doReform() the click and Restore paths run)
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • No visibility-change pause — particles keep animating if tab is hidden during snap
  • Particle positions are DOM-absolute, so resizing mid-snap causes misalignment
  • Restore button lacks aria attributes for screen readers

buttondeleteparticlesdisintegratedustmicrointeractionclick

More Buttons & Toggles components

  • Magnetic ButtonDark pill button drifts in an idle orbital float; cursor proximity pulls it magnetically with a label inner-parallax and emerald-to-copper glow on hover.
  • Gooey Liquid TogglePill toggle where an SVG goo-filtered blob stretches and merges as it slides from off to on, shifting grey to magenta. Auto-cycles as demo.
  • Morphing Action FABGradient FAB whose plus icon rotates 135° to an X on click, fanning six icon buttons outward in a staggered radial spring animation. Auto-cycles in demo mode.
  • Material RippleDark rounded button that spawns an expanding ink ripple from the tap point; idles by firing ripples from random positions every 1.5 s.
  • Neon Glow PulseAmber pill button on near-black that breathes a bright neon bloom via opacity pulse on a pseudo-element; hover shifts background and text color.
  • Jelly PressAurora-gradient button squashes and stretches with a spring keyframe animation on click; auto-cycles idle squish every 2.1s to stay alive at rest.