# Hypnotic Tunnel Title — `hypnotic-tunnel-title@1.0.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:4d32dc55d8426e37589c0a0600f24703ff2abc7c4bf805a85f75995b26332d71
- Role: Complete example scene.
- Implementation: canvas2d; entry `demo.js`
- Files: https://aipixelwizard.com/registry/hypnotic-tunnel-title/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/hypnotic-tunnel-title/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/hypnotic-tunnel-title/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `particle-tunnel@1.0.0` (source) — Background layer.; `kinetic-title@1.0.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 280) — Tunnel colour
- `colorSpread` (number 0–360, default 200) — Colour spread
- `speed` (integer 1–4, default 2) — Speed
- `twist` (integer -2–2, default 1) — Twist
- `accent` (color, default "#ff6fb5") — 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-02 in Chrome 151.0.7922.137 headless on Linux 7.0.0-31-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.