5b:I[473921,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0lpbs3388m8i9.js","/creators-assets/_next/static/immutable/chunks/1cyyov0z5q-kt.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/19vaojedolulr.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/09klh1t314i6_.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/15qb5jvtj_j-a.js","/creators-assets/_next/static/immutable/chunks/3p2-jhwmdt2w4.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2ypcsbrcjzeke.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3nnozhk_k4v6s.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/21ae0xqjlej6m.js","/creators-assets/_next/static/immutable/chunks/3xnhxg14xjx1h.js","/creators-assets/_next/static/immutable/chunks/0q4_4jbe5r70f.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js"],"PostDetailCard"] 5c:T78f,

■ What it does

Add your steps and Cycle Process Diagram arranges them around a circle, evenly spaced, with curved arrows showing the flow from one step to the next — and back to the start. Brand flywheels, customer loops, PDCA, product lifecycles, service cycles: if it goes around, this draws it.

Change the number of steps and every angle and arrow recalculates by itself. No manual positioning, no drawing arcs by hand.

Hover, click or use the arrow keys on any step to highlight it and read its description. Turn on Auto Cycle and the highlight walks around the loop on its own.

■ Customizable properties

- Steps — title, description, icon (12 built-in icons or numbers), color and optional image for each step (up to 12)

- Direction — Clockwise or Counter-clockwise

- Start Angle — rotate where Step 1 sits on the circle

- Details — show the description in the Center, in a Side panel, or as a Tooltip

- Auto Cycle — highlight steps one by one, with your own interval; pauses on hover

- Node Shape — Circle, Pill or Card

- Layout — node size, radius, ring width, arrow gap, ring and arrows on/off

- Style — accent, text, ring, arrow and node colors

- Fonts — separate title, label and body fonts

■ Need help?

Reach out anytime at hello@brandingupstudio.com — we usually reply within 72 hours.

Custom edits are available from $75/hr.

■ More resources

Explore more components at BrandingUp → https://brandingupstudio.com

Built with code but fully customizable via property controls — no coding needed.

Unlink is not provided so we can keep delivering updates. When an update is available, just click the Update button on the component.

58:[["$","$L5b",null,{"post":{"id":"01a11fd8-48d8-73c7-a88e-c4a50ca2756c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[],"resources":[{"id":"86s4pJLUwNcEJkIOSD9l","resolved":true,"title":"12 Cycle Diagram","body":"$5c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"■ What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"Add your steps and Cycle Process Diagram arranges them around a circle, evenly spaced, with curved arrows showing the flow from one step to the next — and back to the start. Brand flywheels, customer loops, PDCA, product lifecycles, service cycles: if it goes around, this draws it."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Change the number of steps and every angle and arrow recalculates by itself. No manual positioning, no drawing arcs by hand."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Hover, click or use the arrow keys on any step to highlight it and read its description. Turn on Auto Cycle and the highlight walks around the loop on its own."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"■ Customizable properties"}]},{"type":"paragraph","content":[{"type":"text","text":"- Steps — title, description, icon (12 built-in icons or numbers), color and optional image for each step (up to 12)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Direction — Clockwise or Counter-clockwise"}]},{"type":"paragraph","content":[{"type":"text","text":"- Start Angle — rotate where Step 1 sits on the circle"}]},{"type":"paragraph","content":[{"type":"text","text":"- Details — show the description in the Center, in a Side panel, or as a Tooltip"}]},{"type":"paragraph","content":[{"type":"text","text":"- Auto Cycle — highlight steps one by one, with your own interval; pauses on hover"}]},{"type":"paragraph","content":[{"type":"text","text":"- Node Shape — Circle, Pill or Card"}]},{"type":"paragraph","content":[{"type":"text","text":"- Layout — node size, radius, ring width, arrow gap, ring and arrows on/off"}]},{"type":"paragraph","content":[{"type":"text","text":"- Style — accent, text, ring, arrow and node colors"}]},{"type":"paragraph","content":[{"type":"text","text":"- Fonts — separate title, label and body fonts"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"■ Need help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Reach out anytime at hello@brandingupstudio.com — we usually reply within 72 hours."}]},{"type":"paragraph","content":[{"type":"text","text":"Custom edits are available from $75/hr."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"■ More resources"}]},{"type":"paragraph","content":[{"type":"text","text":"Explore more components at BrandingUp → "},{"type":"text","text":"https://brandingupstudio.com","marks":[{"type":"link","attrs":{"href":"https://brandingupstudio.com","target":"_blank","rel":"noopener noreferrer nofollow"}}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Built with code but fully customizable via property controls — no coding needed."}]},{"type":"paragraph","content":[{"type":"text","text":"Unlink is not provided so we can keep delivering updates. When an update is available, just click the Update button on the component."}]}]},"introduction":"Auto-layout flywheel & loop chart","slug":"12-cycle-diagram","author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/01a11fd4-94f1-71a1-a39a-553f71a24424.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-09T08:47:09.875Z","updatedAt":"2026-10-09T08:47:09.875Z","publishedAt":"2026-10-09T08:47:09.872Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://small-convention-270138.framer.app/cycle-diagram","price":"10","paymentUrl":"https://brandingup.lemonsqueezy.com/checkout/buy/3fdab9c9-c546-4401-9d26-703c0f1550aa","workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"Q8WrZoa2EECl36pChEjb","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-09T08:47:10.552Z","updatedAt":"2026-10-09T08:47:10.552Z","reported":false,"type":"post"}}],"$L5d"]

Suggested for you