Firefly Meadow

About this style

Fireflies are beetles that make light through a chemical reaction in the abdomen, and many species flash in a pattern of their own to find a mate. A few species flash in unison, whole groups falling into step, a behavior studied in Southeast Asia and in the Great Smoky Mountains of the United States. Their cold yellow-green light stands out clearly against a darkening meadow. Summer evenings full of fireflies are a favorite scene in nature films, picture books and ambient video.

Make a 10-second dusk meadow: tall grass sways in waves, fireflies blink and slowly fall into step, and the moon climbs behind the trees.

<inputs>
If I don't give you something, use the default and don't ask.
- Title: "Small Lights"
- Line: "Fennick Meadow · late June · 21:40" (fictional)
- Fireflies: 340, each flashing about every 1.33 s.
- Length: 10 seconds.
</inputs>

<direction>
- Palette: sky #0E2233 at the top through #1F3B4E and #4A5E6E to a last warm band #C99A6B at the horizon; moon #FFF1D0 with soft maria #E8D6AE and a 10% halo, warmer #FFD9A0 while it is low; tree line #0B1418; grass far #1A2A27, mid #142320, near #0A1513, with moonlit blade edges #8FA7A0; firefly light in the yellow-green of real fireflies, core #F4FFB0 and glow #C8F05A; title #EDE9DA, line #A9B3A8.
- Layout: the horizon at y 720 behind a tree line of seeded deciduous crowns 60–180px tall, dipping lower around x 1320 where the moon rises. The meadow fills from y 690 down in four depth bands of grass, back to front: shorter, finer and hazier, then taller, bolder and darker, with seed heads and a few flat flower umbels. Near blades frame the lower corners, softened with blur.
- Grass: about 9,000 blades, each a tapered quadratic curve (1–5px wide at the base by depth, 40–420px tall), bending in a wind field of slow waves that travel left to right at 160px/s (periods 3–5 s) plus per-blade sway; tips lag their bases, so you can watch each gust roll across the meadow. The moon-facing side of each blade carries a thin pale edge.
- Fireflies: 340 points in 3D (across, depth, and 0–2.2 m above the ground, most within the grass), projected with the camera and drifting slowly (8–30px/s). Each flash is a smooth pulse: up over 0.12 s, down over 0.35 s, once per cycle. Each firefly has its own natural period of 1.33 s ± 8%, and their phases couple by the Kuramoto model, the coupling ramping from 0 to strong between 2.0 and 7.0 s, precomputed once at load at a fixed 1/60 s step: early flashes are scattered, then patches fall into step and waves of flashes roll across the meadow, and by 7.5 s nearly all flash together. Some real species do exactly this. A weak pacemaker term at exactly 0.75 Hz fixes the common phase so unison flashes peak at 6.0 s and at 10.0 s. Draw each flash as a 2–4px core with an 18–40px additive glow; near fireflies are large soft discs.
- Light on the grass: draw each firefly's glow (60px falloff) into an offscreen light layer and composite it onto the grass with 'source-atop' against a grass mask at 35%, so a flash lights the blades around it rather than the gaps. The flashing is slow and safe: no firefly flashes more than once a second, and a unison flash raises the frame's average brightness by at most 8%.
- Moon: 70px in radius at x 1320, its lower third hidden behind the crowns at the start; it climbs 110px across the piece, clearing the trees by 5 s, leaf edges showing crisply against its disc while it is behind them, its tint paling from #FFD9A0 to #FFF1D0 as it rises.
- Camera: locked off at grass height (about 0.6 m) with a 3% push-in across the piece on easeInOutSine.
- Type (HTML over the canvas): title in Gloock 400, 104px, #EDE9DA, baseline at (120, 210) on the dark sky; line in Rethink Sans 500, 24px, uppercase, tracked 0.12em, #A9B3A8, beneath. Each rises 10px as it fades in over 1.0 s on cubic-bezier(0.22, 1, 0.36, 1). Fireflies stay below y 400.
- Premium: flashes with a quick rise and a slower fade that gather into one rhythm, grass moving in waves you can follow, firefly light catching nearby blades, the moon behind leaf-edged crowns. Cheap: yellow dots twinkling at random over a gradient above a static grass silhouette.
Banned: cartoon fireflies with wings or faces, jars, people, twinkling stars, glitter, the whole meadow strobing, any firefly flashing more than once a second, lens flares, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.4s: the dusk meadow; gusts roll through the grass; scattered fireflies blink at random; the moon's upper edge shows through the crowns.
- 1.4–3.0s: more fireflies wake (120 → 340 active); the title and line rise in.
- 3.0–5.0s: patches begin to flash together and waves of flashes roll across the meadow; the moon clears the trees.
- 5.0–7.4s: nearly the whole meadow flashes in unison every 1.33 s, a pulse peaking at 6.0 s, the grass catching each one.
- 7.4–8.6s: the wind drops and the grass slows; the push-in ends.
- 8.6–10.0s: hold: the meadow still, the fireflies flashing together, the last unison flash peaking at 10.0 s.
For other lengths, stretch the synchronizing beat, keep unison peaks on the 6 s mark and on the final frame, and keep at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter. Use 'lighter' compositing for glows. Text is HTML over the canvas.
- The Kuramoto phases and firefly paths are precomputed into Float32Arrays at load; the wind field and the moon are closed-form functions of t.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check flashes rise fast and fade slower, start scattered and end in unison with peaks exactly at 6.0 and 10.0 s, no firefly flashes more than once a second, gusts visibly travel across the grass, the light lands on blades rather than empty sky, and the title stays clear of fireflies. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Generative Flow Field

Made by us

Thousands of fine particles ride a curl-noise current, gather into a word or logo like a living engraving, dissolve bac…

Hyperspace Jump

Made by us

A deep starfield stretches into blue-white streaks around one vanishing point, merges into a rolling tunnel of light, t…

Fireworks Finale

Made by us

Shells climb from harbor barges and burst into peonies, chrysanthemums, rings, palms and a finale of drooping gold will…

Starling Murmuration

Made by us

Thousands of starlings flow across a peach and mauve dusk sky as one mass, darkening into bands as the flock turns, par…