Parallax Slits
Vertical columns that move in alternating directions creating a shredder effect.
Main Features of Parallax Slits
How to Use Parallax Slits in Next.js
Installation Guide for Parallax Slits
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs |
columns | number | 12 | Number of columns |
backgroundColor | string | bg-black | Background color of the component |
containerHeight | string | h-[250vh] | Height of the container |
scrollDistance | number | 400 | Scroll distance for parallax |
borderColor | string | border-black/50 | Border color between columns |
section1Bg | string | bg-zinc-800 | Background color of first section |
section2Bg | string | bg-zinc-900 | Background color of second section |
section2BorderColor | string | border-red-500 | Border color of second section |
imageOpacity | number | 0.6 | Opacity of images |
text | string | Fragmentation | Text displayed |
textColor | string | text-4xl | Color class of the text |
textSize | string | text-4xl | Size of the text |
textBgColor | string | bg-white | Background color of text container |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for editorial portfolios, modern agency sites, and experimental Next.js landing pages. Use this React component to create a 'shredder' effect where vertical slices of an image move in alternating directions.
Best Practices
Follow React best practices by provide high-resolution images that won't look blurry when shredded into columns. Maintain scalable component architecture by using a reasonable `columns` count (e.g., 8-16). Optimize for performance in large-scale applications by using CSS-based parallax math.
Why This Component Matters in Modern UI Development
Vertical fragmentation adds a sense of rhythm and digital texture to an interface. This customizable UI component gives you a production-level tool for building high-energy, fragmented layouts that add polish to your real-world application architecture.
Frequently Asked Questions
QHow many columns works best?
Between 10 and 16 columns usually creates the most striking 'shredder' effect without being too busy.
QCan I move the columns horizontally?
No, this specific component is designed for coordinated vertical parallax, creating a unique 'slot machine' movement.
QIs the background color visible?
Yes, the `backgroundColor` peaks through between the shredded columns, adding depth and contrast.