← Back
msk1039

msk1039/nagomi

Interactive, procedurally animated koi pond that runs in your browser.

View on GitHub ↗https://nagomi-blue.vercel.app/ ↗
Stars
335
Forks
40
Watchers
335
Open issues
2
Contributors
1
Language
TypeScript
License
Other
Default branch
main
Created Sep 10, 2026Updated Sep 30, 2026

Star growth

Today—
This week—
This month—

Star history will appear here once this repo has been tracked for a couple of days.

README

nagomi

Nagomi is an interactive, procedurally animated koi pond that runs in your browser. The fish swim on their own, change depth, react to nearby fish, and gather around the water when you click or tap. Ripples, currents, lotus leaves, changing weather, and optional river sounds help the pond feel alive.

The fish are not following a recorded animation. Instead, each fish uses a few simple rules to decide where to swim, how quickly to turn, and how its body and tail should bend. The program calculates these movements continuously while you watch. This is called procedural animation: behavior is created in real time rather than played from a fixed video or set of frames.

New to procedural animation? Read How Nagomi works.

Screen.Recording.2026-09-11.at.5.32.52.mov

Run

npm install
npm run dev

Build

npm run build
npm run preview

Tune

Edit src/config.ts to change fish counts and sizes, koi colors, water colors, lotus leaves, flowers, and shadow strength.

Controls

  • Click or tap to call the fish.
  • Press Space to scatter them.
  • Press [ or ] to change the fish count.
  • Press D to show the procedural spine.
  • Press H to hide the interface.
  • Press R to reset the simulation.