---
name: nikuma-butterflies
description: Add drifting butterflies (light theme) and fireflies (dark theme) inside a box or hero section. Use when the user asks for this effect or component in any framework (vanilla JS, Astro, React, Vue, Svelte, Solid).
---
# Butterflies
Little butterflies drift around a box and flutter their wings. Switch the theme and they become glowing fireflies. This is the same code that flies around the hero of this site.
One dependency-free file. `mountButterflies(element, options)` builds everything inside `element` and **returns a `stop()` function** that removes it and cleans up all listeners. The framework wrappers below only call it in the right lifecycle hook.
## When to use
The user wants: butterflies by day, fireflies by night. Works in plain HTML, Astro, React (incl. Next.js), Vue (incl. Nuxt), Svelte (incl. SvelteKit) and Solid.
## How to add it
1. Save the file(s) under **Source** into the project (for example `src/lib/butterflies/`), keeping their names. They need no installation.
2. Vanilla / Astro / plain HTML: import the function in a `
```
### Svelte: `Butterflies.svelte`
```svelte
```
### Solid: `Butterflies.jsx`
```jsx
import { onMount, onCleanup } from 'solid-js';
import { mountButterflies } from './butterflies.js';
export default function Butterflies(props) {
let root;
onMount(() => onCleanup(mountButterflies(root, props.options || {})));
return ;
}
```