GitHub

Infinity Square Snake

PreviousNext

A unicode snake tracing two joined square loops in an infinity path.

InfinitySquareSnake moves four staggered unicode glyphs through two joined square loops. It keeps the path fixed and scales cleanly with font size.

Loading
import { InfinitySquareSnake } from "@/components/loading-ui/infinity-square-snake";

export function InfinitySquareSnakeDemo() {

Credits to shaah1d for creating the initial animation.

Installation

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

Usage

import { InfinitySquareSnake } from "@/components/loading-ui/infinity-square-snake";
<InfinitySquareSnake />

Customization

Use blocks for the four unicode trail glyphs. The path scales with text size, and timing is controlled with --duration and --delay.

Size

Scale the fixed infinity path with text-size utilities.

LoadingLoadingLoading
import { InfinitySquareSnake } from "@/components/loading-ui/infinity-square-snake";

export function InfinitySquareSnakeSize() {

Color

Apply text color utilities to the root.

LoadingLoadingLoading
import { InfinitySquareSnake } from "@/components/loading-ui/infinity-square-snake";

export function InfinitySquareSnakeColor() {

Duration

Set --duration for the two-loop travel speed.

LoadingLoadingLoading
import { InfinitySquareSnake } from "@/components/loading-ui/infinity-square-snake";

export function InfinitySquareSnakeDuration() {

Glyphs

Provide four glyphs to customize the lead and trailing cells.

LoadingLoadingLoading
import { InfinitySquareSnake } from "@/components/loading-ui/infinity-square-snake";

export function InfinitySquareSnakeGlyphs() {
Fade arcInfinity Track