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"] 5e:T8c4,

Circular Type Pro is an interactive circular typography component for Framer that turns text into animated concentric rings. Create bold radial type layouts with rotating text, multiple rings, customizable typography, hover focus, drag interaction, scroll-driven motion, and elegant entrance animations.

HOW TO USE

Add Circular Type Pro to your Framer page
Enter one shared phrase or create different text for each ring
Adjust the number of rings and text direction
Customize font, size, tracking, spacing, and separators
Enable auto rotation, drag interaction, hover focus, and scroll motion
Choose an entrance animation and customize the ring guides
Adjust colors, background, hollow center, and overall layout

KEY FEATURES

Circular Typography — Arrange text around multiple concentric rings for a distinctive radial layout.
Shared or Per-Ring Text — Use the same phrase across every ring or customize the content of each ring individually.
Smooth Auto Rotation — Control rotation speed, clockwise or counterclockwise direction, alternating ring movement, and speed spread.
Interactive Drag & Scroll — Spin the typography with drag gestures, mouse interaction, keyboard controls, and scroll-based motion.
Hover Focus — Highlight individual rings while slowing their rotation and dimming surrounding rings.
Entrance Animations — Choose between Unspool, Bloom, or no entrance animation, with inside-out or outside-in sequencing.
Guides & Visual Styling — Customize circular guides, dash patterns, line width, hollow center, inset, colors, and background.

WHY CIRCULAR TYPE PRO?

Circular Type Pro turns ordinary text into a dynamic visual centerpiece. Its concentric ring system creates a strong sense of movement and depth while keeping typography at the center of the experience.

5a:[["$","$L5d",null,{"post":{"id":"01a1017e-9e99-770c-9dfd-e09078bcb134","title":null,"body":"

Interactive Circular Typography

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Circular Typography"}]}]},"author":{"framerUserId":"38425120-6213-4b66-8b3c-e3e66d07ec64","name":"Interface Studio","slug":"interfacestudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2199676/kD3QNNYGg-bGneREuqMDI2n3QFCDqegiFFxRtaNA","followed":false,"followsYou":false},"media":[],"resources":[{"id":"bqRNKNVgDidjtj21OS6G","resolved":true,"title":"Circular Type Pro","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Circular Type Pro","marks":[{"type":"bold"}]},{"type":"text","text":" is an interactive circular typography component for Framer that turns text into animated concentric rings. Create bold radial type layouts with rotating text, multiple rings, customizable typography, hover focus, drag interaction, scroll-driven motion, and elegant entrance animations."}]},{"type":"customHeading","content":[{"type":"text","text":"HOW TO USE"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add "},{"type":"text","text":"Circular Type Pro","marks":[{"type":"bold"}]},{"type":"text","text":" to your Framer page"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enter one shared phrase or create different text for each ring"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust the number of rings and text direction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize font, size, tracking, spacing, and separators"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enable auto rotation, drag interaction, hover focus, and scroll motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose an entrance animation and customize the ring guides"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust colors, background, hollow center, and overall layout"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"KEY FEATURES"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Circular Typography","marks":[{"type":"bold"}]},{"type":"text","text":" — Arrange text around multiple concentric rings for a distinctive radial layout."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shared or Per-Ring Text","marks":[{"type":"bold"}]},{"type":"text","text":" — Use the same phrase across every ring or customize the content of each ring individually."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth Auto Rotation","marks":[{"type":"bold"}]},{"type":"text","text":" — Control rotation speed, clockwise or counterclockwise direction, alternating ring movement, and speed spread."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Drag & Scroll","marks":[{"type":"bold"}]},{"type":"text","text":" — Spin the typography with drag gestures, mouse interaction, keyboard controls, and scroll-based motion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover Focus","marks":[{"type":"bold"}]},{"type":"text","text":" — Highlight individual rings while slowing their rotation and dimming surrounding rings."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Entrance Animations","marks":[{"type":"bold"}]},{"type":"text","text":" — Choose between Unspool, Bloom, or no entrance animation, with inside-out or outside-in sequencing."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Guides & Visual Styling","marks":[{"type":"bold"}]},{"type":"text","text":" — Customize circular guides, dash patterns, line width, hollow center, inset, colors, and background."}]},{"type":"paragraph"}]}]},{"type":"customHeading","content":[{"type":"text","text":"WHY CIRCULAR TYPE PRO?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Circular Type Pro","marks":[{"type":"bold"}]},{"type":"text","text":" turns ordinary text into a dynamic visual centerpiece. Its concentric ring system creates a strong sense of movement and depth while keeping typography at the center of the experience."}]}]},"introduction":"Interactive Circular Typography","slug":"circular-type-pro","author":{"framerUserId":"38425120-6213-4b66-8b3c-e3e66d07ec64","name":"Interface Studio","slug":"interfacestudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2199676/kD3QNNYGg-bGneREuqMDI2n3QFCDqegiFFxRtaNA","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38425120-6213-4b66-8b3c-e3e66d07ec64/01a1017e-7b44-7007-80a4-34ac2c07047d.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-03T11:20:37.163Z","updatedAt":"2026-10-03T11:20:37.163Z","publishedAt":"2026-10-03T11:20:37.161Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Annulet-c2DeKV.js@YZXukKM09xrHyKmullSq","previewUrl":"https://circulartypepro.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"YZXukKM09xrHyKmullSq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-03T11:20:37.785Z","updatedAt":"2026-10-03T11:20:37.785Z","reported":false}}],"$L5f"]

Suggested for you