Freeform Gallery

Freeform Gallery Component

Overview: An infinite, draggable image grid that transitions into an immersive detailed view.

1. Core Mechanics

• 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.

2. Grid Architecture & Layout

• 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.

3. Visual Effects & Animation

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).

4. Detail View Experience

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

5. Technical Performance & Optimization

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.

6. Customization Options

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.