5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3fk0f7q4960ol.js","/creators-assets/_next/static/immutable/chunks/00fdmr6kfsdrw.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/1zwfgkv6hl7ih.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1xwqa9rrktdcw.js","/creators-assets/_next/static/immutable/chunks/1p5p3hxx00owh.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/11rwwufuwaox5.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/2riq6xk2ap_dl.js","/creators-assets/_next/static/immutable/chunks/1q3yt3z40r1ue.js","/creators-assets/_next/static/immutable/chunks/3_2gh-txmrtwa.js","/creators-assets/_next/static/immutable/chunks/3xhwx36tyhh8-.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2jy6qwxbn3dqw.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5f:Tdef,

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.

5b:[["$","$L5e",null,{"post":{"id":"019f60d9-f4a3-77a0-93d0-0181ef2e52a8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"144bb542-fa31-40db-a8ab-09cdaeb2c55f","name":"Jon Lehman","slug":"jon-lehman","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/137826/avatar-klKbNV3Ei7fs1uYJHaroVAnN5Hud8D.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"jbulcNzySAebKNswEGeO","resolved":true,"title":"Grid Tunnel","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn any frame into an infinite 3D world. Combine bold perspective, seamless motion, custom colors, and uploaded media in one responsive WebGL effect."}]},{"type":"customHeading","content":[{"type":"text","text":"Use it for:"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Immersive hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio and campaign intros"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product launches and event sites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive galleries and media walls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Playful transitions, backgrounds, and portals"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customizable properties"}],"attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Motion:","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay:","marks":[{"type":"bold"}]},{"type":"text","text":" Start automatically or on interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Direction:","marks":[{"type":"bold"}]},{"type":"text","text":" Travel in or out"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed:","marks":[{"type":"bold"}]},{"type":"text","text":" Travel rate"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spin:","marks":[{"type":"bold"}]},{"type":"text","text":" Rotation rate"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction:","marks":[{"type":"bold"}]},{"type":"text","text":" Click, hover, or none"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction Speed:","marks":[{"type":"bold"}]},{"type":"text","text":" Active travel rate"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction Spin:","marks":[{"type":"bold"}]},{"type":"text","text":" Active rotation rate"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Tunnel","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Depth:","marks":[{"type":"bold"}]},{"type":"text","text":" Tunnel length"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cell Width:","marks":[{"type":"bold"}]},{"type":"text","text":" Cell width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cell Height:","marks":[{"type":"bold"}]},{"type":"text","text":" Depth-row height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tunnel Walls:","marks":[{"type":"bold"}]},{"type":"text","text":" Choose 3–8 sides"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Anchor:","marks":[{"type":"bold"}]},{"type":"text","text":" Camera framing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Vanishing:","marks":[{"type":"bold"}]},{"type":"text","text":" Convergence point"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Distance Fade:","marks":[{"type":"bold"}]},{"type":"text","text":" Far-end fade"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Content","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cell Colors:","marks":[{"type":"bold"}]},{"type":"text","text":" Custom palette"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Media:","marks":[{"type":"bold"}]},{"type":"text","text":" Images, GIFs, and videos"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blank:","marks":[{"type":"bold"}]},{"type":"text","text":" Empty-cell weight"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color:","marks":[{"type":"bold"}]},{"type":"text","text":" Color-cell weight"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Media Mix:","marks":[{"type":"bold"}]},{"type":"text","text":" Media-cell weight"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Seed:","marks":[{"type":"bold"}]},{"type":"text","text":" Repeatable layout"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Style","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cell Base Color:","marks":[{"type":"bold"}]},{"type":"text","text":" Empty-cell color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background:","marks":[{"type":"bold"}]},{"type":"text","text":" Exterior and fade color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grid Lines:","marks":[{"type":"bold"}]},{"type":"text","text":" Border color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Horizontal Lines:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle row lines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Vertical Lines:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle column lines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border Thickness:","marks":[{"type":"bold"}]},{"type":"text","text":" Grid weight"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corner Radius:","marks":[{"type":"bold"}]},{"type":"text","text":" Frame rounding"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Interaction","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover Bubble:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle cursor label"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bubble Text:","marks":[{"type":"bold"}]},{"type":"text","text":" Label copy"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bubble Color:","marks":[{"type":"bold"}]},{"type":"text","text":" Label background"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bubble Text Color:","marks":[{"type":"bold"}]},{"type":"text","text":" Label color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bubble Font:","marks":[{"type":"bold"}]},{"type":"text","text":" Label typography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click URL:","marks":[{"type":"bold"}]},{"type":"text","text":" Destination"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open In:","marks":[{"type":"bold"}]},{"type":"text","text":" Current or new tab"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced Motion:","marks":[{"type":"bold"}]},{"type":"text","text":" Respect visitor settings"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Bring your own media:","marks":[{"type":"bold"}]},{"type":"text","text":" Mix unlimited colors with uploaded images, animated GIFs, and videos."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shape the space:","marks":[{"type":"bold"}]},{"type":"text","text":" Build triangular, square, or multi-sided tunnels and move the vanishing point anywhere."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Make it interactive:","marks":[{"type":"bold"}]},{"type":"text","text":" Change speed and spin on click or hover, then send visitors to any destination."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built for performance:","marks":[{"type":"bold"}]},{"type":"text","text":" Rendering pauses when idle or offscreen and resumes without animation jumps."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Technical note:"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Animations play in Framer Preview and on published sites. The editing canvas displays a static preview for optimal performance.","marks":[{"type":"bold"}]}]}]},"introduction":"A customizable 3D tunnel for bold","slug":"grid-tunnel","author":{"framerUserId":"144bb542-fa31-40db-a8ab-09cdaeb2c55f","name":"Jon Lehman","slug":"jon-lehman","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/137826/avatar-klKbNV3Ei7fs1uYJHaroVAnN5Hud8D.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/144bb542-fa31-40db-a8ab-09cdaeb2c55f/019f60d9-cd88-764a-b8ec-bb5f605b3b30.png","metadata":{"tint":"hsl(30 29% 55%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-07-14T13:38:44.049Z","updatedAt":"2026-07-14T15:47:50.828Z","publishedAt":"2026-07-14T13:38:44.046Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://turquoise-convention-536562.framer.app/","price":"9","paymentUrl":"https://medleylabsco.lemonsqueezy.com/checkout/buy/2fc90f1e-2476-45bc-9728-49cce7912ec8","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"hXdv0bji5uE0szugmFjG"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-14T13:38:44.515Z","updatedAt":"2026-07-14T13:38:44.515Z","reported":false}}],"$L60"]

Suggested for you