Floating Columns
Multiple media columns drift at different scroll rates while remaining a normal collection on touch.
- editorial
- columns
- scroll
- portfolio
- editorial
Surface
Gathering
Trace
Usage
usage
import { FloatingColumns } from "@pinky-ui/layouts";
<FloatingColumns columns={[{ id: "a", items: cards }, { id: "b", items: more }]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | FloatingColumn[] | — | Small ordered columns with optional direction and speed intent. |
| className | string | — | Styles the outer layout surface. |
| disabled | boolean | false | Keeps the content and interaction while removing spatial choreography. |
Accessibility
- Each column remains ordinary DOM content in reading order.
- Hover/focus emphasis is supplemental and never moves focus away.
- Reduced motion retains a static multi-column layout.
Performance
- One scroll progress source drives all columns.
- No per-item pointer listeners or image preloading is introduced.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
- Photography, fashion and visual archives with a short curated set.
When not to use
- Long feeds or content where vertical reading order is critical.
Skill
Purpose
Use for a small editorial archive whose columns move at different scroll rates, creating depth without a scroll takeover.
Use when
- Photography, fashion or visual archive content has a curated amount of material.
- Static column order remains meaningful.
Avoid when
- The page is text-first or the feed is unbounded.
- Several other scroll narratives already compete for attention.
Interaction and accessibility
Keep columns ordinary DOM lists. Hover/focus can quiet neighbours or raise one item, but must not move focus or hide captions.
Touch, reduced motion and performance
Touch and reduced motion use a clean static grid. One scroll progress source drives all columns; images still need host-owned lazy loading and dimensions.