Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Prism Dispersion

A white beam enters a glass prism and fans out into a rainbow, the prism turning slowly so the spectrum swings. Loops perfectly.

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

In Science & maths, Light, glass & shine

Next: Bass PulseSurprise me

Prism Dispersion 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.1

How strongly the glass spreads the colours.

1

How far the prism turns to and fro.

1
1
1

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

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

What it is

A beam of white light climbs out of the dark, enters a glass prism, is bent and spread into every colour from violet to red and falls across a wall. The optics are traced for real: forty wavelengths are refracted with Snell's law through glass whose index falls with wavelength, carried across the prism and refracted out again, so the spectrum has the true order and spread; as the prism turns the fan swings and, at the extreme, the violet (the most bent) is caught inside by total internal reflection and thrown out of the base as a violet beam. Dust turns in the beam. Choose the glass (crown, flint or diamond), how strongly it spreads the colours, how far the prism turns, the beam width, the haze and dust, whether there is a wall and the glow.

Reuse it in your own idea

  • Physics explainer on light and colour: Flint glass prism.
  • Music or album-art style loop: Diamond fire.
  • Calm presentation backdrop: Crown glass, soft haze.

Which part is reusable

src/prism-dispersion.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 scene is two-dimensional: the light travels in the plane of the frame and the prism is a triangle with no depth.
  • Intensity along each ray is a simple fade; reflections other than the first face and the total internal one are not traced.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/prism-dispersion.js
Exports
  • createPrism({ glass?, dispersion?, rotation?, beam?, haze?, wall?, glow?, aspect? }) => { scene, camera, material, setSize(width, height), update(time, loopSeconds), dispose() }
  • traceSpectrum({ centre?, radius?, angle?, glass?, dispersion?, source?, beamAngle?, wallX? }) => { vertices, entry, reflected, rays }
  • wavelengthToRGB(nm) => [r, g, b]
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • GLASSES: { crown, flint, diamond }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, the full-screen shader and the bloom targets.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Screen space, y from -1 to 1: the prism (an equilateral triangle of circumradius 0.4) centred just above the middle, the beam entering from the lower left, the wall on the right at x = 0.86 (times the aspect when wider).

Lighting: Self-lit: the beam, the spectrum and the glints of the glass add light; the bloom softens them.

Timing: update(time, loopSeconds) traces the rays for that moment, so frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — The prism's angle and the beam's tilt are sines of the loop phase, and the dust moves on paths of whole numbers of cycles, 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
Forty rays traced in JavaScript each frame, then one full-screen pass of about 80 distance evaluations and 70 motes per pixel and a small bloom. About 25 ms a frame at 1080p on an integrated Intel GPU. A single beam and one equilateral prism.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- prism-dispersion/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:a02c5cdf36fd71a4…
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/light-atmosphere/prism-rainbow (with webgpu-rainbow-prism and light-prism, MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original scene: forty wavelengths traced with Snell's law and a Cauchy index, total internal reflection, soft beams, dust, an exact loop and the frame/time contract.
BinMore like this

More like this

Play these full screen

Bass Pulse

Background3DSeamless loop8 seconds

String Art

Background3DSeamless loop12 seconds