∞ forever components

Buttons & Toggles

Wax Seal Button

A parchment plaque with an engraved register (accession, object, destination) and a Pompeii-red wax-seal button: the wax disc sinks on press, a relief-light sweep runs while it seals, then the face turns to plaque with the disc impressed and reads 'Sealed'. A bronze mono line records the state.

csslight complexitysubtle 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

Commit actions in archival, legal, conservation or records interfaces — sign, seal, transfer, approve — where one irreversible act deserves weight.

When not to

Frequent or reversible actions, or screens that already carry another seal button (one per view).

Working with an AI agent

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

Edit the register rows and the button labels in set() ('Seal the record' / 'Sealing' / 'Sealed'), the phase lengths DOWN=200, BUSY=1500, DONE=2000, GAP=1800, and the pigment via --ws14-pompeii; keep Marcellus for the eyebrow and the body face inside the control. 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

  • register rows (.ws14-reg) and the eyebrow text
  • labels and status lines in set()
  • phase lengths (DOWN, BUSY, DONE, GAP)
  • pigments (--ws14-pompeii primary, --ws14-olive, --ws14-bronze)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper
  • aria-busy + disabled while sealing and sealed
  • the sweep is the only sheen (2.6 s, busy state only) — no glow, no gradient face
  • prefers-reduced-motion guard (no sweep, no demo; a click still seals)
  • visibilitychange pause
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Marcellus and Atkinson Hyperlegible render only if installed — the stacks fall back to Georgia and the system sans
  • The demo seals itself every few seconds; set demo=false in a product

buttonsealclassicalparchmentengravedcommitbusyplaque

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.