5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5f:I[539959,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"CommentSection"] 5e:T68d,

Highlight Circle Text is a modern text enhancement component that draws an animated circle around important words, making your message stand out instantly.

Perfect for landing pages and marketing websites, it helps guide user attention and emphasize key phrases with a clean, hand-drawn style.

✨ Key Features

Animated circle drawing effect
Highlight specific words dynamically
Smooth and clean motion
Fully customizable colors and stroke width
Adjustable draw speed
Flexible text structure (before, highlight, after)
Responsive and lightweight

🎛 Controls

Customize everything easily:

Before text
Highlighted text
After text
Circle color
Circle stroke width
Draw speed
Text color & background
Font size, family & weight
Max width & spacing

🚀 Use Cases

Landing page headlines
Marketing websites
SaaS hero sections
Product highlights
Conversion-focused UI

⚡ Instructions

Add the component to your canvas
Enter your text (before, highlight, after)
Customize styles and animation
Adjust speed and colors
Preview and publish

5a:[["$","$L5d",null,{"post":{"id":"019db0bf-1906-7191-8908-dad8994bc84d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c0833d44-8768-47b9-9c37-ebef163c2488","name":"Shahnawaz Karatela","slug":"shahnawaz-karatela","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1790282/avatar-qllgIpjcmvmTbmXNDgrGDyHG9zHpxh.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"vyPdeVkKV0ScImDYAb8Y","resolved":true,"title":"Draw Circle Text","body":"$5e","bodyJson":null,"introduction":"Animated circle highlight for text","slug":"draw-circle-text","author":{"framerUserId":"c0833d44-8768-47b9-9c37-ebef163c2488","name":"Shahnawaz Karatela","slug":"shahnawaz-karatela","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1790282/avatar-qllgIpjcmvmTbmXNDgrGDyHG9zHpxh.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/vyPdeVkKV0ScImDYAb8Y/draw-circle-text-uZWFe2lrWDRgCNEjx9S50KRjq2rACc","metadata":{"tint":{"h":180,"s":67,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-05T17:45:42.986Z","updatedAt":"2026-04-21T20:07:46.557Z","publishedAt":"2026-04-21T15:53:27.046Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/DrawCircleText-DkhLwP.js@M5oornCJM4fHwSSWMA8n","previewUrl":"https://drawcircletext.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"M5oornCJM4fHwSSWMA8n","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":65,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-21T15:53:27.046Z","updatedAt":"2026-04-21T15:53:27.046Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"019db0bf-1906-7191-8908-dad8994bc84d"},"postId":"019db0bf-1906-7191-8908-dad8994bc84d","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you