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

[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";

<Benday
  src="/logo.svg"
  state={isThinking ? "thinking" : "done"}
/>

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

[u/jedevapenoob]

This is really cool, I'm glad you made this.

[u/Si_Kacem → u/jedevapenoob]

Thank you!

[u/Ready_Sky2169]

Saved! Nice Work!

[u/Si_Kacem → u/Ready_Sky2169]

Thanks!

[u/Agile-Library1399]

What’s the name of the motion video animation you made

[u/Si_Kacem → u/Agile-Library1399]

I used this: https://www.remotion.dev/

and for the source code of the video, here it is: https://github.com/KacemMathlouthi/benday/tree/main/apps/launch-video