Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Ripple Pond

Raindrops landing on a still pond from above: thin rings spread, cross and fade while lily pads rock. Loops perfectly.

Background, V1 Effects2DSeamless loop, verified94 lines of codev1.0.0

In Liquids, Nature & weather

Next: Rainy WindowSurprise me

Ripple Pond preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

9
4
5

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 1014 KB)
Info

What it is

Raindrops on a still pond seen from above. Drops land at seeded places at fixed moments of the loop; each sends out a set of thin circular ripples that widen, thin and fade, and where rings from different drops cross they pass through each other cleanly. A soft sky reflection tints the water, and lily pads, some with a flower, sit on the surface and rock slightly when a ripple reaches them. Each drop repeats once per loop, so the loop is exact. Choose the number of drops, the colours (twilight, morning, koi or night), the number of lily pads and the seed.

Reuse it in your own idea

  • Sleep video: Twilight pond.
  • Calm morning: Morning, light rain.
  • Storm mood: Koi pond, heavy rain.

Which part is reusable

src/ripple-pond.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • Ripples do not reflect off the edges or interfere; rings cross without changing.
  • The water has no depth or refraction.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/ripple-pond.js
Exports
  • createRipplePond({ drops?, palette?, pads?, seed? }) => { draw(ctx, info, width, height) }
  • PALETTES: { twilight, morning, koi, night }
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness. The reusable source has no dependencies.
How it fits a scene

Coordinates: Drops and pads are placed in fractions of the canvas; ripple reach and pad size scale with the smaller side.

Lighting: A soft radial water colour with a faint sheen; pads cast a soft shadow.

Timing: Pure function of info.progress.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — Each drop's ripples are a function of the time since it landed, wrapping round the loop, and the pads rock in whole cycles, so the last frame meets the first.
Tested
Rendered 360 frames on 2026-10-08 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
At most about 100 rings per frame; a few milliseconds. Many overlapping drops draw more rings.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- ripple-pond/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:cb2676a2321fe8fa…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).
BinMore like this

More like this

Play these full screen

Neon Koi

NewBackground3DSeamless loopPortrait8 seconds

Zen Garden

Background3DSeamless loop20 seconds