{"id":"hypnotic-spiral","version":"1.0.0","title":"Hypnotic Spiral","summary":"A tunnel of spiralling colour bands rushing inwards with glowing edges and cycling colours. Loops perfectly.","kind":"background","target":"three","collections":["backgrounds","hypnotic-loops"],"tags":["hypnotic","spiral","tunnel","vortex","swirl","psychedelic","color cycling","glow","loop"],"loopable":true,"motion":"procedural","durationSeconds":12,"status":"published","media":{"poster":"https://aipixelwizard.com/media/hypnotic-spiral/1.0.0/poster.webp","preview":"https://aipixelwizard.com/media/hypnotic-spiral/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/hypnotic-spiral/1.0.0/sample.mp4","sampleBytes":1582339,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/hypnotic-spiral","manifest":"https://aipixelwizard.com/api/v1/visuals/hypnotic-spiral/versions/1.0.0","agentMd":"https://aipixelwizard.com/registry/hypnotic-spiral/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/hypnotic-spiral/1.0.0/","demo":"https://aipixelwizard.com/registry/hypnotic-spiral/1.0.0/index.html"},"description":"A tunnel of spiralling bands that pulls the eye down into the centre. The arms of the spiral sweep round, the bands race inwards in perspective and the colours cycle through a ramp while a glowing edge rides each arm. The swirl, the rush and the colour cycle each complete whole turns per loop. Choose the number of arms, the colours (candy, fire, ocean or mono), the swirl, the rush, the colour cycle, the twist of the tunnel and the ring density.","role":"Shader background (three.js): a hypnotic, high-energy tunnel for music, party and attention-grabbing content.","useCases":["A music, party or club visual","An attention-grabbing transition or title backdrop","A hypnotic ambient loop"],"synonyms":["spiral tunnel","vortex tunnel","hypnosis spiral","psychedelic swirl","warp tunnel","swirling vortex"],"digest":"7e58a6f908e2d2c3ecb018c4b811fd7407fde02d49f6fbef4073f9f8bcafeca0","implementation":{"target":"three","runtime":"browser","language":"javascript","module":"esm","entry":"src/hypnotic-spiral.js","exports":[{"name":"createHypnoticSpiral","signature":"createHypnoticSpiral({ arms?, palette?, swirl?, rush?, cycle?, depth?, bands? }) => { scene, camera, setSize(width, height), update(time, loopSeconds), dispose() }","description":"The tunnel as one full-screen shader; render its scene with its camera, ideally through createBloomPass."},{"name":"createBloomPass","signature":"createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }","description":"A small bloom with tone mapping and a fixed grain."},{"name":"PALETTES","signature":"PALETTES: { candy, fire, ocean, mono }","description":"Four-colour ramps cycled round the bands."}],"reusable":["src/hypnotic-spiral.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"three","version":"0.185.1","scope":"source","reason":"Renderer and a full-screen shader material."},{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo harness."}],"uses":[],"usedBy":[],"params":[{"key":"arms","label":"Arms","type":"integer","min":2,"max":12,"step":1,"default":5},{"key":"palette","label":"Colours","type":"select","default":"candy","options":[{"value":"candy","label":"Candy"},{"value":"fire","label":"Fire"},{"value":"ocean","label":"Ocean"},{"value":"mono","label":"Mono"}]},{"key":"swirl","label":"Swirl","help":"Whole turns of the swirl per loop; negative reverses it.","type":"integer","min":-3,"max":3,"step":1,"default":1},{"key":"rush","label":"Rush","help":"Bands passing per loop.","type":"integer","min":1,"max":6,"step":1,"default":3},{"key":"cycle","label":"Colour cycle","help":"Whole trips round the colour ramp per loop.","type":"integer","min":0,"max":3,"step":1,"default":1},{"key":"depth","label":"Twist","type":"number","min":0.5,"max":2,"step":0.1,"default":1},{"key":"bands","label":"Ring density","type":"number","min":0.5,"max":2,"step":0.1,"default":1}],"presets":[{"id":"default","label":"Candy, five arms","params":{}},{"id":"fire","label":"Fire, reverse swirl","params":{"palette":"fire","swirl":-2,"arms":3}},{"id":"ocean","label":"Ocean, many arms","params":{"palette":"ocean","arms":9,"rush":2,"depth":1.4}},{"id":"mono","label":"Mono, fast","params":{"palette":"mono","rush":6,"cycle":0,"arms":7}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":12,"posterSeconds":3,"alpha":false,"motion":"procedural","loop":{"seamless":true,"cycleSeconds":12,"method":"The swirl, the rush and the colour cycle are whole numbers of turns per loop and the arms count is whole, so the last frame meets the first."},"seed":null},"composition":{"inputs":"Time within the loop; the arms, colours, swirl, rush, colour cycle, twist and ring density.","outputs":"A full-frame shader image through a bloom pass.","coordinates":"Screen-centred, ±1 vertically; the tunnel's axis points into the screen at the centre; distance down it is 0.35 / radius.","lighting":"Self-lit; the bloom gives the glow.","timing":"update(time, loopSeconds) sets the loop phase; frames render in any order.","compatibleWith":["kinetic-title","number-reveal"],"notes":["Colour is a smooth function of position within each band, so it has no tile index that could jump at the loop."]},"reuse":["Music visual: Candy, five arms.","Dramatic transition: Fire, reverse swirl.","Calmer: Ocean, many arms."],"integration":{"newProject":"Create a WebGLRenderer, createHypnoticSpiral() and createBloomPass(renderer, { width, height }); call spiral.setSize(w, h) and each frame spiral.update(time, loopSeconds) then bloom.render(spiral.scene, spiral.camera).","existingProject":"Copy src/hypnotic-spiral.js and render spiral.scene with spiral.camera into your own target."},"performance":{"notes":"One full-screen fragment shader with a handful of trigonometric calls, plus the bloom: about 2 ms a frame at 1080² on an integrated Intel GPU.","limits":"Software WebGL renders in about two seconds a frame."},"limitations":["Strobing patterns of this kind can be uncomfortable for some viewers; keep the rush low for sensitive audiences.","The centre is darkened rather than resolving into a point."],"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":"Adapted from the owner's threejs-sketches/shaders-backgrounds/hypnotic-spiral (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original shader: twisted perspective bands with whole-turn swirl, rush and colour cycle on an exact loop.","changelog":[{"version":"1.0.0","date":"2026-10-05","notes":"Initial release."}],"verification":{"testedOn":"2026-10-06","inputs":{"hypnotic-spiral@1.0.0":"7e58a6f908e2d2c3ecb018c4b811fd7407fde02d49f6fbef4073f9f8bcafeca0","three@0.185.1":"664ca387e5fab46ff2daaa6895e1d015426850891af5ea5082cbbcc3985b068c","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"environment":"Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0","renderer":"WebGL 2 via SwiftShader (software)","width":1080,"height":1080,"fps":30,"frames":360,"renderSeconds":739.9,"loopCheck":{"checked":true,"seamless":true,"maxDifference":0,"note":"Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/hypnotic-spiral/1.0.0/poster.webp","preview":"/media/hypnotic-spiral/1.0.0/preview.mp4","sample":"/media/hypnotic-spiral/1.0.0/sample.mp4","sampleBytes":1582339}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/hypnotic-spiral/1.0.0/LICENSE"},{"path":"asset.json","size":7676,"sha256":"c01d78ff4407c67c5a927f5aa5b0a85a32aef0e043daa62828f8976d8df8c829","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/hypnotic-spiral/1.0.0/asset.json"},{"path":"demo.js","size":1052,"sha256":"4158afb78a714561564f082f5986771c7814b64065510454f79e75a5cac25f36","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/hypnotic-spiral/1.0.0/demo.js"},{"path":"index.html","size":529,"sha256":"7091a4e8f50c1ae36aa8585548db5684378431d2c8dd6822f118e19c1483c3e9","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/hypnotic-spiral/1.0.0/index.html"},{"path":"src/hypnotic-spiral.js","size":10624,"sha256":"b70e722e52b3a926a7ff5bf97116fee6c95e8c9e05b51cfc9423b4a4198dcfc1","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/hypnotic-spiral/1.0.0/src/hypnotic-spiral.js"}],"warnings":[]}