Empty State Braille Orbit

Component

About

An animated ambient icon for empty states that traces a continuous Lissajous orbit through Unicode braille dot glyphs, giving a comet-like trail effect.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Empty State Braille Orbit to your project and fits it to your theme.

Code

How Empty State Braille Orbit is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import BrailleOrbit from "@/components/ui/empty-state-braille-orbit";

export default function EmptyStateBrailleOrbitDemo() {
  return (
    <div className="flex h-screen w-full flex-col items-center justify-center gap-4 bg-background text-center">
      <BrailleOrbit />
      <div className="space-y-1">
        <p className="text-sm font-medium text-foreground">No results yet</p>
        <p className="text-sm text-muted-foreground">
          Once you add data, it will show up here.
        </p>
      </div>
    </div>
  );
}