Rotating Text Badge creates a circular ring of text that’s ideal for stamps, logos, hero accents, and UI callouts. It’s designed to be simple to style, easy to animate, and fully editable from the Framer properties panel.
Text + layout
Text + Separator: define the label and the divider glyph used in repeated layouts.
Repeat Mode
As Is: renders your text exactly as typed.
Auto Fill: repeats your text + separator to approximate a full 360° ring.
Radius: controls how far the text sits from the center.
Offset: rotates the starting position to align the badge exactly where you want.
Orientation: choose Tangent (classic circular label) or Radial (letters face outward).
Text Side: switch Outside / Inside while keeping the text readable.
Motion
Spin: toggle continuous rotation on/off.
Speed (RPM): higher value = faster rotation (intuitive control).
Reverse Spin: flips spin direction without changing the text layout.
On Hover: none / speedUp / slowDown / pause / goBonkers
SpeedUp Multiplier (1–10x) appears when SpeedUp is selected.
SlowDown Multiplier (0.1–0.99x) appears when SlowDown is selected.
Styling
Font: full Framer font control (family, size, weight, etc.).
Text Color + Opacity: fine-tune legibility across backgrounds.
Center Fill: optional center shape with solid/linear/radial fill, plus inset, blur, and opacity controls.
Ring: optional border ring with thickness, color, and opacity.
Use it to add brand personality with minimal setup—clean by default, and expressive when you turn on motion and hover behavior.
Rajat Hooda
