Skew Scroller
Velocity-based skew effect that deforms the layout based on scroll speed.
Main Features of Skew Scroller
How to Use Skew Scroller in Next.js
Installation Guide for Skew Scroller
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs |
itemCount | number | 24 | Number of items in the grid |
backgroundColor | string | bg-[#e1e1e1] | Background color of the component |
containerHeight | string | h-[400vh] | Height of the container |
noiseUrl | string | https://grainy-gradients.vercel.app/noise.svg | URL of noise texture |
noiseOpacity | number | 0.2 | Opacity of noise overlay |
rotation | number | -15 | Rotation angle in degrees |
scale | number | 1.5 | Scale factor |
scrollRange | [number, number] | [0, 2000] | Scroll range |
xRange | [number, number] | [0, -500] | X position range |
yRange | [number, number] | [0, -1000] | Y position range |
gridCols | number | 4 | Number of grid columns |
aspectRatio | string | aspect-[3/4] | Aspect ratio of items |
text | string | KINETIC\nGRID | Text displayed (use \n for newlines) |
textColor | string | text-white | Color of the text |
textSize | string | text-8xl | Size of the text |
className | string | Additional CSS classes |
Related Components
When to Use
Ideal for high-fashion sites, modern editorial layouts, and high-performance Next.js landing pages. Use this React component for a kinetic grid that skews and deforms based on the intensity of the user's scrolling action.
Best Practices
Maintain consistent spacing within your design system by using a clear `gridCols` configuration. Follow React best practices by providing a `noiseUrl` that adds texture without overpowering the content. Optimize for performance in large-scale applications by using hardware-accelerated skew transforms.
Why This Component Matters in Modern UI Development
Velocity-based skewing is a hallmark of high-end 'award-winning' modern UI design. This production-ready component helps you build an interface that feels fast and responsive, adding a layer of polish to your project's digital architecture.
Frequently Asked Questions
QHow intense is the skew effect?
The skew intensity is dynamic and mapped to scroll velocity, so it only deforms when the user is actively scrolling.
QDoes it work with standard images?
Yes, it works with any image URL and automatically fits them into the skewed grid structure.
QIs the noise texture mandatory?
The noise adds a premium analogue feel, but can be removed by setting `noiseOpacity` to 0 for a cleaner digital look.