Flock Burst Button
A button that answers a click with a burst of birds: a small flock bursts out of it, gathers above it into a word like Sent or Thanks, holds for a beat, then turns as one and flies off the screen. A real button underneath, announced to screen readers.
Canvas 2D0 deps1 file · 15 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
import type { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react";
/**
* FlockBurstButton — a button that answers a click with a burst of birds.
*
* Click it and a small flock bursts out of the button, wheels round, gathers
* above it into a short message ("Sent", "Thanks", "Saved"), holds for a
* beat, then turns as one and flies off the screen. The birds are drawn on
* a full-viewport canvas that exists only while they fly, so overflow-hidden
* parents never clip them, and they cost nothing at rest.
*
* Each bird is a small 3D silhouette in perspective: wings that beat, a tip
* that lags the elbow, banking into turns, paler wing undersides. They
* arrive raggedly and mill in place while they hold the word.
*
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
Click it and a small flock bursts out of the button, wheels round, and gathers above it into a short message such as Sent, Thanks or Saved. The birds arrive raggedly and mill in place while they hold the word, then turn as one and fly off the edge of the screen. The flight is drawn on a full-viewport canvas created on click and removed when the last bird leaves, so overflow-hidden parents never clip it and it costs nothing at rest. The message moves below the button when there is no room above, and stays inside the viewport. It is an ordinary button: every button attribute and onClick pass through, onBurstEnd tells you when the flight ends, and the bird colour follows the button's own colour unless you set one.
Curator’s note
Pro because the feedback is a real little flight, not a sprite: a flock of 3D birds bursts out of the button, spells your word in birds above it, and leaves together, drawn on a canvas that exists only while they fly.
