Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Hypnotic Particle Tunnel

Fly forever through a twisting tunnel of colourful light streaks. A perfect loop.

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

In Space & cosmos, Light, glass & shine, Patterns & illusions

Next: Particle GalaxySurprise me

Hypnotic Particle Tunnel 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

1400
2

Tunnel lengths flown per loop.

1

Turns per loop. Negative turns the other way.

265

Starting hue on the colour wheel (0 red, 120 green, 240 blue).

160

0 is one colour; 360 is the full rainbow.

0
0.06
11

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

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

What it is

Thousands of glowing streaks rush towards you down a slowly twisting tunnel, like hyperspace or a neon wormhole. Choose the colours, how fast you fly, how much it twists and how long the light trails are. The motion is designed so the end of the clip flows invisibly back into the start, so it can loop forever.

Reuse it in your own idea

  • Use it behind a Kinetic Title for an intro (see the Hypnotic Tunnel Title example).
  • Set twist 0 and colour spread 0 for a calm white star-field background.
  • Move the vanishing point (center option) off-centre for a dynamic side-on warp.

Which part is reusable

src/particle-tunnel.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.

See it combined with other ingredients in Hypnotic Tunnel Title.

Good to know

  • 2D projection: the tunnel is always viewed straight down its axis.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/particle-tunnel.js
Exports
  • createParticleTunnel({ count?, speed?, twist?, spiral?, hue?, hueRange?, hueCycles?, trail?, size?, seed?, center? }) => { draw(ctx, info, width, height) }
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness. src/particle-tunnel.js has no dependencies.
How it fits a scene

Coordinates: Pixels. Vanishing point at center (fractions of width/height).

Lighting: Additive ('lighter') blending; looks best on a dark background.

Timing: Pure function of progress; any frame can be drawn out of order.

Output
1080×1080, 30 fps, 6 s · procedural (computed from the frame number) · seamless loop — Depth wraps by whole tunnel lengths, twist and colour complete whole cycles; state at progress 1 equals progress 0.
Tested
Rendered 180 frames on 2026-10-02 in Chrome 151.0.7922.137 headless on Linux 7.0.0-31-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
1,400 particles is smooth at 1080p in desktop browsers. Each particle is one stroked line. Above ~3,000 particles at 4K, frame time rises; lower density for phones.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- particle-tunnel/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:a563f6c716827391… · other versions: 1.1.0
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License (see LICENSE in this folder). License details
Provenance
Original code written for AI Pixel Wizard in October 2026.
BinMore like this

More like this

Play these full screen