Asymmetric Grid

Asymmetric Grid is a premium scatter gallery component for Framer with organic masonry layout, parallax motion, an immersive lightbox, and built in photo and video support. Perfect for photography portfolios, fashion galleries, creative showcases, and editorial landing pages.

Asymmetric Grid is a premium scatter gallery component for Framer designed for photography portfolios, fashion showcases, modern landing pages, and editorial media experiences. Built with an organic masonry layout, mouse based parallax motion, filter pills, and a full screen lightbox, it transforms ordinary image grids into expressive interactive galleries with depth and rhythm. The component supports both images and videos with responsive rendering, hover interaction, skeleton loading, and automatic thumbnail generation for smooth performance across desktop and mobile devices.

What Makes This Different From Other Components

Unlike rigid gallery grids or standard masonry layouts, Asymmetric Grid scatters media in an organic offset arrangement with adjustable chaos and real proportion detection. The addition of parallax movement, an immersive lightbox with thumbnail navigation, and a side description panel adds depth and editorial polish that makes the gallery feel curated and alive instead of static.

Instructions

Simply copy and paste the component into your Framer project. Upload your images or videos directly into the media controls and adjust the layout, spacing, motion, and color settings from the properties panel. Customize columns, base width, chaos, parallax strength, and titles to create unique scatter gallery experiences.

How It Works

Asymmetric Grid arranges media into a true masonry layout that places each tile in the shortest available column, then applies organic offset and scatter for an editorial feel. Tiles fade in on scroll while images respond in real time to mouse based parallax movement.

Clicking any tile opens a full screen lightbox with keyboard navigation, thumbnail strip, optional project description, and automatic video playback. Photos and videos are filtered through interactive pills, with skeleton loading during transitions and automatic thumbnail generation for YouTube, Vimeo, Google Drive, and direct video files.

Key Features

• Organic scatter masonry layout

• Adjustable chaos and offset control

• Mouse based parallax motion

• Full screen immersive lightbox

• Thumbnail strip navigation

• Optional side description panel

• Photo and video filter pills

• Supports images and videos

• Automatic video thumbnails

• YouTube, Vimeo, Drive, and MP4 support

• Skeleton loading transitions

• Hover feedback with overlay and icon

• Adjustable columns, spacing, and width

• Real proportion image detection

• Keyboard navigation support

• Mobile optimized lightbox

• Performance optimized rendering

Where To Use

• Photography portfolio websites

• Fashion and editorial galleries

• Creative agency websites

• Media rich landing pages

• Visual showcase sections

• Modern storytelling layouts

• Personal portfolio pages

• Interactive gallery presentations

Best For

• Photographers building portfolio galleries

• Agencies showcasing visual projects

• Brands focused on editorial design

• Portfolios with large media collections

• Websites needing expressive gallery layouts

• Framer creators building curated showcases

Why This Component Stands Out

Asymmetric Grid combines organic scatter layout, parallax motion, an immersive lightbox, and full photo and video support into one editorial media experience. It turns ordinary galleries into curated interactive layouts that feel modern, responsive, and visually engaging while maintaining smooth performance across all devices.