3D Gallery · Carousel & Flow
Hero Reel
A reel of thumbnails over a dimmed, Ken-Burns hero — the active card fills the stage.
Example 1 · Entrance + pause on hover
Reel over a living hero
A reel of thumbnail cards steps through the centre; the active one scales up and fills the whole stage as a dimmed, slowly-zooming (Ken Burns) hero behind the reel, cross-fading as it advances. The whole reel fades in on load; Motion → On Hover is Pause. Click a card to open the lightbox.
Example 2 · Bold hero
A stronger hero, bigger active
A brighter hero (Hero Opacity 85%) with a deeper Ken Burns push, and a bolder active card — it scales to 135% and lifts higher above the reel.
Example 3 · Reel only
No hero background
Hero Opacity 0 hides the background entirely — just the reel of smaller thumbnails floating over the stage colour, the active one still popping.
Example 4 · Tight & quick
A dense, fast reel
Smaller thumbnails packed tight (Card Size 12%, minimal spacing) stepping quickly — a short Hold moves the hero on fast.
Example 5 · Ratio & corners
Square thumbnails, rounder
Square 1:1 thumbnails (the default is 4:3) with rounder corners and a slightly stronger hero. Click a card to open it full-size.
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.