Cinematic Horizontal Gallery
A large media rail for project browsing with variable widths, snapping and optional scroll mapping.
- editorial
- horizontal
- gallery
- snap
- media
Open plan
01 / 04Shared studio
02 / 04Quiet room
03 / 04Long table
04 / 041 / 4
Usage
usage
import { CinematicHorizontalGallery } from "@pinky-ui/layouts";
<CinematicHorizontalGallery items={projects} verticalMapping={false} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | CinematicGalleryItem[] | — | Large media cards with labels, metadata and optional widths. |
| className | string | — | Styles the outer layout surface. |
| disabled | boolean | false | Keeps the content and interaction while removing spatial choreography. |
Accessibility
- The rail is a focusable list with Arrow, Home and End navigation.
- Previous/next buttons mirror the scroll interaction.
- Captions stay in the DOM and are not hover-only.
Performance
- Native overflow is the default and does not hijack page scroll.
- Vertical mapping measures one rail and moves it with a MotionValue.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
- Portfolio browsing, product stories and image-led archives.
When not to use
- Long prose or utility lists that should read vertically.
Skill
Purpose
Use for browsing a short, media-led project collection with large cards, variable widths and editorial captions. This is not a narrative horizontal scroll story.
Use when
- A portfolio needs native horizontal browsing and clear item identity.
- Snap alignment helps the user inspect one project at a time.
Avoid when
- The content is prose, a table or a long utility list.
- Horizontal motion would be the only way to reach essential content.
Hover, keyboard and touch
Shift the crop or lift the focused card by a small amount and reveal context, never a generic 10% zoom. Arrow/Home/End and previous/next buttons mirror the rail. Compact layouts use native overflow.
Scroll mapping
Use vertical mapping only for a dedicated art-directed section. It must remain a page-scroll relationship, not a trapped wheel. Reduced motion and touch use the native rail.