logo svelte /motion v0.6.7
FIG-001/ ARMED

archive armed button.

A quiet row action that becomes intentional on demand: hover exposes the archive icon, first click arms it, and AnimatePresence springs a compact confirm button into place. Arm another row to watch the previous one eject.

  • The WOW behavior is the small archive icon blooming into a labeled confirm button, keeping the row calm until the user shows intent. Archived rows flip the same slot into an armed unarchive action.
  • AnimatePresence owns the confirm button mount and exit, while the row uses whileHover and spring transitions for tactile feedback.
  • The armed state auto-disarms after a short timeout, so an abandoned destructive action never stays primed.
↩ all examples
wow · icon blooms into confirm mode · live running source

Shared insight

Launch notes

Saved thread

Pricing objections

Team highlight

Retention metrics

category · armed
sheet · sheet 01 / 03
⟳ to re-run
FIG-002/ WAIT

delete armed + wait.

Each delete row arms on first click, locks itself behind a visible countdown, then swaps into the final destructive confirm state without resizing the control. Arming a different row cancels the first countdown.

  • The WOW behavior is the row becoming its own safety mechanism: click once to arm, wait for the timer, then click again to confirm. Arming a second row cancels the first row's countdown.
  • A keyed motion span swaps trash, spinner, and success states so each icon gets a crisp entrance instead of popping in place.
  • Fixed height and reserved trailing space keep the button steady while countdown text changes.
↩ all examples
wow · safety timer without layout shift mode · live running source
category · wait
sheet · sheet 02 / 03
⟳ to re-run
FIG-003/ VIDEO

recording stage.

A merged shared-insight list for demos, posts, and short design videos: archive and delete live beside each other, with delete hiding archive while it is armed.

  • The stage keeps the shared-insight row format while combining archive and delete into one stable action cluster.
  • Archive arms in its own slot and leaves delete visible, so the safer secondary action never disappears during archive confirmation.
  • Delete clears any armed archive state, hides the archive control, counts down, and then unlocks the final destructive click.
↩ all examples
format · video-ready mode · live running source

Shared insight

Launch notes

Saved thread

Pricing objections

Team highlight

Retention metrics

category · video
sheet · sheet 03 / 03
⟳ to re-run