Parallax Masonry
Masonry grid landing page with parallax scrolling effects and dynamic layouts.
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. |
When to Use
Excellent for image-heavy portfolios, architecture firms, and Next.js sites that want a dynamic 'Masonry' aesthetic. Use this full-page template for an immersive experience with varied grid heights, smooth parallax scrolls, and dynamic layouts.
Best Practices
Maintain scalable component architecture by using high-resolution imagery for the parallax layers. Follow React best practices by pairing this with minimalist typography. Optimize for performance by managed the transition lifecycle of the grid items.
Why This Component Matters
Masonry layouts combined with parallax create a sense of momentum and structural depth. This production-ready UI template helpsคุณ build a gallery experience that feels alive and premium, adding visual interest to standard image grids.
FAQ
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.
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.