# Motion Text Circular

Rotating circular badge text around a logo or icon in a hero.

- id: `motion-text-circular`
- Page: https://agentic-ui-kit.com/components/motion-text-circular
- Live preview: https://agentic-ui-kit.com/live/component/motion-text-circular?piece=motion-text-circular

## Install

```bash
agentic-ui add motion-text-circular
npx shadcn@4.17.0 add @agentic-ui/motion-text-circular
```

## Metadata

- **Level:** block
- **Category:** motion
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** text-on-circle, svg-text-path, auto-repeat-to-fill, auto-font-size, optional-slow-spin, clockwise-or-counterclockwise, pause-on-hover, pause-offscreen, centre-slot, decorative-mode, reduced-motion-fallback
- **Intents:** communicate, show-composition
- **Suits domains:** marketing, saas, ecommerce, media, devtools, social
- **Interaction:** hover
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** rotating circular badge text around a logo or icon in a hero, text on a circular path with a sticker style spinning badge, round 'scroll down' or 'available for work' label that turns slowly, ring of repeated words around an avatar or number
- **Avoid when:** Anything the user has to read quickly, since turning text is hard to read, More than two or three words that matter (the text is spread around the circle), Screens with several continuously moving elements already (use spin={false}), Protected enterprise personalities, where the text group is not allowed
- **Preserve when adapting:** labelled-image, centre-slot-upright, css-transform-spin-only, pause-offscreen
- **Replace when adapting:** text, separator, size, period, direction, centre-content
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** @agentic-ui/motion, @agentic-ui/tokens, react
- **Motion:** profile subtle, library css, reduced-motion fallback yes, target 60 fps
- **Registry dependencies:** lib-motion