A kinetic WebGL tunnel effect that pulls the eye through a vanishing-point grid for technical launches and portfolio heroes.

Grid Tunnel pulls the eye through technical space before the product story begins.
Use it for AI launches, developer tools, cybersecurity pages, and technical portfolios where kinetic depth is the opening signal. The page job is momentum: the tunnel should frame the first claim, not become a loading screen disguised as craft.
The thing to watch is sustained motion. A tunnel can drain attention and GPU if it keeps running after it has made its point.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
Use this as WebGL production guidance. Verify the shipped source, rendering stack, dependency list, shader assets, resource disposal, pause/offscreen behavior, DPR strategy, poster fallback, and reduced-motion state before relying on exact props, defaults, imports, or installation steps.
Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.
Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Grid Tunnel offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled.
Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate.
| Prop | Type | Default | Description |
|---|---|---|---|
gridSize | number | 24 | Tunnel grid density. |
speed | number | 1 | Scroll and touch travel speed. |
depth | number | 1000 | Visible tunnel fog depth. |
lineColor | string | #9ca3af | Grid line color. |
backgroundColor | string | #ffffff | Tunnel background color. |
The continuous travel-through-space motion keeps the loop busy, so cap DPR at 1.0 on mobile and 1.5 on desktop and keep tunnel geometry and depth complexity in check. Slow or simplify the motion on the lower tier. Verify sustained smoothness on a phone, since the effect runs continuously.
Provide a still that captures the sense of depth a frame looking down the tunnel, so the fallback keeps the technical mood. HTML copy and CTA remain intact above it. The still should feel deliberate, not like a broken frame.
Because the tunnel animates constantly, pausing offscreen and in hidden tabs matters most here. Stop the loop and resume on visibility. Leaving it running is a guaranteed battery drain. Demand rendering plus a visibility check is the right pattern.
All headline and body content stays in HTML over the canvas; the tunnel is a backdrop, not a container. Don't paint any message into the moving geometry. Keep links and buttons as real DOM elements.
Choose a static backdrop when continuous motion would distract from the copy, when performance is tight, or when the audience is mostly mobile. If the depth illusion isn't advancing the message, a still costs far less. Use the live tunnel only where kinetic depth is the hook.
Need a custom effect? Tell us what to create.