About
A frosted glass pill where an orange, green, blue and magenta aurora ripples sideways under a softly glinting "Thinking..." label.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Thinking Pill to your project and fits it to your theme.
Code
How Thinking Pill is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client"
import * as React from "react"
import { ThinkingPill } from "@/components/ui/thinking-pill"
export default function ThinkingPillDemo() {
const [active, setActive] = React.useState(true)
return (
<div className="flex min-h-screen w-full flex-col items-center justify-center gap-8 bg-[#1b1c1e] p-8">
<button
type="button"
onClick={() => setActive((a) => !a)}
className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-white/40"
aria-pressed={active}
aria-label={active ? "Pause thinking" : "Resume thinking"}
>
<ThinkingPill width={440} active={active} />
</button>
<p className="text-sm text-neutral-500">Click the pill to {active ? "stop" : "start"} thinking</p>
</div>
)
}
More by Louis's Graphics
View all
Metaball Loader
Glow Button
Orb Loader