Square Grid

SquareGrid renders a monospace square track and masks the moving glyphs against the current surface. The grid size is configurable while the animation stays in ch units.

import { SquareGrid } from "@/components/loading-ui/square-grid";

export function SquareGridDemo() {

Credits to shaah1d for creating the initial animation.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/square-grid
Copy

Usage

Copyimport { SquareGrid } from "@/components/loading-ui/square-grid";

Copy<SquareGrid />

Customization

Use size for the number of cells per side, blocks and track for unicode characters, and --duration, --delay, or --mask-color for timing and surface matching.

Size

Change both text scale and the number of grid cells.

import { SquareGrid } from "@/components/loading-ui/square-grid";

export function SquareGridSize() {

Color

The track and moving glyphs inherit foreground color.

import { SquareGrid } from "@/components/loading-ui/square-grid";

export function SquareGridColor() {

Duration

Set --duration for slower or faster square travel.

import { SquareGrid } from "@/components/loading-ui/square-grid";

export function SquareGridDuration() {

Glyphs

Use alternate glyphs and provide --mask-color on tinted surfaces.

import { SquareGrid } from "@/components/loading-ui/square-grid";

export function SquareGridGlyphs() {