Hold to Confirm

Press and hold: a ring fills, the button compresses, release drains it, completion bursts.

Animated · Full motion: idle animation, physics and effects. animated (default)

A deliberate-action button for publishing, payments or deletions. The fill rate and drain rate differ so it feels like pressure building and leaking.

Installation

$ npx shadcn@latest add https://guetix.com/r/hold-to-confirm.json

Uses the shadcn CLI. It creates components/guetix/hold-to-confirm.tsx and installs nothing else.

example.tsx

import { HoldToConfirm } from "@/components/guetix/hold-to-confirm";

export default function Example() {
  return <HoldToConfirm />;
}

PublishIrreversible actionsGames

Prop	Type	Default	Description
label	string	—	Button label.
duration	number	1400	Hold time (ms).
onConfirm	() => void	—	Fired when complete.
color	string	"#4ade80"	Ring color.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).