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

Transform ordinary media into an interactive 3D perspective tunnel with continuous forward momentum, tactile cursor parallax, and fluid drag-scrub controls.

Features

Infinite 3D perspective corridor layout
Dual support for high-res images and looping videos
Inertial drag-to-scrub and mouse-wheel velocity momentum
Cursor-tracking reactive camera parallax and velocity tilt
Harmonic idle floating sway for natural depth
Interactive 3D raycast hover detection with plane lift
Dual-end smooth alpha fading to eliminate clipping pop-in
ACES filmic tone mapping with transparent canvas blending
Viewport-gated rendering pauses automatically off-screen
Responsive canvas auto-adapting to media aspect ratios

Customization Options

Custom image and video file uploads
Aspect ratio modes (Natural Fit vs Uniform Ratio)
Longitudinal corridor item spacing gap
Overall gallery scale multiplier
Flight travel direction (Towards or Away)
Cruise speed control
Drag-scrub sensitivity power
Mouse-wheel velocity power
Speed-based velocity tilt intensity
Cursor parallax tilt strength
Floating idle sway strength
Corridor wall width spacing
Inward wall perspective angle
Live canvas editor preview toggle

How to Use

Drop the component onto your Framer canvas
Upload your images or MP4/WebM video files
Select between Natural Fit or Uniform Aspect Ratio
Adjust corridor width, wall angles, and travel speed
Fine-tune drag scrub power and cursor parallax
Publish your site for an immersive 3D spatial showcase

Use Cases

Creative director and design portfolios
High-end digital agency project showcases
Fashion lookbooks and editorial campaigns
SaaS product feature highlight reels
Interactive hero section visual backdrops
Digital art exhibitions and 3D render corridors
Cinematic showreels and video archives
Modern landing page visual dividers
Event recap galleries and festival archives
Web3 and dark mode interactive experiences

5a:[["$","$L5d",null,{"post":{"id":"01a0edcc-2834-7045-b2fa-1517a967b9da","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b98a0c6d-195f-46fb-9abf-090b475fe09e","name":"Ameva","slug":"ameva","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/q91oiwbx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"G8LzHBt8GpxkhAnSmvo7","resolved":true,"title":"3D Tunnel Gallery","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Transform ordinary media into an interactive 3D perspective tunnel with continuous forward momentum, tactile cursor parallax, and fluid drag-scrub controls."}]},{"type":"paragraph","content":[{"type":"text","text":"Features"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Infinite 3D perspective corridor layout"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dual support for high-res images and looping videos"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inertial drag-to-scrub and mouse-wheel velocity momentum"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor-tracking reactive camera parallax and velocity tilt"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Harmonic idle floating sway for natural depth"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive 3D raycast hover detection with plane lift"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dual-end smooth alpha fading to eliminate clipping pop-in"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"ACES filmic tone mapping with transparent canvas blending"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Viewport-gated rendering pauses automatically off-screen"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive canvas auto-adapting to media aspect ratios"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customization Options"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom image and video file uploads"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Aspect ratio modes (Natural Fit vs Uniform Ratio)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Longitudinal corridor item spacing gap"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Overall gallery scale multiplier"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flight travel direction (Towards or Away)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cruise speed control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag-scrub sensitivity power"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mouse-wheel velocity power"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed-based velocity tilt intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor parallax tilt strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Floating idle sway strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corridor wall width spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inward wall perspective angle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live canvas editor preview toggle"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to Use"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload your images or MP4/WebM video files"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Select between Natural Fit or Uniform Aspect Ratio"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust corridor width, wall angles, and travel speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fine-tune drag scrub power and cursor parallax"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish your site for an immersive 3D spatial showcase"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use Cases"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative director and design portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-end digital agency project showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion lookbooks and editorial campaigns"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS product feature highlight reels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive hero section visual backdrops"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital art exhibitions and 3D render corridors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cinematic showreels and video archives"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern landing page visual dividers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Event recap galleries and festival archives"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Web3 and dark mode interactive experiences"}]}]}]}]},"introduction":"Infinite media tunnel with physics","slug":"3d-tunnel-gallery","author":{"framerUserId":"b98a0c6d-195f-46fb-9abf-090b475fe09e","name":"Ameva","slug":"ameva","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/q91oiwbx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/01a0edcc-06b1-7168-bba0-9c1ca1778e02.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-29T15:32:54.288Z","updatedAt":"2026-09-29T17:12:13.255Z","publishedAt":"2026-09-29T15:32:54.285Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Dfv-yAoxdO.js@vb6SAw0VTxS45WUvhOlS","previewUrl":"https://true-companies-561525.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"vb6SAw0VTxS45WUvhOlS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-29T15:32:54.964Z","updatedAt":"2026-09-29T15:32:54.964Z","reported":false}}],"$L5f"]

Suggested for you