ShinyBadge

Pill badge with a spark glyph and a light that sweeps across its text.

npx bezel-add add shiny-badge

About

A small animated pill badge for React with a spark glyph and a light that sweeps across its text in a loop. It is a pure CSS gradient text effect, so it adds no JavaScript. Use it above hero headings for "New", release notes or feature announcements where a static label would be easy to miss.

Key props: text (badge label), spark (leading glyph, default a four-point star)

packages/ui/src/badges/ShinyBadge.tsx · 30 lines

type Props = {
  spark?: string;
  text: string;
};

export function ShinyBadge({ spark = "✦", text }: Props) {
  return (
    <>
      <style>{`
        @keyframes shiny-sweep {
          from { background-position: 200% 0; }
          to   { background-position: -200% 0; }
        }
        .shiny-badge-text {
          background: linear-gradient(110deg, #4a4a4c 40%, #0a0a0a 50%, #4a4a4c 60%);
          background-size: 200% 100%;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
          animation: shiny-sweep 3s linear infinite;
        }
      `}</style>
      <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-black/[0.02] border border-black/[0.13] text-[13px] text-[#0a0a0a]">
        <span className="text-[#b45309]">{spark}</span>
        <span className="shiny-badge-text">{text}</span>
      </div>
    </>
  );
}