Random editorial image 01
Random editorial image 02
Random editorial image 03
Random editorial image 04
Random editorial image 05
Random editorial image 06
Random editorial image 07
Random editorial image 08
Random editorial image 09
Random editorial image 10
Random editorial image 11
Random editorial image 12
Random editorial image 13
Random editorial image 14
Random editorial image 15
Random editorial image 16
Random editorial image 17
Random editorial image 18
Random editorial image 19
Random editorial image 20
Random editorial image 21
Random editorial image 22
Random editorial image 23
Random editorial image 24
Random editorial image 25
Random editorial image 26
Random editorial image 27
Random editorial image 28
Random editorial image 29
Random editorial image 30
Random editorial image 31
Random editorial image 32
Random editorial image 33
Random editorial image 34
Random editorial image 35
Random editorial image 36
Random editorial image 37
Random editorial image 38
Random editorial image 39
Random editorial image 40

Components

Image Density Grid

A percentage-controlled image grid that reflows every frame into a denser or sparser layout with layout motion, soft blur, and a temporary glow during density changes.

Dependencies

React iconReactMotion iconMotion

Installation

npx shadcn@latest add https://skecher-ui.vercel.app/r/image-density-grid.json

Usage

Import
import { ImageDensityGrid } from "@/components/ui/image-density-grid";
Usage
<ImageDensityGrid />