component
Parallax Gallery X
By Hamim Reza
Details
- Hamim RezaAuthor
- componentType
- $12.00Price
- 2026-06-21Published
- 2026-07-04Updated
- 2026-06-21Added
- GalleriesCategories
Summary
Scroll portfolio with minimap
Description
An infinite portfolio slider with parallax, interactive minimap thumbnail navigation, and auto-scroll. Images and videos supported with automatic video thumbnail generation. Project info overlay on every slide. Built for creative portfolios, photography galleries, and visual showcases that need a full-screen immersive presentation. Features Infinite seamless loop through projects in both directions Parallax on main media and minimap thumbnails independently Interactive vertical minimap — click any thumbnail to jump to project Active minimap thumbnail highlighted with enhanced border and scale Automatic video thumbnail generation via canvas API Project info overlay — title, category and year with gradient for readability Auto-scroll with configurable interval — pauses on user interaction Pauses when component leaves viewport for performance Image and video support — videos autoplay, loop and muted by default Snap-to-project after scroll stops Virtual scrolling — only visible projects plus buffer rendered Touch drag support on mobile Minimap hidden on mobile — adjusted typography and spacing Full scroll physics controls Unlimited projects via array No dependencies Property Controls Projects — unlimited · title, category, year, media type, image or video per project Scroll Physics Scroll Speed (0.1–2) · Smoothness (0.01–0.2) Max Velocity (50–300) · Snap Duration (100–1000ms) Visual Background Color · Image Scale (1–3) · Buffer Size (2–10) Auto-Scroll Enable/disable toggle · Interval (1000–10000ms) Technical Details RequestAnimationFrame render loop with separate target and current positions Lerp-based smooth interpolation for buttery parallax Ref-based animation state avoids React re-renders Map-based element references for efficient DOM access Canvas API asynchronous video thumbnail generation at 0.1s mark IntersectionObserver pauses animation when off-screen startTransition for non-blocking React 18 updates CORS error handling for video thumbnail generation
Introduction
Scroll portfolio with minimap
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #1851