Parallax Slice
Parallax sliced feature grid with depth and movement.
Main Features of Parallax Slice
How to Use Parallax Slice in Next.js
Installation Guide for Parallax Slice
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
columns | Array<Array<{image: string, alt: string, hoverText?: string}>> | [[{image: '...', alt: 'Architecture 1'}, ...], ...] | 2D array of column items, each containing image URL, alt text, and optional hover text. |
backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
title | string | ARCHITECTURE | Title text displayed above columns. |
subtitle | string | Exploring spatial relationships | Subtitle text displayed above columns. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
View Component
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
View Component
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
View Component
When to Use
Excellent for architectural portfolios, lifestyle brands, and Next.js applications that want a dramatic 'Parallax Slice' aesthetic. Use this feature grid to communicate spatial depth, innovation, and digital power through technical columns and movement.
Best Practices
Follow React best practices by pairing this with high-contrast, professional photography. Maintain scalable component architecture by keeping the column counts deep. Optimize for performance by managed the scroll-trigger renders.
Why This Component Matters in Modern UI Development
Parallax-based slice aesthetics communicate spatial authority, sophistication, and digital craft. This production-ready UI template helpsคุณ build an interface that feels architectural and high-end, adding a unique 'Depth' signature to your project.
Frequently Asked Questions
QHow does the 'Slice' work?
The component uses localized column groups that move at varying parallax speeds during scroll, creating an 'Immersive' physical depth effect.
QCan I adjust the speed?
The parallax frequency is hard-coded for cinematic impact but can be tuned in the internal Framer Motion motion controller.
QAre colors editable?
Absolutely, both the primary background and specific text colors can be tuned to match your brand's specific color palette.