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:T84f,

3D Gallery Tunnel is a premium WebGL-powered image gallery that transforms a collection of images into a stunning three-dimensional tunnel experience. Images are distributed along a dynamic 3D path, creating an immersive journey as users scroll through the scene. Smooth camera movement, depth-based scaling, and realistic perspective combine to deliver a modern, cinematic browsing experience that feels fluid and engaging.

Users can navigate naturally using the mouse wheel or touch gestures, while an optional auto-scroll mode continuously moves through the tunnel for an effortless, animated presentation. The component includes four unique tunnel paths—Helix, Figure-8, Spiral, and Wave—that can be switched instantly, each providing a distinct visual experience without reloading the scene. Transitions between paths are smoothly animated for a polished feel.

Built with performance in mind, the component offers extensive customization directly from Framer. Adjust the number of image planes, background color, fog depth, focus distance, maximum image scaling, auto-scroll speed, default path, and the visibility of the path selector and auto-scroll controls. Images can be supplied via direct URLs or uploaded through Framer's image picker, making it easy to integrate into portfolios, photography showcases, product galleries, creative websites, and interactive landing pages.

Key Features

Four switchable tunnel paths: Helix, Figure-8, Spiral, and Wave.
Smooth mouse wheel and touch navigation.
Optional auto-scroll with adjustable speed.
Animated transitions between tunnel paths.
Depth-based image scaling for immersive focus effects.
Adjustable image count for performance and density.
Customizable fog, background, focus distance, and scaling.
Show or hide path selector and auto-scroll controls.
Supports uploaded images and external image URLs.
Responsive WebGL rendering optimized for modern browsers.

5a:[["$","$L5d",null,{"post":{"id":"019f5b38-52b8-74e9-b272-232aaf050469","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f1605d16-3738-4772-8b1f-960f69e43c1f","name":"Mohd Qasim","slug":"mohd-qasim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1578570/avatar-vEAMaKseGusvLs3cBK3fTMKwFnWzh1.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"l97FTHcGasF9WC0qWPqW","resolved":true,"title":"3D Gallery Tunnel","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"3D Gallery Tunnel is a premium WebGL-powered image gallery that transforms a collection of images into a stunning three-dimensional tunnel experience. Images are distributed along a dynamic 3D path, creating an immersive journey as users scroll through the scene. Smooth camera movement, depth-based scaling, and realistic perspective combine to deliver a modern, cinematic browsing experience that feels fluid and engaging."}]},{"type":"paragraph","content":[{"type":"text","text":"Users can navigate naturally using the mouse wheel or touch gestures, while an optional auto-scroll mode continuously moves through the tunnel for an effortless, animated presentation. The component includes four unique tunnel paths—Helix, Figure-8, Spiral, and Wave—that can be switched instantly, each providing a distinct visual experience without reloading the scene. Transitions between paths are smoothly animated for a polished feel."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with performance in mind, the component offers extensive customization directly from Framer. Adjust the number of image planes, background color, fog depth, focus distance, maximum image scaling, auto-scroll speed, default path, and the visibility of the path selector and auto-scroll controls. Images can be supplied via direct URLs or uploaded through Framer's image picker, making it easy to integrate into portfolios, photography showcases, product galleries, creative websites, and interactive landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Four switchable tunnel paths: Helix, Figure-8, Spiral, and Wave."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth mouse wheel and touch navigation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional auto-scroll with adjustable speed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated transitions between tunnel paths."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Depth-based image scaling for immersive focus effects."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable image count for performance and density."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable fog, background, focus distance, and scaling."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Show or hide path selector and auto-scroll controls."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Supports uploaded images and external image URLs."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive WebGL rendering optimized for modern browsers."}]}]}]}]},"introduction":"Four path modes with autoplay","slug":"3d-gallery-tunnel","author":{"framerUserId":"f1605d16-3738-4772-8b1f-960f69e43c1f","name":"Mohd Qasim","slug":"mohd-qasim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1578570/avatar-vEAMaKseGusvLs3cBK3fTMKwFnWzh1.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f1605d16-3738-4772-8b1f-960f69e43c1f/019f5b38-2b0d-7260-a8a5-4a5c40f3b4a9.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-13T11:24:05.353Z","updatedAt":"2026-07-13T12:18:10.033Z","publishedAt":"2026-07-13T11:24:05.349Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://3dgallerytunnel.framer.website/","price":"12","paymentUrl":"https://buy.polar.sh/polar_cl_Ds7bwuRXPrEb7XAg8qnugYLpFsTZttNp9AMIq402yjN","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"211Q8eJF8XhFYxnYfSbh","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-13T11:24:05.688Z","updatedAt":"2026-07-13T11:24:05.688Z","reported":false}}],"$L5f"]

Suggested for you