Scroll Morph Wall
A gallery whose arrangement is a function of scroll — grid, ring and fanned deck, one continuous interpolation.
- galleries
- scroll
- gallery
- morph
- spatial
Usage
import { ScrollMorphWall } from "@pinky-ui/layouts";
<ScrollMorphWall
items={items}
travel={2.4}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ScrollMorphWallItem[] | — | Keyed content with an optional label and meta. |
| travel | number | 2.4 | How much scroll the transformation takes, in viewport heights. |
| label | string | "Scroll morph wall" | Accessible name for the section. |
Accessibility
- Touch, reduced motion and narrow viewports render a plain static grid with no scroll hijacking.
- Positions are transform-only; DOM order and any semantics inside `content` are untouched.
- The section never traps scroll — native page scroll stays in charge throughout.
Performance
- One shared scrollYProgress motion value drives every item; no per-item scroll listeners.
- Position, scale, rotation and stacking order interpolate off motion values, not React state — no re-render while scrolling.
Reduced motion
Items sit in a static grid immediately; nothing moves as the page scrolls.
When to use
- A signature hero or showcase moment for a curated small set of images or cards
- Sections meant to reward scrolling with a payoff, not just reveal content
When not to use
- Long or unbounded collections — use Masonry Gallery
- Utility browsing where users need to compare items quickly, not watch them move
Skill
Purpose
A gallery whose arrangement is a function of scroll. Items read as a plain grid at rest, gather into a ring mid-scroll, and settle into a fanned deck by the end — one continuous interpolation off scrollYProgress, not three layouts swapped at a breakpoint.
Good for
- a signature hero or showcase moment for a small curated set
- sections meant to reward scrolling with a payoff, not just reveal content
- portfolio, launch and story pages where one memorable scroll beat earns its screen space
Avoid for
- long or unbounded collections — use Masonry Gallery
- utility browsing where people need to compare items quickly, not watch them move
- anywhere the page is already scroll-heavy with other pinned sections; one scroll-driven set piece per page is the house limit
How many items
Four to nine. The ring and fan positions are legible in that range; past it the deck crowds and the transformation stops reading as deliberate.
Mobile
Falls back to a static two-column grid — no sticky section, no scroll hijacking. The transformation is the enhancement; the collection itself is the content, and touch scroll should never be intercepted.
Motion intensity
High, but bounded to a single shared motion value. Position, scale, rotation and stacking order all read off one scrollYProgress — nothing computes off per-item scroll listeners or causes a React re-render while scrolling.
Accessibility
- Touch, reduced motion and narrow viewports render the plain static grid.
- Positions are transform-only; DOM order and any semantics inside
contentare untouched. - Native page scroll stays in charge throughout — the section never traps or redirects scroll input.
Performance
One useScroll target and one set of useTransform chains per item, all motion-value-driven. Keep content cheap — the wall itself adds no measurement pass, but nine simultaneously-visible pointer-driven children would.
Composes with
Plain photo tiles or SoftSurface-style panels, not Jelly or Tilt children — the wall already supplies motion; a second independent motion system on the same item reads as a bug, the same rule as Masonry Gallery.