Animations & Motion
Skew Scroller
Velocity-based skew effect that deforms the layout based on scroll speed.
parallaxskewvelocitygrid
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 |