---
title: "Circular Spin Text — Free Framer component · Best of Framer"
description: "Free Framer component · by MotionIQ Studio · Text. Interactive rotating text badge."
canonical: "https://framer.elliotli.dev/component/circular-spin-text"
---

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

# Circular Spin Text

Interactive rotating text badge.

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

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

## Summary

Interactive rotating text badge.

## Description

Add a touch of motion to your site with this spinning text component. Circular Text creates an engaging focal point that draws attention without overwhelming your design. Whether you need a rotating "Contact Us" stamp, a "Scroll Down" indicator, or just a decorative typographic element, it delivers smooth, performant animation with rich interactive capabilities.

**Features**

-   **Continuous Rotation:** Smooth infinite loop with customizable speed and direction.
    
-   **Deep Interactivity:** Choose from 5 distinct hover effects including "Speed Up", "Slow Down", "Pause", and the chaotic "Go Bonkers".
    
-   **Precise Control:** Independent controls for **Text Circle Radius** (visual spread) and **Hit Area Size** (interactive hit-area).
    
-   **Typography Support:** Full control over Font Size, Weight, and Letter Spacing.
    
-   **Responsive-Readiness:** Works seamlessly with Framer's layout tools.
    

Customisation Options

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-5p2j53ka-ppgCzGP7ef4kUxODjq3kHfbmVoWUTL)

1.  **Content:**
    
    -   **Text:** The message to display in the ring.
        
    -   **Color:** Fully customizable text color.
        
2.  **Geometry:**
    
    -   **Hit Area Size:** Defines the interactive diameter for hover triggers.
        
    -   **Text Circle Radius:** Controls how far the text sits from the center.
        
    -   **Direction:** Spin Clockwise or Counter-Clockwise.
        
3.  **Typography:**
    
    -   **Font Size & Weight:** standard text controls.
        
    -   **Letter Spacing:** Fine-tune the gap between characters.
        
4.  **Motion:**
    
    -   **Spin Duration:** Set the speed of the rotation loop.
        
    -   **Hover Effect:** Select the interactive behavior on mouseover.
        

**Set up**

1.  Drag the component onto your canvas.
    
2.  Edit the **Text** property to your desired message.
    
3.  Adjust **Text Radius** to set how wide the text ring should be.
    
4.  Set the **Circle Size** to define the invisible hover area (usually slightly larger than your text ring).
    
5.  Tweak **Font Size** and **Letter Spacing** until the reading rhythm is perfect.
    
6.  Choose your **Hover Effect** and hit Preview!
    

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

-   All · #408

## Details

- **Author**: MotionIQ Studio
- **Published**: 2026-02-05
- **Updated**: 2026-02-21
- **Added**: 2026-01-23
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos