Circular Text
Text set on a rotating circle — the “scroll down ·” badge — speeding up on hover. Pure SVG + CSS.
svgrsc2 files · 53 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/circular-text.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs circular-textUsage
import { CircularText } from "@/components/opus/text/circular-text";
<CircularText text="scroll down · scroll down · "><ArrowDown /></CircularText>API
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text around the circle (add separators). |
| size | number | 140 | Diameter (px). |
| duration | number | 14 | Seconds per turn. |
| fontSize / spacing | number | 12 / 0.28 | Type size and tracking (em). |