Grid Loader

Renders a 3x3 grid of cells that animate based on a preset pattern. It displays different visual effects like lines, shapes, or waves. Use it to show loading states with customizable animations.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/grid-loader

npx layro-cli add @educlopez/grid-loader

npx layro-cli add @educlopez/grid-loader

bunx layro-cli add @educlopez/grid-loader

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

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { useEffect, useMemo, useState } from "react";

// Grid matrix type: 3x3 array of 0s and 1s
export type GridMatrix = [
  [0 | 1, 0 | 1, 0 | 1],
  [0 | 1, 0 | 1, 0 | 1],
  [0 | 1, 0 | 1, 0 | 1],
];

// All preset pattern names