A heart toggle that beats twice in a loop while hovered or focused and fills with a burst of rings and sparks when pressed.
Lemon tagliatelle
35 min / serves 2
npx shadcn@latest add https://hyperblur.dev/r/micro-pulse-heart.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-pulse-heart.tsx.
import { MicroPulseHeart } from "@/components/hyperblur/micro-pulse-heart"
<MicroPulseHeart label="Save recipe" onChange={(saved) => console.log(saved)} />| Prop | Type | Default | Description |
|---|---|---|---|
| pressed | boolean | Controlled state. Pair with onChange. | |
| defaultPressed | boolean | false | Initial state when uncontrolled. |
| beating | boolean | Force the beat loop on with true or off with false. Leave it unset to beat on hover and focus, plus a calm pulse now and then. | |
| idle | boolean | true | Play the calm periodic double beat while the heart is at rest. Ignored when beating is set. |
| size | number | 56 | Button diameter in pixels. |
| accent | string | "#ff4d6d" | Fill, ring and spark color. |
| label | string | "Favorite" | Accessible name of the toggle. |
| onChange | (pressed: boolean) => void | Called with the new state on every toggle. |