{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"infinite-tunnel","type":"registry:block","title":"infinite tunnel","description":"\"intro flies through 79\" — endless forward motion through recycling geometry. Openers and 404s.","author":"Motion Menu","categories":["role-hero","webgl","3d","three"],"dependencies":["three"],"registryDependencies":["@motionmenu/motion-menu-runtime"],"meta":{"number":"79","slug":"infinite-tunnel","framework":"react","docs":"https://motion-menu-two.vercel.app/p/infinite-tunnel.md"},"files":[{"path":"motion-menu/infinite-tunnel.html","type":"registry:file","target":"motion-menu/infinite-tunnel.html","content":"<article class=\"card\">\n        <header><span class=\"num\">79</span><h3>Infinite tunnel</h3><div class=\"tags\"><i>Three.js</i></div><a class=\"format-action\" data-format-link data-pattern-slug=\"infinite-tunnel\" href=\"/r/infinite-tunnel.json?framework=react\" title=\"Open the React registry output\">React ↗</a></header>\n        <div class=\"demo\"><canvas class=\"gl\" id=\"gl-tunnel\"></canvas></div>\n        <p class=\"order\">Say: <b>\"intro flies through 79\"</b> — endless forward motion through recycling geometry. Openers and 404s.</p>\n      </article>"},{"path":"motion-menu/infinite-tunnel.css","type":"registry:file","target":"motion-menu/infinite-tunnel.css","content":".card {\n    border: 1px solid var(--line); border-radius: 14px; background: var(--card);\n    overflow: hidden; display: flex; flex-direction: column;\n  }\n\n.card > header { display: flex; align-items: baseline; gap: .8rem; padding: 1.1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); }\n\n.card .num { font-family: var(--mono); color: var(--acc); font-size: 1.05rem; }\n\n.card h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; }\n\n.tags { display: flex; gap: .35rem; }\n\n.tags i {\n    font: 400 .62rem/1 var(--mono); font-style: normal; color: var(--dim);\n    border: 1px solid var(--line); border-radius: 99px; padding: .28em .6em; white-space: nowrap;\n  }\n\n.demo {\n    min-height: 250px; position: relative; display: flex; align-items: center; justify-content: center;\n    background: var(--bg2); overflow: hidden; flex: 1;\n  }\n\n.order { padding: .85rem 1.2rem; font-family: var(--mono); font-size: .72rem; color: var(--dim); border-top: 1px solid var(--line); }\n\n.order b { color: var(--txt); font-weight: 500; }\n\n.demo .btn.corner { position: absolute; top: 12px; right: 12px; padding: .55em 1em; font-size: .68rem; z-index: 5; }\n\ncanvas.gl { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }\n\n.ai-card .num { color: var(--acc2) !important; }\n\n.demo:has(.hascheck input:checked) .hasbtn { border-color: var(--acc); color: var(--acc); pointer-events: auto; opacity: 1; }"},{"path":"components/motion-menu/infinite-tunnel.tsx","type":"registry:component","content":"// @ts-nocheck — generated wrapper; inlined pattern JS is imperative DOM code, not authored TS.\n\"use client\";\n// infinite tunnel — Motion Menu\n// Calls the Motion Menu shared runtime (webglDemo / canvas2dDemo / art helpers).\n// Install `motion-menu-runtime` and mount it once at the app root, or the effect\n// below throws ReferenceError on first paint.\nimport { useEffect, useRef } from \"react\";\n\nconst MARKUP = \"<article class=\\\"card\\\">\\n        <header><span class=\\\"num\\\">79</span><h3>Infinite tunnel</h3><div class=\\\"tags\\\"><i>Three.js</i></div><a class=\\\"format-action\\\" data-format-link data-pattern-slug=\\\"infinite-tunnel\\\" href=\\\"/r/infinite-tunnel.json?framework=react\\\" title=\\\"Open the React registry output\\\">React \\u2197</a></header>\\n        <div class=\\\"demo\\\"><canvas class=\\\"gl\\\" id=\\\"gl-tunnel\\\"></canvas></div>\\n        <p class=\\\"order\\\">Say: <b>\\\"intro flies through 79\\\"</b> \\u2014 endless forward motion through recycling geometry. Openers and 404s.</p>\\n      </article>\";\n\nexport function InfiniteTunnel() {\n  const hostRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const $ = (s: string) => host.querySelector(s) as HTMLElement | null;\n    let disposed = false;\n    const cleanup: Array<() => void> = [];\n\n    (async () => {\n      if (disposed) return;\n      try {\n        /* ---- 79 · infinite tunnel ---- */\n        webglDemo('gl-tunnel', ({ scene, camera }) => {\n          camera.position.z = 0;\n          scene.fog = new THREE.FogExp2(0x0a0a0e, 0.09);\n          const RINGS = 34;\n          const rings = [];\n          for (let i = 0; i < RINGS; i++) {\n            const geo = new THREE.TorusGeometry(2.2, 0.02, 8, 48);\n            const mat = new THREE.MeshBasicMaterial({ color: i % 4 === 0 ? 0xb7ff2e : 0x7a5cff });\n            const ring = new THREE.Mesh(geo, mat);\n            ring.position.z = -i * 1.6;\n            scene.add(ring);\n            rings.push(ring);\n          }\n          return { update(t, delta) {\n            rings.forEach((ring, i) => {\n              ring.position.z += delta * 7;\n              if (ring.position.z > 1) ring.position.z -= RINGS * 1.6;\n              ring.position.x = Math.sin(t * 0.4 + ring.position.z * 0.18) * 0.5;\n              ring.position.y = Math.cos(t * 0.3 + ring.position.z * 0.15) * 0.35;\n              ring.rotation.z = t * 0.15 + i * 0.05;\n            });\n            camera.rotation.z = Math.sin(t * 0.25) * 0.06;\n          }};\n        });\n      } catch (err: any) {\n        console.warn(\"[motion-menu] infinite-tunnel failed to start:\", err);\n      }\n    })();\n\n    return () => {\n      disposed = true;\n      cleanup.forEach((fn) => { try { fn(); } catch (_) {} });\n    };\n  }, []);\n\n  return <div ref={hostRef} dangerouslySetInnerHTML={{ __html: MARKUP }} />;\n}\n\nexport default InfiniteTunnel;\n"}]}