Koi Pond

Four koi react to the pointer in a green pond with rocks, grass, and click ripples.

Four koi swim along independent paths through a green pond, with curved bodies, gently paddling fins, and flowing tails. Submerged rocks and grass sit beneath soft, moving water reflections to give the scene depth.

Move your pointer near the fish and they gently steer away. Click or tap to create an expanding water ripple and send nearby koi into a short escape burst before they return to cruising. Adjust the animation speed and brightness, disable interactions, or place your own content above the pond. Reduced-motion preferences display a still scene.

Koi Pond is a vgpu-powered React UI component that renders a WGSL shader through WebGPU. It supports reduced motion and provides a fallback for browsers without WebGPU.

Installation

text

Add the koi-pond-background component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/koi-pond-background.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

Import the component and give it a height. Add children to display content over the pond.

tsx

import { KoiPondBackground } from "@/components/hangry-ui/shader/koi-pond-background";

export default function Pond() {
  return (
    <KoiPondBackground className="grid h-[32rem] place-items-center">
      <h2 className="typography-section-title text-white">A moment of calm.</h2>
    </KoiPondBackground>
  );
}

Props

Prop	Type	Default	Description
`speed`	`number`	`0.2`	Animation speed. Set to 0 to pause swimming and ambient water.
`intensity`	`number`	`0.9`	Scene brightness, clamped to 0–2.
`interactive`	`boolean`	`true`	Enable fish hover reactions and click/tap ripples.
`children`	`ReactNode`	`—`	Content displayed above the pond.
`…props`	`ComponentProps<"div">`	`—`	Native div attributes, styles, and event handlers.

Dependencies

Motion
vgpu