Swarm Button

NewPremium

Text rendered as particle swarm that scatters on hover and reforms using boid flocking behavior.

buttonsparticlesswarmboidflockingtext

Installation

Terminalbash
npx motioncraft add swarm-button

Usage

swarm-button.tsxtsx
import { SwarmButton } from "@/components/buttons/premium-buttons";

<SwarmButton particleColor="#a855f7">
  HOVER
</SwarmButton>

Props

PropTypeDefaultDescription
children*string—Text to render as particles
particleColorstring#ffffffParticle color
classNamestring—Additional CSS classes
onClick() => void—Click handler

Related Components

Shader Distortion Button

New

WebGL-powered button with GPU-computed water-warp distortion on hover. Real-time ripple displacement mapping.

Ink Bleed Button

New

Click triggers organic watercolor-like ink bleeding from the click point. Canvas-based fluid simulation with sub-drop spawning.

Cloth Button

New

Button surface simulates fabric using verlet integration physics. Cursor pushes dents into the cloth mesh.

Portal Button

New

Click tears open a spiraling vortex/wormhole from the click point. Organic distorted rings with center glow.