---
title: "Spin Text Badge — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Prettifyweb · Text. Spin Text Badge is a production-grade rotating text badge built on pure SVG and CSS animations."
canonical: "https://framer.elliotli.dev/component/spin-text-badge"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Spin Text Badge

# Spin Text Badge

Most flexible circular text component

[View on Framer](https://framer.com/marketplace/components/spin-text-badge/?via=elliot-li)

![Spin Text Badge preview image 1](https://framer.elliotli.dev/og/component/spin-text-badge/d2f8e48fa01532d5/1600x1200.jpg)

## Summary

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

## Description

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:

1.  **Image center slot** — drop a logo, profile photo, or product shot inside the spinning text. Responsive fit (cover/contain).
    
2.  **Built-in link / CTA** — make the entire badge clickable. Survives Framer page overlays that normally break click handling on hero sections.
    
3.  **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

## Rank history [How rankings work →](/terms#rankings)

-   All · #4338

## Details

- **Author**: Prettifyweb
- **Price**: $7.00
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-16
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing