Tween UITween UI
8

Components

Dot Bloom Button

A button whose leading dot blooms into a fill that floods the surface on hover.

Hover or focus the button and its leading dot blooms into a circle that floods the whole surface, while the label rolls up to a fresh copy and flips to the contrasting color. The bloom is sized against the button, so it reaches every corner at any width. It is a real <button>, so onClick, type, disabled, and refs all work. Pure CSS — no GSAP dependency.

New tab

Installation

pnpm dlx shadcn@latest add @tween-ui/dot-bloom-button

Using an AI editor? Set up MCP once, then just ask for it in plain words.

Usage

app/page.tsx
app/page.tsx
import DotBloomButton from '@/components/tweenui/dot-bloom-button';
 
export default function Page() {
  return (
    <DotBloomButton variant="secondary" onClick={() => console.log('clicked')}>
      Book a call
    </DotBloomButton>
  );
}

Props

Extends every native <button> attribute (onClick, type, disabled, ref, …).

PropTypeDefaultDescription
childrenstring—Button label (a string — it is duplicated for the roll).
variant'primary' | 'secondary''primary'primary blooms lime over teal, secondary teal over lime.
type'button' | 'submit' | 'reset''button'Native button type.
classNamestring—Merged with the base styles.

Accessibility

It renders a native <button>; the visible label supplies its accessible name and the dot and rolled-in duplicate are aria-hidden. Hover and keyboard focus both trigger the bloom, and a focus ring is included. Under prefers-reduced-motion: reduce the colors swap without the bloom or roll animating.