Animations & Motion
Horizontal Drag
Vertical scroll drives a massive horizontal film strip with parallax cards.
parallaxhorizontalscrollfilm-strip
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs |
itemCount | number | 10 | Number of items in the strip |
backgroundColor | string | bg-[#1a1a1a] | Background color of the component |
containerHeight | string | h-[500vh] | Height of the container |
gap | string | gap-20 | Gap between items |
padding | string | px-20 | Horizontal padding |
itemWidth | string | w-[60vw] | Width of each item |
itemHeight | string | h-[70vh] | Height of each item |
imageScale | number | 1.2 | Scale of images |
imageXRange | [number, number] | [-50, 50] | Image X position range |
xRange | [string, string] | ["0%", "-80%"] | Container X position range |
numberColor | string | text-transparent | Color of number labels |
numberSize | string | text-6xl | Size of number labels |
numberStrokeWidth | string | 2px | Stroke width of numbers |
numberStrokeColor | string | rgba(255,255,255,0.2) | Stroke color of numbers |
className | string | Additional CSS classes |