Animated Grass Field

Animated Grass Field

Bring your website to life with a meadow that actually moves. Animated Grass Field is a canvas-powered Framer component that grows thousands of individual blades, sways them in the wind, and lets visitors brush through them with the cursor. Calm, organic, and impossible to scroll past.

Why You'll Love It

✦ Real wind physics with gusts, turbulence, and natural spring-back

✦ Cursor interaction that parts the grass as you move through it

✦ Grow-on-load entrance where blades rise one by one

✦ Up to 4,000 blades with layered depth for a full, lush field

✦ Fully responsive, from slim banners to full-screen heroes

Four Styles, One Component

✦ Real: soft gradients, dry golden tips, natural variation

✦ Toon: bold, bright, playful blades with a graphic feel

✦ 3D: rounded, shaded blades with real volume

✦ Flat: clean solid colors for minimal layouts

Night Mode Magic

✦ Flip to night and your cursor becomes a glowing torch

✦ Tune light radius, intensity, color, and ambient glow

✦ Add comic halftone dots or ink outlines for extra attitude

Full Control, Zero Code

✦ Colors: base, tip, and dry-tip tones with adjustable dry chance

✦ Shape: density, height, width, and size variation

✦ Wind: strength, speed, turbulence, and stiffness

✦ Scene: sky gradient, grow timing, and mouse radius

Smooth and Smart

✦ Sharp on retina screens with crisp, clean blade edges

✦ Pauses automatically when scrolled out of view

✦ Touch friendly, so page scrolling stays natural on mobile

✦ Static canvas preview keeps the Framer editor snappy

Perfect For

✦ Hero sections and landing pages

✦ Eco, garden, farm, and outdoor brands

✦ Portfolios, footers, and creative experiments

✦ Wellness, travel, and nature storytelling

✦ Sky-to-meadow scenes with a built-in gradient background

Quick Start

Drop it into any frame, pick a style, tune the wind, and publish. Your field is ready in seconds. No code, no plugins, no fuss. Plant a little life on your next page.