About Spin Text Badge
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 <style> 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
