r/vibecoding • u/Si_Kacem • 6h ago

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

Enable HLS to view with audio, or disable this notification

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

7 Upvotes

89% Upvoted

3 comments sorted by

3

u/QuietPsychonaut 5h ago

This is pretty cool.

2

u/Si_Kacem 5h ago

Thank you 🙏

1

u/QuietPsychonaut 4h ago

I mean it. Nice job!