Grid Tunnel
A kinetic WebGL tunnel effect that pulls the eye through a vanishing-point grid for technical launches and portfolio heroes.
Overview
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.
Install Command
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Usage Code
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Component Code
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
This is a Pro Effect.
You can preview it now. Upgrade to Pro for instant install access.
Example Production Use Case
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.
Best Used For
- Technical launches where vanishing-point depth supports the positioning before the copy expands it.
- Developer-tool and cybersecurity heroes where engineered space is part of the brand language.
- Portfolio openers where kinetic depth earns its GPU budget.
Not For
Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.
Performance Budget
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.
Accessibility and Mobile
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.
Common Mistakes
- Running continuous tunnel motion when a still depth frame would do the job.
- Letting tunnel movement reduce headline legibility.
- Forgetting to pause the loop when the section is offscreen or the tab is hidden.
Changelog
v1.2.0
Jul 24, 2026v1.1.0
Jul 21, 2026Props
| 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. |
Frequently Asked Questions
What GPU budget should Grid Tunnel use on mobile and desktop?
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.
What poster fallback should replace Grid Tunnel when WebGL fails?
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.
How should Grid Tunnel pause when offscreen or in a hidden tab?
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.
Which content should stay outside the Grid Tunnel canvas?
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.
When should I choose a static image instead of Grid Tunnel?
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.
Request a Custom WebGL Animation
Need a custom effect? Tell us what to create.
