{"id":"hypnotic-tunnel-title","version":"1.0.0","title":"Hypnotic Tunnel Title","summary":"Fly through a neon particle tunnel while your title springs into place in the middle.","kind":"example","target":"canvas2d","collections":["hypnotic-loops","kinetic-text","particles"],"tags":["tunnel","title","intro","particles","text","neon","warp","2d","canvas","example","hypnotic"],"loopable":false,"motion":"procedural","durationSeconds":6,"status":"published","media":{"poster":"https://aipixelwizard.com/media/hypnotic-tunnel-title/1.0.0/poster.webp","preview":"https://aipixelwizard.com/media/hypnotic-tunnel-title/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/hypnotic-tunnel-title/1.0.0/sample.mp4","sampleBytes":9538760,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/hypnotic-tunnel-title","manifest":"https://aipixelwizard.com/api/v1/visuals/hypnotic-tunnel-title/versions/1.0.0","agentMd":"https://aipixelwizard.com/registry/hypnotic-tunnel-title/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/hypnotic-tunnel-title/1.0.0/","demo":"https://aipixelwizard.com/registry/hypnotic-tunnel-title/1.0.0/index.html"},"description":"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.","role":"Complete example scene.","useCases":["Video intro or channel opener","Launch announcement","Event or episode title card"],"synonyms":["hypnotic tunnel with title","intro animation","title over particles","warp intro","launch intro","youtube intro"],"digest":"4d32dc55d8426e37589c0a0600f24703ff2abc7c4bf805a85f75995b26332d71","implementation":{"target":"canvas2d","runtime":"browser","language":"javascript","module":"esm","entry":"demo.js","exports":[{"name":"createDemo","signature":"createDemo({ canvas, width, height, params, fps, duration }) => { renderFrame(info), dispose() }","description":"Draws the two layers each frame."}],"reusable":[],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"particle-tunnel","version":"1.0.0","scope":"source","reason":"Background layer."},{"id":"kinetic-title","version":"1.0.0","scope":"source","reason":"Title layer."},{"id":"apw-runtime","version":"1.0.0","scope":"source","reason":"Harness and export tools."}],"uses":[{"id":"particle-tunnel","version":"1.0.0","role":"Animated background layer."},{"id":"kinetic-title","version":"1.0.0","role":"Title reveal layer on top."}],"usedBy":[],"params":[{"key":"text","label":"Title","type":"text","default":"INTO THE FLOW","maxLength":40,"sensitive":true},{"key":"subtitle","label":"Subtitle","type":"text","default":"Episode 01","maxLength":60,"sensitive":true},{"key":"titleDelay","label":"Title appears after (s)","type":"number","min":0,"max":4,"step":0.1,"default":1.2},{"key":"hue","label":"Tunnel colour","type":"number","min":0,"max":360,"step":1,"default":280},{"key":"colorSpread","label":"Colour spread","type":"number","min":0,"max":360,"step":5,"default":200},{"key":"speed","label":"Speed","type":"integer","min":1,"max":4,"step":1,"default":2},{"key":"twist","label":"Twist","type":"integer","min":-2,"max":2,"step":1,"default":1},{"key":"accent","label":"Underline colour","type":"color","default":"#ff6fb5"},{"key":"background","label":"Background","type":"color","default":"#04030a"}],"presets":[{"id":"default","label":"Neon intro","params":{}},{"id":"ember","label":"Ember","params":{"hue":10,"colorSpread":50,"accent":"#ffd166","twist":0}},{"id":"ice","label":"Ice","params":{"hue":185,"colorSpread":60,"accent":"#7cf7ff","speed":1}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":6,"posterSeconds":4,"alpha":false,"motion":"procedural","loop":{"seamless":false,"method":"The background loops, but the title reveal plays once."},"seed":null},"composition":{"inputs":"Parameters only.","outputs":"A Canvas 2D frame.","coordinates":"Pixels.","lighting":"Additive tunnel, darkened centre for readability.","timing":"Pure function of time/progress.","compatibleWith":[],"notes":["Works without React, Remotion or a bundler: one HTML file plus ES modules."]},"reuse":["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."],"integration":{"newProject":"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\".","existingProject":"Copy the two ingredient files and call tunnel.draw then title.draw from your own canvas loop."},"performance":{"notes":"Light: ~1,600 line strokes and a few text draws per frame.","limits":"None notable."},"limitations":["Uses the system font; specify fontFamily in kinetic-title for a brand font."],"license":{"spdx":"MIT","notice":"Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License (see LICENSE in this folder).","thirdParty":[]},"rights":{"approvedForPublicRelease":true},"provenance":"Original code written for AI Pixel Wizard in October 2026.","changelog":[{"version":"1.0.0","date":"2026-10-02","notes":"Initial release."}],"verification":{"testedOn":"2026-10-02","inputs":{"hypnotic-tunnel-title@1.0.0":"4d32dc55d8426e37589c0a0600f24703ff2abc7c4bf805a85f75995b26332d71","particle-tunnel@1.0.0":"a563f6c7168273912c18a70e111abb4b2c50f8b28eec7102964750f95b1afd97","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d","kinetic-title@1.0.0":"490f17a4d5cfa5b6c3579d757bef12c0babd8811fb2250a7472bb23bb4ba0a49"},"environment":"Chrome 151.0.7922.137 headless on Linux 7.0.0-31-generic (x64), Node 22.14.0","renderer":"Canvas 2D","width":1080,"height":1080,"fps":30,"frames":180,"renderSeconds":70.3,"loopCheck":{"checked":false,"seamless":null,"maxDifference":null,"note":"Asset does not claim a seamless loop."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/hypnotic-tunnel-title/1.0.0/poster.webp","preview":"/media/hypnotic-tunnel-title/1.0.0/preview.mp4","sample":"/media/hypnotic-tunnel-title/1.0.0/sample.mp4","sampleBytes":9538760}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/hypnotic-tunnel-title/1.0.0/LICENSE"},{"path":"asset.json","size":5966,"sha256":"68dcb6c73ac18a7b4f54957832e5ddc9ad580c0ea4fd6efa89212a518dd4cf7e","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/hypnotic-tunnel-title/1.0.0/asset.json"},{"path":"demo.js","size":1480,"sha256":"29199a7f794e24b13d8032edc534f067bf07c3e4c54e8ed2376216734c2005fb","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/hypnotic-tunnel-title/1.0.0/demo.js"},{"path":"index.html","size":535,"sha256":"f4378a0d638a5e98b18801e5ac22bbb86efeb012f4548af6bd13918a68535284","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/hypnotic-tunnel-title/1.0.0/index.html"}],"warnings":[]}