5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T91a,

Infinite Tunnel is a true 3D flight through an endless tunnel of image cards for Framer. Your images fly toward the camera out of the depth, and the tunnel loops forever as you scroll or drag, recycling cards seamlessly so it never runs out.

It is built on real browser perspective, so the depth is genuine 3D, not scaled flat images. No three.js, no GSAP, no libraries.

Three arrangements

Spiral, a helix that twists into a vortex as cards approach.
Corridor, cards on the four walls of a hallway you fly down.
Scatter, a loose cloud drifting past on both sides.

How you fly it

Scroll to fly, drag up and down to fly forward and back, or set a constant auto fly. All three can be on at once. A short press without moving clicks the card under the cursor and follows its link.

Camera and atmosphere

Depth sets the lens, Twist winds the spiral or rolls the field, and Mouse Sway tilts the tunnel toward the cursor. Fog fades the far end into the background, Motion Blur streaks the fast flight, and a Vignette holds the eye on the centre.

Manual or CMS

Add cards by hand, each with an image, a caption, and a link, or drop a Collection List into the slot: image becomes the card, the first text becomes the caption, and the row link is followed on click. A few images cycle to fill the tunnel, and it ships with Framer hosted placeholders so it looks complete on drop in.

Controls

Grouped for clarity: Source, Layout, Motion, Camera, Effects, and Style. Every control carries its own one line description in the panel.

What you get

A true 3D infinite tunnel of image cards with three arrangements, scroll and drag and auto flight, depth fog, motion blur, mouse sway, a vignette, manual or CMS data, keyboard-accessible click through links, no npm dependencies, a calm static preview, and free updates within the version.

Made with 🖤 for Framer by Harsh

5a:[["$","$L5d",null,{"post":{"id":"019fade0-b814-750c-9158-a013dab7f780","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6742a5cc-f892-4459-8697-923dd5a77da4","name":"Harsh Works","slug":"harshworks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/131569/avatar-a0B3vAmCYXJActVKja9SCf8bMXQquH.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"5NdavSQyuEhygwuuW5EN","resolved":true,"title":"Infinite Tunnel","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Infinite Tunnel is a true 3D flight through an endless tunnel of image cards for Framer. Your images fly toward the camera out of the depth, and the tunnel loops forever as you scroll or drag, recycling cards seamlessly so it never runs out."}]},{"type":"paragraph","content":[{"type":"text","text":"It is built on real browser perspective, so the depth is genuine 3D, not scaled flat images. No three.js, no GSAP, no libraries."}]},{"type":"customHeading","content":[{"type":"text","text":"Three arrangements"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spiral","marks":[{"type":"bold"}]},{"type":"text","text":", a helix that twists into a vortex as cards approach."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corridor","marks":[{"type":"bold"}]},{"type":"text","text":", cards on the four walls of a hallway you fly down."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scatter","marks":[{"type":"bold"}]},{"type":"text","text":", a loose cloud drifting past on both sides."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How you fly it"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Scroll to fly, drag up and down to fly forward and back, or set a constant auto fly. All three can be on at once. A short press without moving clicks the card under the cursor and follows its link."}]},{"type":"customHeading","content":[{"type":"text","text":"Camera and atmosphere"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Depth sets the lens, Twist winds the spiral or rolls the field, and Mouse Sway tilts the tunnel toward the cursor. Fog fades the far end into the background, Motion Blur streaks the fast flight, and a Vignette holds the eye on the centre."}]},{"type":"customHeading","content":[{"type":"text","text":"Manual or CMS"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Add cards by hand, each with an image, a caption, and a link, or drop a Collection List into the slot: image becomes the card, the first text becomes the caption, and the row link is followed on click. A few images cycle to fill the tunnel, and it ships with Framer hosted placeholders so it looks complete on drop in."}]},{"type":"customHeading","content":[{"type":"text","text":"Controls"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Grouped for clarity: Source, Layout, Motion, Camera, Effects, and Style. Every control carries its own one line description in the panel."}]},{"type":"customHeading","content":[{"type":"text","text":"What you get"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"A true 3D infinite tunnel of image cards with three arrangements, scroll and drag and auto flight, depth fog, motion blur, mouse sway, a vignette, manual or CMS data, keyboard-accessible click through links, no npm dependencies, a calm static preview, and free updates within the version."}]},{"type":"paragraph","content":[{"type":"text","text":"Made with "},{"type":"emoji","attrs":{"name":"black_heart","emoji":"🖤"}},{"type":"text","text":" for "},{"type":"text","text":"Framer","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://framer.link/harshupadhyay","target":"_blank"}},{"type":"bold"}]},{"type":"text","text":" by "},{"type":"text","text":"Harsh","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://harsh.works/","target":"_blank"}},{"type":"bold"}]}]}]},"introduction":"A 3D flight through endless image","slug":"infinite-tunnel","author":{"framerUserId":"6742a5cc-f892-4459-8697-923dd5a77da4","name":"Harsh Works","slug":"harshworks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/131569/avatar-a0B3vAmCYXJActVKja9SCf8bMXQquH.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/6742a5cc-f892-4459-8697-923dd5a77da4/019fade0-94de-70dc-a259-dcd77d4afcb9.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1920,"height":1440}}],"post":null,"createdAt":"2026-07-29T12:36:53.049Z","updatedAt":"2026-09-13T04:02:46.644Z","publishedAt":"2026-07-29T12:36:53.044Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/InfiniteTunnel-MtUYPS.js@NJh2Hp5t8HZj5xYY4WNj","previewUrl":"https://infinitetunnel.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"NJh2Hp5t8HZj5xYY4WNj","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-29T12:36:53.396Z","updatedAt":"2026-07-29T12:36:53.396Z","reported":false}}],"$L5f"]

Suggested for you