Spin Text Badge

Spin Text Badge is a production-grade rotating text badge built on pure SVG and CSS animations.

Spin Text Badge is a production-grade rotating text badge built on pure SVG and CSS animations. Three things make it different from every other circular text component in the marketplace: Image center slot — drop a logo, profile photo, or product shot inside the spinning text. Responsive fit (cover/contain). Built-in link / CTA — make the entire badge clickable. Survives Framer page overlays that normally break click handling on hero sections. Smooth hover — speed changes via Web Animations API playbackRate, so rotation stays in place when slowing/speeding/pausing. No snap-to-zero artifact. Features Auto Fill 360° — text repeats and stretches to perfectly close the loop (uses textLength + lengthAdjust="spacing"). Math-precise seam, never a gap. Manual repeat — set exact count if you prefer. Inside / Outside text — text reads along the outer or inner edge with one toggle. 5 hover modes: None, Speed Up (×1–10), Slow Down (×0–0.99), Pause, Go Bonkers (chaotic spike). Center slot: Icon (any glyph/emoji + color + size) or Image (responsive, cover/contain). Border ring — outer or inner stroke (inset −50 to +40 px from text path). Typography: font family, weight 100–900, size, letter spacing, color. Direction: clockwise or counter-clockwise. Speed 0–300. Link: built-in URL field with optional new-tab behavior. Why pure SVG + CSS No Framer Motion, no GSAP, no canvas. One tag, one SVG. Smaller bundle, lower CPU, and works in every Framer rendering pipeline (canvas / preview / published / SSR snapshot). Use cases «Available for work ↗» badges · scroll indicators · clickable logos · «Get in touch» CTA · brand stamps · sticker-style portfolio accents · animated pricing badges Pricing $7 · One-time · Lifetime updates

Most flexible circular text component