u/Si_Kacem

I wanted AI products to have a more recognizable “thinking” state than the usual spinner, so I built Benday.

It’s a free and open-source React component that animates your own logo while a response or process is running. It includes 21 presets, with controls for color, speed, dot shape, glow, and more.

Built with React, TypeScript, Tailwind CSS, shadcn, and Canvas.

Install it with:

bunx shadcn@latest add KacemMathlouthi/benday/benday

Then use it like this:

import { Benday } from "@/components/ui/benday";

&lt;Benday
  src="/logo.svg"
  state={isThinking ? "thinking" : "done"}
/&gt;

Demo: https://benday.kacemmathlouthi.dev
GitHub: https://github.com/KacemMathlouthi/benday

I’d especially appreciate feedback on the presets, API, and whether you’d use something like this in an AI product.

I built Benday, an open-source React component that turns your logo into a thinking indicator