Butterflies

Installation

Installs are paused for now. You can still preview and customize every component on its page.

Usage

import { Butterflies } from "@/components/butterflies";

<div className="relative h-96 overflow-hidden rounded-2xl">
  <div className="relative">Your content</div>
  <Butterflies />
</div>

Realistic butterflies in six species that flutter around a block. Each one has painted wings with veins, dark edges and small spots, and a body with antennae. The wings flap in 3D, darkening as they fold up, and every so often a butterfly stops flapping and glides with its wings held open. Each one casts a soft shadow, and they come in a few sizes so some look closer than others.

They wander on their own and turn back before they reach the edges. With followCursor on, they drift over to your cursor while it's inside the block and circle around it.

Pick a look with species. There are six:

• "monarch": orange with black veins and white spots
• "morpho": shiny blue with black edges
• "swallowtail": yellow with black stripes and tails
• "emerald": dark green with glowing emerald bands and tails
• "violet": bright purple with a pink shimmer and a pink eye spot
• "glasswing": see-through wings with dark brown edges, so the page shows through

"mixed" (the default) mixes all of them. count sets how many there are (up to 60), size their wingspan in pixels, and speed how fast they fly and flap.

It fills its parent, so give the parent position: relative and a size. Put it after your content to fly over it, or before to fly behind. It ignores the mouse, so clicks go through to your content. The background is clear, so your page shows through.

It's drawn on a canvas and pauses when it's off screen or the tab is hidden. When reduced motion is on, animate is false or speed is 0, the butterflies stay still with their wings open.

Props