Conveyor Loop

ConveyorLoop moves a staggered block trail from left to right across a static unicode track, then wraps back around without reversing direction.

import { ConveyorLoop } from "@/components/loading-ui/conveyor-loop";

export function ConveyorLoopDemo() {

Credits to shaah1d for creating the initial animation.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/conveyor-loop
Copy

Usage

Copyimport { ConveyorLoop } from "@/components/loading-ui/conveyor-loop";

Copy<ConveyorLoop />

Customization

Use trackLength, blocks, and track to change the rail. The motion uses --duration and --delay, while --mask-color controls how the moving glyphs cut through the track.

Size

Adjust trackLength with text-size utilities for different track widths.

import { ConveyorLoop } from "@/components/loading-ui/conveyor-loop";

export function ConveyorLoopSize() {

Color

The conveyor inherits text color.

import { ConveyorLoop } from "@/components/loading-ui/conveyor-loop";

export function ConveyorLoopColor() {

Duration

Set --duration to make the conveyor faster or more deliberate.

import { ConveyorLoop } from "@/components/loading-ui/conveyor-loop";

export function ConveyorLoopDuration() {

Glyphs

Use alternate unicode characters and set --mask-color for tinted surfaces.

import { ConveyorLoop } from "@/components/loading-ui/conveyor-loop";

export function ConveyorLoopGlyphs() {