Particle Hover Button

A wrapper that emits glowing, pooled particles from the cursor while hovering any button or link. React component.

Hover to emit glowing heart particles from the cursor, styled after the anime.js navbar Sponsor link.

Installation

File Structure

particle-hover-button.tsx

use-prefers-reduced-motion.tsx

Usage

import { ParticleHoverButton } from "@/components/sora-ui/buttons/particle-hover-button";

export default function Page() {
  return (
    <ParticleHoverButton className="text-[#ff4b4b]">
      <a href="https://github.com/sponsors/Axyl1410" target="_blank" rel="noreferrer">
        Become a sponsor
      </a>
    </ParticleHoverButton>
  );
}

ParticleHoverButton is a wrapper, not a button component — it renders whatever you pass as children untouched (a real <a>, <button>, or plain text) and layers the particle emitter and hover pulse around it. Particle color always follows currentColor, so set text color on the wrapper (or on children) to recolor the effect.

Props

Prop	Type	Default
`children?`	`ReactNode`	-
`particle?`	`ReactNode`	`a small filled dot`
`poolSize?`	`number`	`24`
`interval?`	`number`	`100`
`duration?`	`number`	`1200`
`spread?`	`number`	`16`
`className?`	`string`	-
`classNames?`	`ParticleHoverButtonClassNames`	-

When to Use

A small flourish for a single high-emphasis action — a sponsor/donate link, a "like" button, a newsletter signup — where a bit of playfulness rewards hovering. Not meant for repeated use across a list of buttons; the pooled particles are cheap, but the effect loses its impact if every button on a page does it.

Accessibility

The wrapped children element keeps all of its own semantics (a real <a>/<button> stays focusable and operable exactly as authored — this component only adds a decorative, aria-hidden, pointer-events-none overlay next to it). Under prefers-reduced-motion: reduce, the particle layer isn't rendered at all and the hover pulse never starts.