09

Floating Grove

A Three.js floating island at golden hour. Pines and autumn trees drop in, spin and spring up tier by tier on elastic easing, sway in the wind, then wither and reseed somewhere new. Clouds cast moving shadows, pollen glows above a pond, rocks drift underneath, and the camera leans toward your cursor.

3D low-polyelastic growthsoft shadows
Live

Installation

Add it to your project

$
pnpm dlx shadcn@latest add https://funshader.com/r/floating-grove.json

Installs 1 files into components/shaders. Requires three, @types/three. The CLI installs these dependencies.

Usage

Mount it behind your content

app/hero.tsx
import { FloatingGrove } from "@/components/shaders/floating-grove/floating-grove";

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden">
      <FloatingGrove className="-z-10" />
      {/* your content */}
    </section>
  );
}

The shader fills its nearest positioned ancestor. Give the parent relative isolate and the shader -z-10 to put it behind everything else.

API reference

Props

PropTypeDefaultDescription
pausedbooleanfalsePauses animation. Reduced motion is respected automatically.
classNamestring—Canvas classes.
styleCSSProperties—Inline canvas styles.
speednumber1Growth, wind and orbit speed multiplier.
treesnumber38Trees, bushes and rocks alive at once. Changing it rebuilds the scene.

Keep exploring

More shaders

07

Moon Terrain

A turquoise moon above rolling terrain and wandering lights.

3D terrainmoonlightsimplex noise
06

Tunnel

Fly through a rainbow tube of spiralling points.

3D pointsfly-throughfog