Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Firefly Meadow

Fireflies blinking over a moonlit meadow of swaying grass, drifting into step once in the loop. Loops perfectly.

Background, V1 Effects3DSeamless loop, verified539 lines of codev1.0.0

In Light, glass & shine, Nature & weather

Next: Aurora BorealisSurprise me

Firefly Meadow preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

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

Effect controls

Presets

90
5
0.8

How far the fireflies synchronise in the middle of the loop.

1
1
1
1
1
8

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

View code Sample video (default settings, 6.4 MB)
Info

What it is

A summer night in a meadow: tall grass swaying in a slow wind under a bright moon, misty hills behind, and fireflies drifting through the air. Each firefly flashes on its own rhythm; once in the loop they fall into step until the whole meadow blinks together, then drift apart again. Near fireflies are big soft discs, far ones pinpoints, the grass in front hides them and the grass near a flash catches its light. Choose the glow (yellow-green, amber, aqua or green and amber), how many fireflies, how often they flash, how far they synchronise, the wind, the height of the grass, the moonlight, the mist and the brightness of the fireflies.

Reuse it in your own idea

  • Sleep or meditation loop: Summer night.
  • Fantasy or children's story: Aqua glow behind a title.
  • A moment of wonder: Synchrony, with the title appearing at the flash in the middle of the loop.

Which part is reusable

src/firefly-meadow.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

  • The grass is shaded blades with no texture or variation in colour beyond a little hue; flowers and insects are not drawn.
  • Only twelve of the fireflies light the grass.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/firefly-meadow.js
Exports
  • createFireflyMeadow({ palette?, fireflies?, flashes?, sync?, wind?, grass?, moon?, mist?, glow?, seed?, aspect? }) => { scene, camera, setSize(width, height), update(time, loopSeconds), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • PALETTES: { classic, amber, aqua, mixed }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, instanced grass and fireflies, and the bloom targets.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Perspective, 46° field of view; the camera stands 1 unit above the grass 4.2 from the origin; grass fills x ±2 to ±12, z +2.3 to -16; fireflies roam z +3 to -11 and up to 2.6 high.

Lighting: Self-lit fireflies; the grass is lit by a moon and, with an inverse-square falloff, by twelve of the fireflies.

Timing: update(time, loopSeconds) sets the loop time; every position and brightness is a closed-form function of it, so frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — The grass is bent by waves that travel a whole number of cycles per loop; each firefly follows a Lissajous path of whole numbers of cycles and flashes a whole number of times per loop, with a phase offset that fades to zero at the loop's middle and returns; the stars twinkle in whole cycles and the camera sways in a sine of the loop, so the last frame meets the first.
Tested
Rendered 360 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
Some 220,000 grass vertices (each lit by twelve fireflies) and up to 200 firefly quads, all computed in vertex shaders, plus a sky shader and a small bloom. About 15 ms a frame at 1080p on an integrated Intel GPU. Up to 200 fireflies and 16,000 blades.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- firefly-meadow/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:b2ca4851b5a4b4c8…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
Provenance
Adapted from the owner's threejs-sketches/nature-organic/firefly-meadow (with webgpu-firefly-sync, MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original scene: grass and fireflies solved in closed form in vertex shaders, flashes that fall into step once a loop, a moonlit sky with hills and mist, an exact loop and the frame/time contract.
BinMore like this

More like this

Play these full screen

Jellyfish

Background3DSeamless loop12 seconds

Neon Koi

Background3DSeamless loopPortrait8 seconds