Overview: An infinite, draggable image grid that transitions into an immersive detailed view.
Infinite Canvas: A scrolling grid that repeats images in a tiled pattern across both X and Y axes.
Physics-Based Navigation: Drag to pan the canvas. Includes momentum physics with friction-based decay after release for a natural feel.
Input Support: Full touch and trackpad support optimized for both mobile and desktop interactions.
Base Structure: A 4 columns × 3 rows grid that tiles infinitely.
Dynamic Positioning: Applies random offsets and rotations per image to create visual variety and a "scattered" look.
Adaptive Sizing:
Spacing: Configurable between 100–800px.
Dimensions: Customizable width/height per image (100–500px range).
Aspect Ratio: Preserved based on the loaded image dimensions.
The component relies heavily on motion design to engage the user:
Entrance: Images scale in when entering the viewport.
"Deck of Cards" Intro: Special start animation where the first visible grid expands from the center to its final positions.
Interactive Hover: Triggers an enhanced 3D wave animation.
Styling: Four square corner frames surround each image (customizable color).
Clicking any image triggers a smooth transition from its grid position to a centered, immersive view.
Universal Features:
Centered image with 3D perspective wave animation.
Vertical scroll/swipe to navigate between images (includes threshold to prevent accidental swipes).
Optional labels and descriptions with full typography controls.
Responsive Behavior:
FeatureDesktop ModeMobile ModeThumbnailsVertical list on the right side.Horizontal scrollable strip at the bottom.LabelsFully visible.Label hidden to maximize screen real estate.NavigationStandard layout.White circular back button fixed 50px from top (top-right).
Exportar a Hojas de cálculo
Note for Developers: This component is optimized for React 18.
Smart Rendering: Uses viewport-based tile rendering (only renders visible tiles + a safety buffer) to maintain high frame rates.
State Management: Transitions are wrapped in startTransition to prevent UI blocking during heavy animation updates.
Caching: Image aspect ratios are cached immediately after loading to prevent layout shifts.
Mobile Optimization: touch-action: none is applied to prevent native browser pull-to-refresh gestures.
You have full control over the aesthetic via the following parameters:
Global: Background color, Layout mode toggle (Desktop/Mobile).
Typography: Label & Description styling (Font, color, background, padding, radius, opacity, toggle show/hide).
Assets: Up to 12 images supported with individual metadata.
UI Elements: Thumbnail size/spacing and Corner frame colors.
Julio Aragoza
