Spinning Text

Installation

pnpm dlx @glinui/cli@latest add spinning-text

Credits. Adapted from Motion Primitives (MIT, (c) 2024 ibelick). motion/react removed (CSS and Web Animations API), tokens, accessibility, reduced motion levels, RTL Attribution details.

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

Improvement over the original: pause on hover or focus, pause offscreen and in hidden tabs, static ring at motion none, no inline style attributes.

End the string with a separator and a space so the loop reads as a ring: `"open source * made to be owned * "`.

<SpinningText variant="glass">{"glass * glass * "}</SpinningText>

<SpinningText variant="glass">{"glass * glass * "}</SpinningText>

<SpinningText duration={6} reverse radius={4} fontSize={0.7}>...</SpinningText>

<SpinningText duration={6} reverse radius={4} fontSize={0.7}>...</SpinningText>

<Card className="flex items-center gap-5">
  <SpinningText>{"verified * "}</SpinningText>
  <p>Trusted by teams</p>

<Card className="flex items-center gap-5">
  <SpinningText>{"verified * "}</SpinningText>
  <p>Trusted by teams</p>
</Card>

Accessibility

• The wrapper is `role="img"` with `aria-label` set to the full string; the individual glyphs are `aria-hidden`.
• Decorative by default. Pair it with a visible heading if the text carries meaning.
• Never traps focus or intercepts pointer events beyond the optional hover pause.

Reduced Motion

The ring only turns at motion level full. Under motion none or prefers-reduced-motion the component renders its static frame. Glyphs stay placed on the circle.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { SpinningText } from "@glinui/ui"