Morse Pulse

Installation

pnpm dlx shadcn@latest add @cleverui/loader-morse-pulse

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { LoaderMorsePulse } from '@/components/ui/loader-morse-pulse'

Exampletsx

import { LoaderMorsePulse } from '@/components/ui/loader-morse-pulse'

export default function LoaderMorsePulseDemo() {
  return (
    <div className="mx-auto flex min-h-[360px] max-w-md flex-col items-center justify-center gap-8 px-6 py-20">
      <div className="flex w-full max-w-sm flex-col items-center gap-6 rounded-2xl border border-border/60 bg-card px-6 py-10">
        <LoaderMorsePulse word="SYNC" label="Handshaking relay" />
        <div className="space-y-2 text-center">
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
            Relay desk
          </p>
          <p className="text-base font-semibold tracking-tight text-foreground">
            Establishing uplink to Harbor-7
          </p>
          <p className="max-w-xs text-sm leading-relaxed text-muted-foreground">
            Negotiating session keys with the night-shift telemetry node before
            the packet queue opens.
          </p>
        </div>
      </div>
    </div>
  )
}

API reference

LoaderMorsePulse accepts the following props.

Prop	Type	Default	Description
`word`	`string`	`'SYNC'`	word to transmit; A-Z and 0-9, clamped to 6 characters
`label`	`string`	`'Loading'`	sr-only status verb, announced with the word
`speed`	`number`	`1`	unit-clock speed multiplier

…plus everything from React.HTMLAttributes<HTMLDivElement>: className, event handlers, aria attributes and the rest pass straight through.

Related components

Glyph Cycle

A single mono glyph slot rolls through a deterministic character set behind a mask, and when the done prop flips, it rolls once more onto a primary check and stops. A one-character machine.

Ledger Fill

A mono working readout, "reconciling 047/128" with tabular digits rolling in a masked slot above a hairline progress rule. Determinate via a progress prop, or indeterminate by default.

Blueprint Scan

A small drafting plate under survey, a hairline sweep crosses it while corner registration ticks resolve in its wake, holds, and rescans. The sweep carries the only primary ink. SVG and motion.

Ink Dots

Three ink dots with a liquid squash-and-merge cadence, a scoped SVG goo filter fuses them as they meet, then they rebound apart. A working ellipsis, tiny and cheap. Pure CSS animation.

Orbit Trio

Three bodies orbit a common center at staggered phases, each towing a short decaying trail, a micro ephemeris as spinner. One body burns primary. Tiny SVG, pure CSS animation, zero deps.

Percent Ring

Determinate loading ring, hairline token track, primary arc, tabular mono percent at center and a micro-label beneath. Falls back to an orbiting indeterminate segment when no progress is given.

Frequently asked questions

How do I install the Morse Pulse component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/loader-morse-pulse`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Morse Pulse require?

Morse Pulse has no npm dependencies beyond React and Tailwind CSS itself, so there is nothing extra to install or keep updated.

Can I theme Morse Pulse to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code