FreeformGallery
Infinite draggable image gallery with dynamic grid layout, expandable detail view, momentum scrolling, and customizable desktop/mobile modes with 3D animations.
Make it with Workshop
Build your own component with AI
Infinite draggable image gallery with dynamic grid layout, expandable detail view, momentum scrolling, and customizable desktop/mobile modes with 3D animations.
Make it with Workshop
Build your own component with AI
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.
