---
title: "Animated Circle Text — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Troy Miller · Text. Display badges, logos and more!"
canonical: "https://framer.elliotli.dev/component/animated-circle-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Animated Circle Text

# Animated Circle Text

Display badges, logos and more!

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

![Animated Circle Text preview image 1](https://framer.elliotli.dev/og/component/animated-circle-text/37c12914dde65dd7/1600x1200.jpg)

## Summary

Display badges, logos and more!

## Description

## Transform Your Designs with Beautiful Circular Text

The Circular Text component lets you create professional, eye-catching circular text layouts in seconds. Perfect for badges, seals, logos, awards, stamps, and any design that needs text arranged in a circle.

## ✨ Key Features

### 🎨 Complete Design Control

-   **Custom Fonts**: Access to all Framer fonts with full weight control (400-900)
    
-   **Flexible Sizing**: Adjust circle radius (60-300px) and font size (8-40px) independently
    
-   **Color Customization**: Choose any color for your text
    
-   **Smart Spacing**: Fine-tune character spacing and word spacing separately for perfect layouts
    

### 🖼️ Center Logo Support

-   Add any image to the center of your circle
    
-   Adjustable logo size (40-200px)
    
-   Automatically centered and scaled
    
-   Perfect for company logos, icons, or decorative elements
    

### 🔄 Smooth Rotation Animation

-   Optional continuous rotation animation
    
-   Choose clockwise or counter-clockwise direction
    
-   Adjustable speed control (slow, medium, or fast)
    
-   Great for creating dynamic, attention-grabbing elements
    

### 📐 Precise Layout Control

-   **Starting Rotation**: Position where your text begins on the circle
    
-   **Text Gap**: Control the space between the end and start of your text
    
-   **Character Spacing**: Adjust spacing between individual letters
    
-   **Word Spacing**: Add extra space between words for better readability
    

**RTANT:** Due to the nature of digital code components, **all sales are final and non-refundable**. Once purchased, you receive immediate access to the complete component code, which cannot be returned.

**Before purchasing, please:**

-   Review the component demo and documentation carefully
    
-   Check the feature list to ensure it meets your needs
    
-   Contact us at troy@fireislanddesign.com with any pre-purchase questions
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-r79c2pxw-FYPcI9wjmHSzUeWQvJTKlMIQ1gJMFd)

For design work, questions, or help, please reach out at [https://www.fireislanddesign.com/](https://www.merokeeventures.com/)

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

-   All · #6901

## Details

- **Author**: Troy Miller
- **Price**: $3.00
- **Published**: 2025-12-15
- **Updated**: 2026-06-17
- **Added**: 2025-12-05
- **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