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.
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
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
Optional continuous rotation animation
Choose clockwise or counter-clockwise direction
Adjustable speed control (slow, medium, or fast)
Great for creating dynamic, attention-grabbing elements
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
Company Badges & Seals: Create professional circular badges with your logo
Brand Elements: Design unique circular branding for headers and footers
Product Labels: Build circular product labels and packaging designs
Awards & Certificates: Add decorative circular text to awards
Animated Logos: Create spinning text animations around your logo
Event Branding: Design circular badges for events, conferences, and meetups
Social Media Graphics: Stand out with circular text in your posts
Website Headers: Add unique circular navigation or decorative elements
No coding required! Simply:
Drop the component into your Framer project
Enter your text
Upload a center logo (optional)
Customize colors, fonts, and spacing
Enable rotation if you want animation
All controls are intuitive and update in real-time, so you can see your changes instantly.
For Badges & Seals:
Use formal fonts with higher weight (700-900)
Keep rotation off for a static, professional look
Adjust Text Gap to create natural top/bottom spacing
Add your company logo in the center
For Animated Logos:
Enable rotation with slow speed (5-10) for elegance
Choose direction based on your design preference
The center logo stays static while text rotates around it
Perfect for hero sections and landing pages
For Product Labels:
Use larger radius (200-300) for more space
Increase font size proportionally with radius
Add character spacing (0.5-1.5) for an airy, premium feel
Keep word spacing moderate (8-12°)
IMPORTANT: 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@merokeeventures.com with any pre-purchase questions
Troy Miller
