Galleries & carousels
Also searched as: galleries, carousels, cover flow, card reel, media tunnel, bento pan
Canonical Definition
Galleries and carousels are multi-item motion structures — Cover Flow decks, 3D tunnel reels, and scrolling card feeds — that display portfolios, product catalogs, and collections.
45 to 60 frames per item advance (1.5s - 2s)
cubic-bezier(0.25, 1, 0.5, 1)
When a narrative requires showcasing variety, customer testimonials, or a gallery of templates, displaying them one by one feels slow. A carousel conveys volume and momentum simultaneously.
Card rails fold in 3D perspective, cycle through active hero states, and auto-advance with rhythmic spring mechanics.
3D Perspective Cover Flow
Folding side cards while elevating the active center hero
As cards advance, the outgoing center card rotates away along the Y-axis while the incoming card snaps to flat orientation and full saturation.
How this works: A dynamic 3D media tunnel guiding the camera past sequential showcase assets.
- Z-axis spatial depth camera dive
- Perspective rotation on peripheral gallery items
- Continuous motion with timed cadence beats
Infinite Bento Pans & Card Rails
Navigating across a modular grid of features and screenshots
A bento pan glides smoothly across a multi-card canvas, spotlighting one feature before panning diagonally to the next.
How this works: An infinite bento grid that pans diagonally across product capabilities.
- Modular bento aspect-ratio tiles (1x1, 2x1, 2x2)
- Smooth continuous sub-pixel velocity
- Ideal for feature overview videos and sizzle reels
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Dim background inactive cards to 60% opacity to maintain clear hierarchy with the active hero card.
Common Failure Modes (What to avoid)
- Advancing so rapidly that the viewer cannot recognize the content of any single card.
Working catalog implementations
Typed Remotion components ready to drop into code.
Gallery Tunnel
An infinite corridor of panels: a square tunnel receding to a vanishing point, its floor, ceiling and walls tiled with saturated colour slabs and caller-supplied images that swell toward camera and exit past you, the far end dissolving into fog.
Share-Sheet Carousel
A share sheet springs up from the bottom of the phone and cycles previews inside its card on a fast cut rhythm while the blurred ground swaps behind it, ending on an accept tap
Infinite Bento Pan
A camera diagonally drifts across an oversized bento grid behind a soft vignette.
Scroll Feed
A loop-friendly column of varied skeleton post cards scrolls upward with subtle motion trails and an agitated pace.
Build galleries & carousels in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
Scenes & layouts
Scenes and layouts are structural composition systems — split screens, radial stages, side-by-side comparisons, and responsive frames — that organize multi-element narratives.
Composition & UIProduct demos & devices
Product demos and device scenes present digital software interfaces inside simulated smartphone, tablet, or desktop frames with realistic camera staging and cursor interactions.
Motion FundamentalsSpring physics & overshoot
Spring physics is a physical simulation model based on Hooke's Law that computes motion from mass, tension (stiffness), and friction (damping), producing organic overshoot and settlement.