Sparkle

Gemini's three-dot mark that bounces and folds into a triangle.

import { Card } from "@/components/ui/card";

import { GeminiSparkle } from "../components/gemini-sparkle";

export default function GeminiSparkleExample() {
  return (
    <Card className="border-gemini-border bg-gemini-bg flex w-full min-w-0 flex-row items-center justify-center gap-8 overflow-hidden rounded-2xl border px-4 py-10 text-base ring-0">
      <GeminiSparkle size={24} />
      <GeminiSparkle animated aria-hidden size={24} />
      <GeminiSparkle animated size={40} />
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/gemini-sparkle

GeminiSparkle draws three dots in a line. With animated they bounce in a wave, fold into a triangle, hold and unfold, on a 3.4 second loop. It follows prefers-reduced-motion and stays still when the user asks for less motion. The mark uses currentColor. When animated it’s announced like shadcn Spinner, with role="status" and a Loading label. The still mark is hidden from screen readers.

Prop	Default	Description
`animated`	`false`	Runs the loop.
`size`	`18`	Width and height in pixels.
`reducedMotion`	system setting	Forces the still mark when `true`, or the animation when `false`.

Used in

Gemini

A full recreation of the Gemini chat with the animated sparkle, streamed replies and a model picker.