Preview - https://card3dtunnelslow.framer.website/
3D Card Tunnel adds a deeply immersive, looping layered environment directly to your Framer projects. Drop it into a hero section, a landing page, or a feature showcase to instantly capture attention with a cinematic sense of depth. Your cards stack and move through a continuous three dimensional space, drawing visitors deeper into your content as they explore your site.
Creates a dynamic tunnel effect using sequential layers that automatically pull forward or react directly to page scrolling. It smoothly handles image depth, manages loop resets for non-stop movement, and blends distant layers with a customizable blur and fog effect. The component is fully responsive, meaning your 3D tunnel will scale naturally and look great across mobile devices, tablets, and large screens.
Tunnel layout: Total number of depth levels, the precise Z spacing between each card, and the overall perspective intensity.
Motion and flow: Toggle auto pull on or off, adjust the pulling speed, enable scroll reactivity, and turn looping on for endless animation.
Atmosphere: Turn background fog on or off, pick a custom fog color to match your brand, toggle an outer vignette, and set the blur strength for distant cards.
Card styling: Exact card width and height, corner radius smoothing, and horizontal X spread to offset your items.
Hero headers and intro sections
Product feature and benefit showcases
Creative portfolios and agency sites
Immersive storytelling landing pages
Visual galleries that need an extra pop
If you build something awesome with this, share it on X and tag me @Dulajweb or send it my way. I would love to check out what you create.
Have any questions or feedback about setting it up? Reach out anytime at dulajdilshan766@gmail.com or find me on X @Dulajweb
Preview - https://card3dtunnelslow.framer.website/
3D Card Tunnel adds a deeply immersive, looping layered environment directly to your Framer projects. Drop it into a hero section, a landing page, or a feature showcase to instantly capture attention with a cinematic sense of depth. Your cards stack and move through a continuous three dimensional space, drawing visitors deeper into your content as they explore your site.
Creates a dynamic tunnel effect using sequential layers that automatically pull forward or react directly to page scrolling. It smoothly handles image depth, manages loop resets for non-stop movement, and blends distant layers with a customizable blur and fog effect. The component is fully responsive, meaning your 3D tunnel will scale naturally and look great across mobile devices, tablets, and large screens.
Tunnel layout: Total number of depth levels, the precise Z spacing between each card, and the overall perspective intensity.
Motion and flow: Toggle auto pull on or off, adjust the pulling speed, enable scroll reactivity, and turn looping on for endless animation.
Atmosphere: Turn background fog on or off, pick a custom fog color to match your brand, toggle an outer vignette, and set the blur strength for distant cards.
Card styling: Exact card width and height, corner radius smoothing, and horizontal X spread to offset your items.
Hero headers and intro sections
Product feature and benefit showcases
Creative portfolios and agency sites
Immersive storytelling landing pages
Visual galleries that need an extra pop
If you build something awesome with this, share it on X and tag me @Dulajweb or send it my way. I would love to check out what you create.
Have any questions or feedback about setting it up? Reach out anytime at dulajdilshan766@gmail.com or find me on X @Dulajweb
