Fluid Expanding Grid

A responsive gallery grid that fluidly shifts and expands items using motion layout.

Installation

terminal

pnpm dlx layro-cli add @iurvish/fluid-expanding-grid

npx layro-cli add @iurvish/fluid-expanding-grid

npx layro-cli add @iurvish/fluid-expanding-grid

bunx layro-cli add @iurvish/fluid-expanding-grid

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import React, { useState } from "react";
import { motion, LayoutGroup } from "framer-motion";
import { cn } from "@/lib/utils";

interface GalleryItem {
  id: string;
  title: string;
  subtitle: string;
  image: string;
  color: string;
}