---
title: "Grid Tunnel — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Jon Lehman · Backgrounds. A customizable 3D tunnel for bold"
canonical: "https://framer.elliotli.dev/component/grid-tunnel"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Grid Tunnel

# Grid Tunnel

A customizable 3D tunnel for bold

[View on Framer](https://framer.com/marketplace/components/grid-tunnel/?via=elliot-li)

![Grid Tunnel preview image 1](https://framer.elliotli.dev/og/component/grid-tunnel/94e5f8d342e9ffc6/1600x1200.jpg)

## Summary

A customizable 3D tunnel for bold

## Description

Turn any frame into an infinite 3D world. Combine bold perspective, seamless motion, custom colors, and uploaded media in one responsive WebGL effect.

## Use it for:

-   Immersive hero sections
    
-   Portfolio and campaign intros
    
-   Product launches and event sites
    
-   Interactive galleries and media walls
    
-   Playful transitions, backgrounds, and portals
    

## Customizable properties

### **Motion:**

-   **Autoplay:** Start automatically or on interaction
    
-   **Direction:** Travel in or out
    
-   **Speed:** Travel rate
    
-   **Spin:** Rotation rate
    
-   **Interaction:** Click, hover, or none
    
-   **Interaction Speed:** Active travel rate
    
-   **Interaction Spin:** Active rotation rate
    

### **Tunnel**

-   **Depth:** Tunnel length
    
-   **Cell Width:** Cell width
    
-   **Cell Height:** Depth-row height
    
-   **Tunnel Walls:** Choose 3–8 sides
    
-   **Anchor:** Camera framing
    
-   **Vanishing:** Convergence point
    
-   **Distance Fade:** Far-end fade
    

### **Content**

-   **Cell Colors:** Custom palette
    
-   **Media:** Images, GIFs, and videos
    
-   **Blank:** Empty-cell weight
    
-   **Color:** Color-cell weight
    
-   **Media Mix:** Media-cell weight
    
-   **Seed:** Repeatable layout
    

### **Style**

-   **Cell Base Color:** Empty-cell color
    
-   **Background:** Exterior and fade color
    
-   **Grid Lines:** Border color
    
-   **Horizontal Lines:** Toggle row lines
    
-   **Vertical Lines:** Toggle column lines
    
-   **Border Thickness:** Grid weight
    
-   **Corner Radius:** Frame rounding
    

### **Interaction**

-   **Hover Bubble:** Toggle cursor label
    
-   **Bubble Text:** Label copy
    
-   **Bubble Color:** Label background
    
-   **Bubble Text Color:** Label color
    
-   **Bubble Font:** Label typography
    
-   **Click URL:** Destination
    
-   **Open In:** Current or new tab
    
-   **Reduced Motion:** Respect visitor settings
    

## Features

-   **Bring your own media:** Mix unlimited colors with uploaded images, animated GIFs, and videos.
    
-   **Shape the space:** Build triangular, square, or multi-sided tunnels and move the vanishing point anywhere.
    
-   **Make it interactive:** Change speed and spin on click or hover, then send visitors to any destination.
    
-   **Built for performance:** Rendering pauses when idle or offscreen and resumes without animation jumps.
    

## Technical note:

**Animations play in Framer Preview and on published sites. The editing canvas displays a static preview for optimal performance.**

## Rank history [How rankings work →](/terms#rankings)

-   All · #6531

## Details

- **Author**: Jon Lehman
- **Price**: $9.00
- **Published**: 2026-07-14
- **Updated**: 2026-07-14
- **Added**: 2026-07-14
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background