Account

Originals

Creative

Shatter Button

The click is handled at once; the break is only the reply. For destructive or celebratory actions where a little drama helps.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal
npx @galactrex/ui add shatter-button

Usage

Example
import { ShatterButton } from "@/components/galactrex/shatter-button";

<ShatterButton onClick={archive}>Archive all</ShatterButton>

Source

Installs to components/galactrex/shatter-button.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

PropTypeDefaultDescription
childrenReactNode—Label.
grid[number, number][4, 2]Columns and rows of the break.
reassemblenumber900Ms before it rebuilds; 0 stays broken until clicked again.
forcenumber70How far shards fly in px.
...button propsButtonHTMLAttributes—onClick, disabled and the rest.

Variants

  • Rebuild. Breaks and comes back: playful confirmation.
  • Stay broken. `reassemble={0}` for a one-way action.

Accessibility

  • A real button; shards are aria-hidden copies of its face.
  • Reduced motion: a short flash instead of the break.

Motion and reduced motion

  • Clip-path triangles moved by transform and opacity, scattered away from the click point.