Braille Loader by Dominik Koch

An animated braille loading indicator with wave, typewriter, shimmer, and pulse variants.

Preview

Wave

Typewriter

Shimmer

Pulse

import { BrailleLoader } from "@/components/ui/braille-loader";

export function Loaders() {
  return (
    <div className="grid gap-3 sm:grid-cols-2">
      <BrailleLoader text="dominik" variant="wave" />
      <BrailleLoader text="dominik" variant="typewriter" />
      <BrailleLoader text="dominik" variant="shimmer" />
      <BrailleLoader text="dominik" variant="pulse" />
    </div>
  );
}

Speed

The speed prop is a multiplier on the animation tempo — 1 is the default, 2 runs twice as fast, 0.5 at half speed. Drag the slider to try it.

Wave

Typewriter

Shimmer

Pulse

Speed1.00x

import { BrailleLoader } from "@/components/ui/braille-loader";

export function FastLoader() {
  return <BrailleLoader speed={2} text="dominik" variant="wave" />;
}

Installation

$ pnpm dlx shadcn@latest add @dominik-ui/braille-loader

This installs the component plus its text-to-braille helper into your lib folder.

Usage

import { BrailleLoader } from "@/components/ui/braille-loader";

export function Example() {
  return <BrailleLoader text="loading" variant="wave" />;
}

Each character of the text is converted to its braille equivalent and animated on a staggered loop. The component is purely decorative — it renders with aria-hidden, so pair it with visible or screen-reader-only status text when it communicates loading state.

Variants

Variant	Motion
`wave`	A pulse of opacity travels across the characters left to right.
`typewriter`	Characters fade in and out in sequence, like typing.
`shimmer`	A softer wave that settles back through a mid-opacity step.
`pulse`	Every character breathes in and out together.

Props

Prop	Type	Default	Description
`text`	`string`	—	Text converted to braille and animated.
`variant`	`"wave" \| "typewriter" \| "shimmer" \| "pulse"`	`"wave"`	Animation style.
`speed`	`number`	`1`	Animation speed multiplier — higher is faster.
`className`	`string`	—	Extra classes for the wrapper.