Symmetric Wave

SymmetricWave keeps the source page's mirrored opacity timeline while exposing the visible block and background track glyphs as props.

import { SymmetricWave } from "@/components/loading-ui/symmetric-wave";

export function SymmetricWaveDemo() {

Credits to shaah1d for creating the initial animation.

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/symmetric-wave
Copy

Usage

Copyimport { SymmetricWave } from "@/components/loading-ui/symmetric-wave";

Copy<SymmetricWave />

Customization

Use block and track for the glyphs. The component inherits text color and accepts --duration for the opacity wave timing.

Size

Scale the wave with text-size utilities.

import { SymmetricWave } from "@/components/loading-ui/symmetric-wave";

export function SymmetricWaveSize() {

Color

Color comes from currentColor, so text utilities are the main control.

import { SymmetricWave } from "@/components/loading-ui/symmetric-wave";

export function SymmetricWaveColor() {

Duration

Set --duration to change how quickly the mirrored wave collapses and expands.

import { SymmetricWave } from "@/components/loading-ui/symmetric-wave";

export function SymmetricWaveDuration() {

Glyphs

Replace the leading block and static track independently.

import { SymmetricWave } from "@/components/loading-ui/symmetric-wave";

export function SymmetricWaveGlyphs() {