Parallax Masonry
Masonry grid landing page with parallax scrolling effects and dynamic layouts.
Main Features of Parallax Masonry
How to Use Parallax Masonry in Next.js
Installation Guide for Parallax Masonry
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
primaryColor | string | #1a1a1a | Primary color for grid items. |
parallaxSpeed | number | 1 | Speed of parallax scrolling (0.5-2). |
gridGap | string | 16px | Gap between masonry items. |
enableParallax | boolean | true | Enable parallax scrolling effects. |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow does the parallax work?
The component uses Framer Motion's `useScroll` and `useTransform` to apply variable vertical offsets to grid items based on their scroll depth.
QCan I adjust the grid gap?
Yes, the `gridGap` prop allows you to control the 'white space' between the masonry modules for a tighter or airier feel.
QIs the masonry true masonry?
The layout calculates heights dynamically to ensure a clean, alternating masonry flow that adapts to varied image aspect ratios.