Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Hypnotic Tunnel Title

Fly through a neon particle tunnel while your title springs into place in the middle.

Finished scene, V3 Scenes2D0 lines of codev1.1.0

In Light, glass & shine, Patterns & illusions, Text & data

Next: Hypnotic Particle TunnelSurprise me

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

1.2
215
120
2
1

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

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

What it is

An intro you can make your own in seconds: a twisting tunnel of colourful light streaks rushes past while a bold title rises letter by letter, with an underline and a subtitle. Type your words, pick the colours and the speed. Plain browser JavaScript (Canvas 2D) — no React, no frameworks.

Built from these ingredients

Make it your own

  • Replace the title with Rolling Number Counter for a milestone intro.
  • Use only the tunnel layer behind your own HTML/CSS text.
  • Change the canvas size to 1920×1080 or 1080×1920; the layout adapts.

Good to know

  • Uses the system font; specify fontFamily in kinetic-title for a brand font.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module demo.js
Exports
  • createDemo({ canvas, width, height, params, fps, duration }) => { renderFrame(info), dispose() }
Dependencies (exact)
  • particle-tunnel@1.1.0 (source) — Background layer.
  • kinetic-title@1.1.0 (source) — Title layer.
  • apw-runtime@1.0.0 (source) — Harness and export tools.
How it fits a scene

Coordinates: Pixels.

Lighting: Additive tunnel, darkened centre for readability.

Timing: Pure function of time/progress.

Output
1080×1080, 30 fps, 6 s · procedural (computed from the frame number) · not a loop — The background loops, but the title reveal plays once.
Tested
Rendered 180 frames on 2026-10-03 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.
Performance
Light: ~1,600 line strokes and a few text draws per frame. None notable.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- hypnotic-tunnel-title/1.1.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.1.0 · sha256:5b6d92bb866a1a2f… · other versions: 1.0.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. Demo rebuilt in October 2026 to the catalog quality bar (docs/QUALITY.md).
BinMore like this

More like this

Play these full screen