Square Snake

SquareSnake traces the square path with delayed unicode glyphs instead of a separate static track, which makes it useful on dense or colored surfaces.

import { SquareSnake } from "@/components/loading-ui/square-snake";

export function SquareSnakeDemo() {

Credits to shaah1d for creating the initial animation.

Installation

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

Usage

Copyimport { SquareSnake } from "@/components/loading-ui/square-snake";

Copy<SquareSnake />

Customization

Use size for the square path, blocks for the four moving glyphs, and --duration or --delay for animation timing.

Size

Change the path cell count and text scale together.

import { SquareSnake } from "@/components/loading-ui/square-snake";

export function SquareSnakeSize() {

Color

The snake inherits foreground color.

import { SquareSnake } from "@/components/loading-ui/square-snake";

export function SquareSnakeColor() {

Duration

Set --duration to tune the loop speed.

import { SquareSnake } from "@/components/loading-ui/square-snake";

export function SquareSnakeDuration() {

Glyphs

Provide four glyphs to change the lead, trail, and final tail character.

import { SquareSnake } from "@/components/loading-ui/square-snake";

export function SquareSnakeGlyphs() {