Blueprint Scan

Installation

pnpm dlx shadcn@latest add @cleverui/loader-blueprint-scan

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

Usage

tsx

import { LoaderBlueprintScan } from '@/components/ui/loader-blueprint-scan'

Exampletsx

import { LoaderBlueprintScan } from '@/components/ui/loader-blueprint-scan'

export default function LoaderBlueprintScanDemo() {
  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">
        <LoaderBlueprintScan size={64} label="Scanning site plan" />
        <div className="space-y-2 text-center">
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
            Field registration
          </p>
          <p className="text-base font-semibold tracking-tight text-foreground">
            Aligning parcel 14-B grid
          </p>
          <p className="max-w-xs text-sm leading-relaxed text-muted-foreground">
            Sweeping the 2024 cadastral plate against stake-out marks before the
            crew packs out.
          </p>
        </div>
      </div>
    </div>
  )
}

API reference

LoaderBlueprintScan accepts the following props.

Prop	Type	Default	Description
`size`	`number`	`56`	plate width in px (height is 3/4 of width)
`label`	`string`	`'Loading'`	sr-only status text
`speed`	`number`	`1`	timeline speed multiplier

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

Related components

Survey Draw

The brand as a spinner, a small blueprint frame with edge ticks and a corner registration cross that draws itself, holds, undraws, and redraws in a calm loop. SVG stroke work.

Diazo Develop

A blueprint develops as data arrives, latent linework surfaces in ink-density order, no sweep, bound to a 0-100 progress prop. React SVG preloader on Tailwind tokens with live percent.

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.

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.

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.

Frequently asked questions

How do I install the Blueprint Scan 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-blueprint-scan`. 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 Blueprint Scan require?

Blueprint Scan uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Blueprint Scan 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