Three.js@react-three/fiber@react-three/postprocessing
Moss Grid
Backgrounds
Overview
Grassy Background transforms the screen into a rolling landscape of dense, animated grass. Fine green blades move in flowing waves, creating the appearance of wind travelling across an open field. Subtle changes in height and direction give the landscape a natural, continuously shifting texture.
The effect combines detailed vegetation with smooth, coordinated movement. Grass-covered hills extend towards a dark horizon, while variations in lighting and density reveal the contours of the terrain. The contrast creates an atmospheric environment that feels both minimal and immersive.
Built with Three.js WebGPU and TSL, Grassy Background brings nature-inspired motion into modern web interfaces. It works particularly well for creative portfolios, environmental brands, experimental websites, and visual experiences where organic movement plays a central role.
Usage Code
page
import GrassyBackground from '@/components/effects/grassy-background' const page = () => { return ( <div className="h-screen w-full"> <GrassyBackground /> </div> )} export default pageExample Production Use Case
Consider a sustainability-focused technology company introducing its vision through a nature-inspired website. The homepage opens with a bold headline against a dark sky, while a field of animated grass moves gently beneath it.
The rolling landscape creates a visual connection to natural systems without relying on static photographs or conventional illustrations. Its restrained movement adds atmosphere while leaving the headline and primary call to action clearly visible.
The result is an immersive landing page that communicates the brand's relationship with nature through motion and texture.
Best Used For
- Nature-inspired websites and environmental brands.
- Creative agency portfolios and immersive landing pages.
- Sustainability and green technology campaigns.
- Digital art installations and experimental experiences.
- Wellness and lifestyle websites with organic visual themes.
- Cinematic hero sections with atmospheric landscapes.
- Interactive storytelling and virtual environments.
Not For
Grassy Background is less suitable for dense dashboards, financial applications, checkout flows, and content-heavy interfaces where a detailed 3D landscape adds little functional value. Continuous animation can also compete with foreground information if the scene occupies too much visual attention.
Avoid combining it with several demanding WebGL effects on the same page. The landscape works best as a primary atmospheric element, supported by restrained typography and minimal competing movement.
Performance Budget
Detailed grass rendering can place significant demands on the GPU, particularly when many blades are visible simultaneously. Keep geometry and shader calculations efficient, control rendering resolution, and avoid unnecessary per-frame CPU work. Instancing is worth considering for repeated vegetation geometry where supported by the implementation.
On mobile and lower-powered devices, reduce grass density, simplify shading, or lower the rendering resolution when necessary. Pause offscreen animation and provide a static fallback when continuous rendering is unsupported or unnecessary.
Accessibility and Mobile
Keep headings, navigation, and interactive controls in accessible HTML above the 3D scene. Maintain sufficient contrast between foreground content and the changing green landscape, and ensure the decorative canvas does not interfere with keyboard navigation.
On mobile, adjust camera framing to preserve the rolling terrain without obscuring important content. Respect prefers-reduced-motion by pausing the wind animation or displaying a static landscape.
Common Mistakes
- Excessive grass density that overloads the GPU.
- Uniform blade movement that makes the landscape look artificial.
- Repetitive wave patterns that weaken the natural appearance.
- Poor camera positioning that removes depth from the terrain.
- Heavy per-frame calculations that reduce animation smoothness.
- Insufficient contrast between foreground content and grass.
- Using desktop rendering settings on low-powered mobile devices.
- Missing renderer fallback or reduced-motion support.
Changelog
Initial release
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | How fast the wind moves through the grass and the hills slowly shift. |
wind | number | 0.6 | How far the blades lean when gusts roll across the field. |
hills | number | 1 | Height of the rolling hills. 0 gives a flat field. |
terrainScale | number | 1 | How many hills fit on screen. Lower values give wider, softer hills. |
horizon | number | 0.5 | Where the field sits on screen. Higher values tilt the view down so the grass fills more of it. |
density | number | 1 | How many grass blades are drawn. Lower it for slower devices. |
bladeHeight | number | 1 | How tall each grass blade stands above the ground. |
bladeWidth | number | 1 | How thick each grass blade is at the root. |
mouseInteractive | boolean | true | Grass parts around the cursor and gets swept along as it moves. |
mouseStrength | number | 1 | How far the grass bends away from the cursor. Needs Mouse on. |
mouseSize | number | 1 | Size of the patch of grass around the cursor that bends away. Needs Mouse on. |
backgroundColor | color | #000000 | Colour of the sky and the gaps between blades. |
shadowColor | color | #16260f | Colour of the grass on slopes facing away from the light. |
grassColor | color | #446f22 | Main colour of the grass. |
highlightColor | color | #b4ec5a | Colour of the brightest grass on slopes facing the light. |
