Sand Signature Dialog

A responsive canvas signature pad with animated sand particle effects when a signature is cleared.

Installation

1
Install the component:
npx shadcn@latest add https://ui.amines.fun/r/sand-signature-dialog.json

Usage:

jsx

app/page.jsx

1<SandSignatureDialog onSave={(dataUrl) => console.log("Signature:", dataUrl)} />

Props

Prop	Type	Default	Description
open	boolean	true	Show or hide the signature dialog.
onClose	() => void	undefined	Called by the close button or when Escape is pressed while the dialog is open.
onSave	(dataUrl: string) => void	undefined	Adds a Save button and receives the completed signature as a PNG data URL.
onSignatureChange	(dataUrl: string \| null) => void	undefined	Called after a stroke finishes or the signature is cleared, with a PNG data URL when available.
onClear	(event: { animation: ClearAnimation }) => void	undefined	Called when the Clear action starts and receives the active animation preset.
clearAnimation	"thanos" \| "gravity" \| "vortex" \| "fade" \| "implode"	undefined (uses internal animation state)	Controlled clear animation preset. When omitted, the component manages the active preset internally.
defaultClearAnimation	"thanos" \| "gravity" \| "vortex" \| "fade" \| "implode"	"thanos"	Initial clear animation when the preset is uncontrolled.
onClearAnimationChange	(animation: ClearAnimation) => void	undefined	Called when the footer animation picker selects another preset.
animationOptions	Array<ClearAnimation \| { value: ClearAnimation; label: string }>	Five built-in presets: thanos, gravity, vortex, fade, and implode	Presets available in the footer picker. Each value may be a preset string or an object with a custom label.
showAnimationPicker	boolean	true	Show the footer control for cycling through clear animation presets.
clearAnimationDuration	number	1250	Duration of the particle clear effect, in milliseconds.
maxParticles	number	2200	Maximum number of sand particles generated for a clear effect (the implementation enforces a minimum of 100).
particleSize	number	1.15	Base sand particle radius in CSS pixels (the implementation enforces a minimum of 0.35).
height	number \| string	250	Signing surface height. Numbers are converted to pixels; strings are used as CSS height values.
width	number \| string	420	Dialog width. Numbers are converted to pixels; strings are used as CSS width values, with a 100% max width.
title	string	"Sign the contract"	Heading displayed above the signing surface and used as the dialog's accessible label.
clearLabel	string	"Clear"	Text displayed on the Clear action.
saveLabel	string	"Save"	Text displayed on the Save action when onSave is provided.
strokeColor	string	"#292929"	CSS color used to draw the signature ink.
strokeWidth	number	2.1	Signature ink width in CSS pixels.
padBackground	string	"#FAFAFA"	CSS background color of the signing surface.
exportBackground	string	undefined (transparent PNG)	Optional CSS color painted behind the signature when exporting. Omit it to export a transparent PNG.
disabled	boolean	false	Prevent drawing and clear/save actions, and dim the signing surface.
readOnly	boolean	false	Prevent drawing and clearing while leaving an existing signature available to save.
dismissOnEscape	boolean	true	Call onClose when Escape is pressed while the dialog is open.
className	string	""	Additional classes applied to the dialog card.
padClassName	string	""	Additional classes applied to the signing surface wrapper.
canvasClassName	string	""	Additional classes applied to the signature drawing canvas.
style	React.CSSProperties	undefined	Inline styles applied to the dialog card; these can override its computed width.
padStyle	React.CSSProperties	undefined	Inline styles applied to the signing surface, including overrides for its size and background.