5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T108c,

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.

5a:[["$","$L5d",null,{"post":{"id":"019ea4ff-31e4-7722-b319-30bb6f860fc7","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"65b9c622-4279-4347-b733-691f0004184e","name":"Jan Studio","slug":"jan-design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1611292/avatar-AhECTBWH6ipmD2U5s7FpopbaAICmb8.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"zRoOQLEZPudv856fMOfx","resolved":true,"title":"Asymmetric Grid","body":"$5e","bodyJson":null,"introduction":"Organic scatter gallery with lightbox","slug":"asymmetric-grid","author":{"framerUserId":"65b9c622-4279-4347-b733-691f0004184e","name":"Jan Studio","slug":"jan-design","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1611292/avatar-AhECTBWH6ipmD2U5s7FpopbaAICmb8.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/zRoOQLEZPudv856fMOfx/asymmetric-grid-16rV6JvpiaUKNvtLinuQedwsDdsYcf","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-28T19:54:34.733Z","updatedAt":"2026-06-15T16:14:31.002Z","publishedAt":"2026-06-08T02:10:48.420Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/AsymmetricGrid-N7vKfM.js@TN0IkKyN9JBOOJacjmLm","previewUrl":"https://orange-globe-194681.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"TN0IkKyN9JBOOJacjmLm","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":152,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-08T02:10:48.420Z","updatedAt":"2026-06-08T02:10:48.420Z","reported":false}}],"$L5f"]

Suggested for you