Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Campfire

A campfire at night in a ring of stones: a flickering flame, glowing logs, rising embers and smoke, trees and stars at the edge of the light. Loops perfectly.

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

In Space & cosmos, Nature & weather

Next: Aurora BorealisSurprise me

Campfire 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

1
0.2
1
0.8
1
1
5

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

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

What it is

Logs leaning together, stacked, or burnt down to a bed of coals, in a ring of stones, with cracks glowing on the bark; a roaring turbulent flame that lights the logs, stones and ground and flickers, throwing soft shadows; embers rising and cooling, smoke drifting up lit from below, trunks and a treeline at the edge of the light and a sky full of stars. Choose the fire (leaning logs, stacked logs or embers), the height of the flame, its colour (a wood fire, green-and-violet driftwood or deep red), the wind, the embers, the smoke, the trees, the moonlight and how far the camera sways.

Reuse it in your own idea

  • Cosy storytelling or sleep video: Campfire in the woods, slow.
  • Camping or travel intro: Stacked logs, windy, behind a title.
  • Fantasy or beach scene: Driftwood fire on the shore.

Which part is reusable

src/campfire.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 flame is a smooth volume, not a fluid simulation: it flickers and tears but does not curl round the logs.
  • The ground and trees are dark and simple: the forest is a handful of trunks and a silhouette.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/campfire.js
Exports
  • createCampfire({ layout?, size?, flame?, wind?, embers?, smoke?, trees?, moon?, sway?, seed?, aspect? }) => { scene, camera, material, pit, setSize(width, height), update(time, loopSeconds), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • planFire({ layout?, seed? }) => { logs, stones, trees, flame }
  • FLAMES: { natural, driftwood, ember }
  • LAYOUTS: ['teepee', 'stacked', 'embers']
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, the full-screen shader, the embers and the bloom targets.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: World units of about a metre: the fire at the origin, the ring of stones 1.5 away, the camera 5.4 back and 1.1 up looking slightly down at the fire; trees stand 6 to 14 away.

Lighting: The fire is the light: a point light at the heart of the flame that flickers, with inverse-square falloff, soft shadows from the logs and stones, and a dim bluish moonlight; the flame, the glowing cracks and the coals are emissive.

Timing: update(time, loopSeconds) sets the loop phase; every part 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 noise that makes the flame and the smoke scrolls a whole number of its texture's periods per loop (every octave's offset is a whole number of periods); every flicker of the light is a sum of sines with whole numbers of cycles; each ember is born and spent inside the loop, timed with a modulo; 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
One full-screen pass (a bounded sphere trace, two short volume marches, about 40 texture fetches on the flame pixels) plus a few hundred embers and a small bloom. About 23 ms a frame at 1080p on an integrated Intel GPU. Software WebGL (no GPU) renders slowly, several seconds a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- campfire/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:9a200dfd11c14d86…
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/campfire (with fire-weather/campfire-embers, MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original ray-traced scene: a signed-distance fire pit with glowing cracks and soft shadows, a volumetric flame and smoke from scrolling noise, closed-form embers, an exact loop and the frame/time contract.
BinMore like this

More like this

Play these full screen

Jellyfish

Background3DSeamless loop12 seconds