Motion Gallery · 3D & Perspective
Card Tunnel
An infinite perspective corridor — four walls of cards flying to a vanishing point.
Example 1 · Scroll choreography
Scroll to play — reveal & dissolve
A full scroll choreography. Motion → Scroll-scrub with Pin on, so YOUR scroll drives the motion — not a timer. Paired with Entrance (Style tab): as the gallery pins to the screen the cards fade in one by one, it animates as you scroll, then they dissolve one by one on the way out.
Example 2 · Entrance + pause on hover
Fly the corridor, pause on hover
The default — four walls of cards receding to a vanishing point, flying forward. The whole tunnel zooms in on load; Motion → On Hover is Pause. Click a card to open the lightbox.
Example 3 · Immersive fly-through
Walls opened out around you
A large Tunnel Size (100%) opens the walls right out to the edges of the frame for an immersive fly-through — you are inside the corridor rather than looking at a tube.
Example 4 · Tight tube
A tight tube from outside
A small Tunnel Size (30%) pulls the walls into a tight tube seen from outside, streaking away to the vanishing point.
Example 5 · Long panels & depth fade
Long panels into the dark
Longer cards (Card Length 60%) make fewer, streaking panels, and Depth Fade 90% dissolves the far end of the tunnel into darkness — flying Backward.
Example 6 · Rounded & spaced
Rounded, roomy corridor
Rounder corners with a wider Gap between the panels and a mid Card Length — a calmer, roomier corridor. Click a card to open it full-size.
Example 7 · Spiralling image tunnel
A square tunnel that spirals
The new Square cross-section makes a clean, symmetrical corridor, and Spiral rolls it into a helix as your scroll flies you through — Motion → Scroll-scrub with Pin on. This is the classic "fly through a tunnel of your images" moment.
Example 8 · Clean square corridor
A perfectly square corridor
Just Square cross-section on its own (no spiral) — an even-sided tube of your images flying forward, immersive at Tunnel Size 100%. The symmetry reads as a deliberate architectural space rather than a stretched rectangle.
Example 9 · Vortex
A swirling vortex
A tighter tube with a strong Spiral (360°) and Depth Fade winds the corridor into a swirling vortex spinning back into the dark — flying Backward for the "falling in" feel. Plus Stage Overflow = Spill, so the fanned cards show in full beyond the stage box — and the gallery sits at Z-Index −1 (Advanced → Position: Relative) behind this heading, so the title stays clean in front of the overflow.
Docs & Playground
Tweak every option live
Play with all of these settings in real time and read the full option reference in the manual.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.