Galleries
Gallery - Parallax columns
Three columns of tiles that scroll at different speeds for a layered parallax effect.
- Multi-speed parallax
- useScroll
- Column offset
Customize
Drag a slider and watch the preview respond live. Every control maps to a typed prop - what you tune is what you ship.
How the animation works
Image tiles are arranged in three columns, and a scroll hook moves each column at a slightly different rate as the visitor scrolls past. Because the columns are offset against one another, the section gains a layered sense of depth instead of all the tiles moving as one flat block.
When to use it
- A portfolio or case-study gallery that wants a rich, layered scroll feel
- A visual section showing product shots, screenshots, or photography
- Any image grid where parallax depth makes browsing feel more immersive
Props you can tune
Every prop below is live in the studio above and ships typed with the component.
- 0-260px
spreadParallax spread
Related components
Using this block
Buy it, then copy components/blocks/gallery-parallax/index.tsx into your project. A single file - no new dependency beyond the Framer Motion + Tailwind you already have.