Emblem Globe

A small canvas globe that renders a mark as z-sorted, softly lit dots and keeps it gently moving, ideal next to a "Composing…" status label. The dots are recoloured in --primary (or any color) on a transparent surface, so it follows light, dark and every palette. Pick one of 23 marks and two sizes. It pauses when off screen or the tab is hidden and draws a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add emblem-globe

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/emblem-globe.tsx.
3. Paste the code.

Usage

import { EmblemGlobe } from "@/components/ui/emblem-globe";

export default function Example() {
  return (
    <div className="h-14 w-14">
      <EmblemGlobe brand="ux" />
    </div>
  );
}

Available brands: claude, openai, codex, cursor, gemini, figma, framer, react, swift, designcode, aura, dreamcut, ui, ux, css, ios, neuform, github, x, instagram, threads, linkedin, email.

Props