# Hypnotic Tunnel Title — `hypnotic-tunnel-title@1.1.0`

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

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.

- Kind: example; status: published; digest sha256:5b6d92bb866a1a2fc58ab1667e93d50c96b97d5deeaf0c4d07fb758c884d2aa9
- Role: Complete example scene.
- Implementation: canvas2d; entry `demo.js`
- Files: https://aipixelwizard.com/registry/hypnotic-tunnel-title/1.1.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/hypnotic-tunnel-title/versions/1.1.0
- Runnable demo: https://aipixelwizard.com/registry/hypnotic-tunnel-title/1.1.0/index.html (open over http; it imports sibling packages by relative path)
- 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.

## Exports
- `createDemo({ canvas, width, height, params, fps, duration }) => { renderFrame(info), dispose() }` — Draws the two layers each frame.

## Parameters
- `text` (text, default "INTO THE FLOW") — Title
- `subtitle` (text, default "Episode 01") — Subtitle
- `titleDelay` (number 0–4, default 1.2) — Title appears after (s)
- `hue` (number 0–360, default 215) — Tunnel colour
- `colorSpread` (number 0–360, default 120) — Colour spread
- `speed` (integer 1–4, default 2) — Speed
- `twist` (integer -2–2, default 1) — Twist
- `accent` (color, default "#ff4f3d") — Underline colour
- `background` (color, default "#04030a") — Background

## Composition
- Inputs: Parameters only.
- Outputs: A Canvas 2D frame.
- Coordinates: Pixels.
- Lighting: Additive tunnel, darkened centre for readability.
- Timing: Pure function of time/progress.
- Works with: —
- Works without React, Remotion or a bundler: one HTML file plus ES modules.

## Output and loop
- 1080×1080, 30 fps, 6 s, procedural
- Seamless loop: no — The background loops, but the title reveal plays once.
- Verified 2026-10-03 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D); deterministic: yes

## Use it
New project: Download the pack, npm install, npm run serve and open hypnotic-tunnel-title/1.0.0/index.html. Export with npm run render -- hypnotic-tunnel-title/1.0.0 --param text="YOUR TITLE".

Existing project: Copy the two ingredient files and call tunnel.draw then title.draw from your own canvas loop.

Reuse ideas:
- 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.

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

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.

Provenance: Original code written for AI Pixel Wizard in October 2026. Demo rebuilt in October 2026 to the catalog quality bar (docs/QUALITY.md).