Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Cinematic Lens Flare

A cinematic lens flare drawn over any frame: glow, starburst, anamorphic streak, rainbow halo and ghosts that move with the light.

Effect, V1 Effects2DSeamless loop, verified336 lines of codev1.0.0

In Science & maths, Light, glass & shine

Next: Torus Wave LoopSurprise me

Cinematic Lens Flare preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

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

Effect controls

Presets

Drift loops seamlessly; Sweep crosses the frame once.

Black is for laying the flare over your own footage with Screen blending.

1
1
7

Reflections along the line through the centre of the frame.

12
0.5
7

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

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

What it is

A lens flare as a finishing layer. Place a light anywhere in the frame (or just outside it) and the flare follows: a bright core and glow, a starburst from the aperture blades, an anamorphic streak, a rainbow halo, a chain of ghosts reflected through the centre of the frame, lens dirt that lights up near the source and a veil of glare. Four styles (cinematic, anamorphic blue streak, sun, soft), any light colour, and a light that drifts on a loop, sweeps across or stays put. On black it is ready to drop on a clip with Screen blending.

Reuse it in your own idea

  • Title reveal: sweep the light behind Kinetic Title Reveal for a cinematic title card.
  • Overlay for footage: render it on black and blend it over a clip with Screen in any editor.
  • Product hero: pin the light to a product's highlight in a 3D scene by projecting its position each frame.

Which part is reusable

src/lens-flare.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

  • A drawn approximation of a lens, not optical ray tracing: ghosts follow the classic axis through the frame centre.
  • It does not detect occlusion: lower intensity yourself when the light goes behind something.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/lens-flare.js
Exports
  • createLensFlare({ style?, tint?, ghosts?, rays?, size?, dirt?, grain?, seed? }) => { style, draw(ctx, { x, y, width, height, intensity? }) }
  • lightPath(progress, kind = 'drift') => { x, y }
  • STYLES: Record<'cinematic' | 'anamorphic' | 'sun' | 'soft', object>
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Pixels of the canvas you draw on; ghosts mirror the light through the canvas centre.

Lighting: Additive; on black the result can be blended over footage with Screen or Add.

Timing: draw() is a pure function of the light position; lightPath(progress) gives a position per frame.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — With Drift (the default) the light follows a closed figure-of-eight with whole-number frequencies, and the flare is a pure function of the light position, so the last frame meets the first. Sweep and Still do not loop.
Tested
Rendered 240 frames on 2026-10-05 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
About 120 gradient fills per frame plus one full-frame dirt mask; light work at 1080p. The dirt buffer is a full-size offscreen canvas; pass dirt: 0 to skip it on low memory devices.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- lens-flare/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:b2385edbafe5221b…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Adapted from the owner's threejs-sketches/light-atmosphere/webgpu-lens-flare (MIT), rebuilt for AI Pixel Wizard in October 2026 as a Canvas 2D finishing layer (no WebGPU needed) with flare styles, lens dirt, dithering and the frame/time contract.
BinMore like this

More like this

Play these full screen

Bass Pulse

Background3DSeamless loop8 seconds

Piano Keys

3D object3DSeamless loop16 seconds