---
name: nikuma-grass
description: Add a procedural grass strip that bends away from the mouse and swings back, with pollen floating up by day. Use when the user asks for this effect or component in any framework (vanilla JS, Astro, React, Vue, Svelte, Solid).
---
# Grass
A meadow made of 330 SVG blades. Move the mouse through it and the blades lean away, then swing back like real grass. It is the footer garden of this site, made standalone.
One dependency-free file. `mountGrass(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: grass that bends away from your cursor. 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/grass/`), keeping their names. They need no installation.
2. Vanilla / Astro / plain HTML: import the function in a `
```
### Svelte: `Grass.svelte`
```svelte
```
### Solid: `Grass.jsx`
```jsx
import { onMount, onCleanup } from 'solid-js';
import { mountGrass } from './grass.js';
export default function Grass(props) {
let root;
onMount(() => onCleanup(mountGrass(root, props.options || {})));
return ;
}
```