A list row you drag left over a red well whose bin pops once you pass the threshold. On release the row dissolves into drifting particles from right to left, then the space collapses.
npx shadcn@latest add https://hyperblur.dev/r/button-swipe-dissolve.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-swipe-dissolve.tsx.
import { ButtonSwipeDissolve } from "@/components/hyperblur/button-swipe-dissolve"
<ButtonSwipeDissolve title="Priya Raman" subtitle="Re: Q3 vendor contracts" onDelete={() => remove(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Priya Raman" | Row title. |
| subtitle | string | "Re: Q3 vendor contracts, final redlines attached" | Second line, truncated with an ellipsis. |
| meta | string | "9:41" | Small text on the right of the title. |
| initials | string | "PR" | Avatar initials. |
| avatarColor | string | "#7c5cff" | Avatar color, also mixed into the particles. |
| threshold | number | 0.42 | Fraction of the row width to drag before release deletes. |
| onDelete | () => void | undefined | Called after the row has dissolved and collapsed. |
| accent | string | "#ef4444" | Danger color used for fills, glows and the focus ring. |
| resetAfter | number | 2400 | Milliseconds before the finished state returns to the start. Use 0 to keep the finished state. |
| disabled | boolean | false | Blocks every interaction and dims the control. |