Infinite Grid
A high-performance infinite scrolling grid component with smooth drag interactions, momentum physics, and optimized rendering. Perfect for creating photo galleries, image browsers, and infinite content displays with buttery-smooth user experience.
drag me
Features
- Infinite Scrolling: Seamlessly browse through unlimited content
- Drag to Scroll: Intuitive mouse and touch drag interactions
- Momentum Physics: Realistic momentum and damping effects
- Performance Optimized: Virtual rendering for smooth performance
- Responsive Design: Works perfectly on desktop and mobile devices
- Smooth Animations: Hardware-accelerated transforms and transitions
Usage Examples
Basic Implementation
Loading...
Custom Gallery Data
Loading...
Responsive Container
Loading...
Props
| Prop | Type | Description |
|---|---|---|
| gallery | GalleryItem[] | Array of gallery items to display |
GalleryItem Interface
| Property | Type | Required | Description |
|---|---|---|---|
| id | number | No | Unique identifier for the item |
| thumb_src | string | Yes | URL for the thumbnail image |
| title | string | No | Alt text and title for the image |
| full_src | string | No | URL for the full-size image |
Performance Tips
- Image Optimization: Use optimized images with appropriate sizes
- Lazy Loading: Images are automatically lazy-loaded for better performance
- Virtual Rendering: Only visible cards are rendered to maintain smooth performance
- Hardware Acceleration: Uses CSS transforms for smooth animations