Horizontal Drag
Vertical scroll drives a massive horizontal film strip with parallax cards.
Main Features of Horizontal Drag
How to Use Horizontal Drag in Next.js
Installation Guide for Horizontal Drag
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 |
Related Components
When to Use
Excellent for product galleries, photography portfolios, and modern Next.js commerce sites. Use this React component for a massive, cinematic 'film strip' that slides horizontally across the screen as the user scrolls vertically.
Best Practices
Maintain consistent spacing within your design system by using a clear `gap` between items. Follow React best practices by ensures the `itemWidth` doesn't cut off important image details on mobile. Optimize for performance by using efficient X-axis transforms for the strip movement.
Why This Component Matters in Modern UI Development
Horizontal flow within a vertical scroll provides a refreshing break for the user. This reusable React component gives developers a robust way to implement complex viewport-driven horizontal motion, adding a layer of sophistication to your real-world application architecture.
Frequently Asked Questions
QHow long can the film strip be?
The `itemCount` determines the strip length. It can handle dozens of items, provided they are properly lazy-loaded.
QCan I hide the numbers?
Yes, the `numberColor` can be set to 'transparent' to remove the labels for a cleaner, image-focused look.
QDoes it support drag interactions?
The movement is mapped to scroll, but it can be easily updated with Framer Motion drag props for touch-based exploration.