Infinite Grid

Galleries 35

About

A draggable, infinitely-scrolling grid canvas that renders custom items in an expanding spiral with momentum-based panning and inertia.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Infinite Grid to your project and fits it to your theme.

Code

How Infinite Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { GridItemConfig, InfiniteGrid } from "@/components/ui/infinite-grid";
import { motion } from "motion/react";

const Cell = ({ gridIndex }: GridItemConfig) => (
  <motion.div
    className="absolute inset-1 flex items-center justify-center"
    initial={{ opacity: 0, scale: 0 }}
    animate={{ opacity: 1, scale: 1 }}
    transition={{
      duration: 0.4,
      scale: { type: "spring", visualDuration: 0.4, bounce: 0.5 },
    }}
  >
    <img
      className="pointer-events-none size-20"
      src={`https://zmdrwswxugswzmcokvff.supabase.co/storage/v1/object/public/uicapsule/illustrations/blueprint/%20${(gridIndex % 100) + 1}.svg`}
    />
  </motion.div>
);

const Preview = () => {
  return (
    <div className="h-screen w-screen bg-blue-50">
      <InfiniteGrid gridSize={150} renderItem={Cell} />
    </div>
  );
};

export default Preview;