HTML + CSSBackgrounds

Grass in the wind

Hundreds of grass blades with a few poppies sway in passing gusts of wind, and the pointer parts them like a hand, on canvas.

Settings

1x
1x
1

Code

<div class="pt-uvq16-grass-wind"><canvas></canvas></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Backgrounds

See all Backgrounds

Where to use it

A meadow drawn as three layers of tapered blades, darker at the back and brighter in front. Each blade bends with a small spring towards a wind value made of two slow waves plus a gust that travels across the field every few seconds, so the grass ripples like the real thing. A few red poppies ride on top.

The first color is the fresh grass, the second the flowers and the third the deep green at the back. Density sets how thick the meadow is. Sweep the pointer through it and the blades lean away and spring back. Fits outdoor, farming, eco and summer campaign pages.