--- title: "Dithered Firefly Field" description: "A Bayer-dithered glow rising from the bottom of the hero, broken into thousands of 2px dots that scatter away from the cursor, spring back home, and occasionally drift up off the top like fireflies." canonical: "https://fx.statico.io/demos/testerarmy-fireflies" doc_version: "0.1.0" last_updated: "2026-10-01" date_modified: "2026-10-01T12:43:33-07:00" source: "https://github.com/statico/cool-web-fx" license: "Unlicense" --- > Canonical HTML version: # Dithered Firefly Field A Bayer-dithered glow rising from the bottom of the hero, broken into thousands of 2px dots that scatter away from the cursor, spring back home, and occasionally drift up off the top like fireflies. Seen on [tester.army](https://tester.army/e2e) · credit tester.army. ## How it works This rebuilds the hero background on **tester.army/e2e**. On the live site it is a single 2D canvas that loads `/e2e/firefly-bayer.png`: a 1600×851, 4-color Bayer-dithered image of a glowing two-humped dune (`#161616`, `#58554c`, `#898477`, `#c3bcaa`). It rotates that image 180° so the glow rises from the bottom, then samples it every 2px. Each 2×2 cell becomes a "star" with probability `lum² × 1.05` of its palette color (colors under 0.06 are dropped), so bright areas are dense and the tails are a sparse scatter of dots on `rgb(17,17,17)`. The stars are pre-drawn once to an offscreen canvas and blitted "cover"-style every frame. Every star is a **spring particle**, but only while it is displaced. The cursor wakes up every star within ~100px (scaled to 6.5% of the viewport width, clamped to 55–120px) and pushes it out with a smoothstep falloff plus a share of the pointer's own velocity. Woken particles spring back home (stiffness 110, damping 11), are tethered at 48px, and are put back to sleep once they settle within ~0.14px. About 12 stars per second also detach on their own and float up and off the top like fireflies, leaving a hole until they leave the screen. Clicking the command box or the GitHub button fires a blast (4.5× radius, strength 1600). Each frame the static image is drawn, every displaced star's home cell is punched out with the background color, and the particle is drawn at its current offset, so the cost scales with what is moving, not with the ~60k stars. A second canvas lays `rgb(17,17,17)` over the field with an alpha curve of 0.1 @ 0% → 0 @ 30% → 0.58 @ 65% → 1 @ 96%, plus ±3/255 per-pixel noise to stop banding. The dense glow at the bottom dissolves into the page and only the scattered tails show through behind the copy. One honest deviation: the dithered PNG is **generated procedurally** instead of shipped. It uses a height profile fitted to the measured per-column brightness of the original, quantized to the same 4 colors with a 4×4 Bayer matrix and the same seeded LCG for star selection. Fully self-contained: no external scripts, fonts, or images. Under `prefers-reduced-motion` the rising fireflies and click blasts are off. The cursor push stays, because it only moves in response to input. ## Code Copy this whole file. It is a complete, runnable HTML document — also served verbatim at . ```html tester.army — Dithered Firefly Field

Dithered Firefly Field

A Bayer-dithered glow rising from the bottom of the hero, broken into thousands of 2px dots that scatter away from the cursor, spring back home, and occasionally drift up off the top like fireflies.

How it works

This rebuilds the hero background on tester.army/e2e. On the live site it is a single 2D canvas that loads /e2e/firefly-bayer.png: a 1600×851, 4-color Bayer-dithered image of a glowing two-humped dune (#161616, #58554c, #898477, #c3bcaa). It rotates that image 180° so the glow rises from the bottom, then samples it every 2px. Each 2×2 cell becomes a "star" with probability lum² × 1.05 of its palette color (colors under 0.06 are dropped), so bright areas are dense and the tails are a sparse scatter of dots on rgb(17,17,17). The stars are pre-drawn once to an offscreen canvas and blitted "cover"-style every frame.

Every star is a spring particle, but only while it is displaced. The cursor wakes up every star within ~100px (scaled to 6.5% of the viewport width, clamped to 55–120px) and pushes it out with a smoothstep falloff plus a share of the pointer's own velocity. Woken particles spring back home (stiffness 110, damping 11), are tethered at 48px, and are put back to sleep once they settle within ~0.14px. About 12 stars per second also detach on their own and float up and off the top like fireflies, leaving a hole until they leave the screen. Clicking the command box or the GitHub button fires a blast (4.5× radius, strength 1600). Each frame the static image is drawn, every displaced star's home cell is punched out with the background color, and the particle is drawn at its current offset, so the cost scales with what is moving, not with the ~60k stars.

A second canvas lays rgb(17,17,17) over the field with an alpha curve of 0.1 @ 0% → 0 @ 30% → 0.58 @ 65% → 1 @ 96%, plus ±3/255 per-pixel noise to stop banding. The dense glow at the bottom dissolves into the page and only the scattered tails show through behind the copy.

One honest deviation: the dithered PNG is generated procedurally instead of shipped. It uses a height profile fitted to the measured per-column brightness of the original, quantized to the same 4 colors with a 4×4 Bayer matrix and the same seeded LCG for star selection. Fully self-contained: no external scripts, fonts, or images. Under prefers-reduced-motion the rising fireflies and click blasts are off. The cursor push stays, because it only moves in response to input.

How to use this file

This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: https://fx.statico.io/effects/testerarmy-fireflies.md. Full writeup and live preview: https://fx.statico.io/demos/testerarmy-fireflies.

Source and credit

Effect originally seen on tester.army (https://tester.army/e2e) — credit to tester.army. This is an independent recreation built from scratch for educational use; no proprietary source code was copied. Released under the Unlicense.

More

Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.

Open Source AI
testing framework

Customizable TypeScript testing framework for web, mobile apps and more.

``` ## Source & credit Effect seen on — credit to tester.army. This is an independent recreation of the effect built from scratch for educational use. No proprietary source code was copied. ## Sitemap - [All effects](https://fx.statico.io/index.md) — gallery index - [Site map](https://fx.statico.io/sitemap.md) — every page, grouped - [sitemap.xml](https://fx.statico.io/sitemap.xml) — machine-readable, with lastmod - [AGENTS.md](https://fx.statico.io/AGENTS.md) — how to grab and reuse an effect - [skill.md](https://fx.statico.io/skill.md) — full agent skill file - [llms.txt](https://fx.statico.io/llms.txt) — short index of every effect - [Glossary](https://fx.statico.io/glossary.md) — terminology used in the writeups