50:I[267044,["/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/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T6fe,

■ What it does

Type your levels from top to bottom and Pyramid Diagram draws the layers for you — evenly split, with a note beside each level connected by a dotted line. Pick two colors and every layer gets its own shade, with text color adjusting automatically for contrast.

Great for brand pyramids, marketing funnels, Maslow-style hierarchies, pricing tiers and learning paths.

■ Customizable properties

• Layers — label, note and (optional) custom color for each level

• Shape — Pyramid or Funnel, with a Pointed or Flat tip

• Colors — Gradient (Top → Bottom, auto-blended) or Custom per layer

• Gap — spacing between layers

• Side Notes — show or hide, adjustable notes width

• Compact Below — on narrow screens, notes move into a caption under the pyramid (tap a layer to read it)

• Hover Highlight — focus one layer and its note

• Entrance — layers stack in once when scrolled into view

• Style & Fonts — note, line and light/dark text colors; layer and note fonts

■ Why this component

• No drawing: change the list, the shapes follow.

• Readable on every layer: text flips between light and dark based on the layer color.

• Mobile-ready: switches to a compact layout with a tap-to-read caption.

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.

■ Need help?

Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.

More components from BrandingUp: https://brandingupstudio.com

52:T6a9,

■ What it does

Place your product and competitors on a 2x2 map — just type an X and Y value (0–100) for each one. Axes, quadrant names and spacing are handled for you, and your own brand stands out with an accent chip and a highlighted quadrant.

Perfect for "Why us" sections, SaaS comparison pages, pitch-style landing pages and brand strategy case studies.

■ Customizable properties

• Items — name, X, Y, logo (or auto initials), color, tooltip note and a Featured toggle

• Axes — left, right, bottom and top labels

• Quadrants — four corner names, plus one highlighted quadrant

• Marker — Chip (logo + name) or Dot (point + label)

• Tooltips — hover (or tap) an item to show its note

• Entrance — items pop in once when scrolled into view

• Style & Fonts — background, grid, axis, text, chip and accent colors, corner radius; label, axis and quadrant fonts

■ Why this component

• Data-first: move an item by changing two numbers — no manual positioning.

• Your brand pops: accent chip with a soft ring + tinted "winning" quadrant.

• Responsive: positions are relative, text stays readable from desktop to mobile.

■ Need help?

Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.

More components from BrandingUp: https://brandingupstudio.com

53:T6e7,

■ What it does

Explain how your skills, services or ideas overlap — in one clean diagram. Name each circle and every overlap (up to 7 areas), and visitors can hover or tap any area to see a short explanation in the caption below.

Perfect for agency "what we do" sections, portfolios, SaaS positioning and pitch-style landing pages.

■ Customizable properties

• Circles — 2 or 3

• Circle A / B / C — label, note, color and a hover detail

• Overlaps — A∩B, A∩C, B∩C and Center labels with their own details

• Overlap — how close the circles sit (10–80%); labels re-position automatically

• Fill — Tint, Blend (colors mix where they overlap) or Outline

• Hover Highlight — highlights exactly the area under the cursor (tap on mobile)

• Caption — default text, shown or hidden

• Entrance — circles glide in once when scrolled into view

• Style & Fonts — text, stroke, highlight and caption colors; label, note, region and caption fonts

■ Why this component

• Real area-by-area interaction: each overlap is its own hover target.

• Labels place themselves inside the correct area, whatever overlap you choose.

• Pure SVG: crisp at any size, text scales with the diagram.

■ Need help?

Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.

More components from BrandingUp: https://brandingupstudio.com

54:T65c,

Add people, type who they report to, and Org Chart builds the whole hierarchy for you. Cards, connector lines and spacing are laid out automatically. No manual positioning, no nested frames. Perfect for About, Team and Company pages.

What you can customize

- People: name, role, photo, "Reports To" and team color

- Direction: vertical (top-down) or horizontal (left-to-right)

- Lines: elbow or curved connectors

- Expanded Levels: how many levels are open on load

- Collapsible: click a card to expand or collapse its team (+N badge shows hidden people)

- Overflow: Fit, Shrink or Scroll, so large teams never break on mobile

- Layout, colors, radius, shadow and separate name/role fonts

Why it's different

- Built from a flat list: just type the manager's name and the tree updates itself.

- Big org? Collapse teams and let Fit/Shrink keep everything readable on any screen.

- No photo? Initials avatars in each team's color are generated automatically.

How to install: copy the Component URL and paste it onto your Framer canvas (Cmd/Ctrl + V).

Built with code but fully customizable via property controls, no coding needed. Unlink is not provided so we can keep shipping updates. When an update is available, just click Update on the component.

Made by BrandingUp.

■ Need help?

Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr.

More components from BrandingUp: https://brandingupstudio.com

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-cc7993de-4f5d-4209-b3f0-695614bf8a8b-all:/unified/creator/cc7993de-4f5d-4209-b3f0-695614bf8a8b/activity/":[{"data":[{"id":"01a0fcb2-c32c-7767-912a-f4385507d8ee","type":"component.created","target":{"type":"component","id":"14rIgrJaR1ZIfmDa5TEA","preview":"05 Pyramid Diagram","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/01a0fcb0-01f9-74fc-a7e7-0360381d34e7.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","slug":"-ds491f","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-02T12:59:28.940Z","latestAt":"2026-10-02T12:59:28.940Z"},{"id":"01a0fcaf-427e-71d4-962b-92f155313aa1","type":"component.created","target":{"type":"component","id":"UVFMNoraJKpDfRLA2Uc6","preview":"04 Positioning Map","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/01a0fcae-97a7-7738-8393-30b03302af56.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","slug":"-ds491f","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-02T12:55:39.390Z","latestAt":"2026-10-02T12:55:39.390Z"},{"id":"01a0fcae-08f4-717b-8ae1-0133d8cb61c2","type":"component.created","target":{"type":"component","id":"3Yso0xhHWp1F5CLbcRcN","preview":"03 Venn Diagram","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/01a0fcac-c2f8-76f9-a9fe-1f85340afe13.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","slug":"-ds491f","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-02T12:54:19.124Z","latestAt":"2026-10-02T12:54:19.124Z"},{"id":"01a0eb14-9df4-77af-a0d1-9e047b3efd42","type":"component.created","target":{"type":"component","id":"GMjW4e83XXSMb1isubyx","preview":"01 Team Org Chart","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/01a0eb10-cfb2-739d-bd0c-50b9d91f1397.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","slug":"-ds491f","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-29T02:53:12.052Z","latestAt":"2026-09-29T02:53:12.052Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:cc7993de-4f5d-4209-b3f0-695614bf8a8b:/unified/posts/?creator=cc7993de-4f5d-4209-b3f0-695614bf8a8b&with=reposts":[{"data":[{"id":"01a0fcb2-c0c1-768c-a76b-ddcd9376693a","title":null,"body":"

Made a free pyramid diagram component 🔺 Type your levels, pick two colors — layers, shades and side notes draw themselves. Pyramid or funnel, and it switches to a tap-to-read layout on mobile. Feedback welcome!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Made a free pyramid diagram component "},{"type":"emoji","attrs":{"name":"small_red_triangle","emoji":"🔺"}},{"type":"text","text":" Type your levels, pick two colors — layers, shades and side notes draw themselves. Pyramid or funnel, and it switches to a tap-to-read layout on mobile. Feedback welcome!"}]}]},"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":"14rIgrJaR1ZIfmDa5TEA","resolved":true,"title":"05 Pyramid Diagram","body":"$51","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"■ What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"Type your levels from top to bottom and Pyramid Diagram draws the layers for you — evenly split, with a note beside each level connected by a dotted line. Pick two colors and every layer gets its own shade, with text color adjusting automatically for contrast."}]},{"type":"paragraph","content":[{"type":"text","text":"Great for brand pyramids, marketing funnels, Maslow-style hierarchies, pricing tiers and learning paths."}]},{"type":"paragraph","content":[{"type":"text","text":"■ Customizable properties"}]},{"type":"paragraph","content":[{"type":"text","text":"• Layers — label, note and (optional) custom color for each level"}]},{"type":"paragraph","content":[{"type":"text","text":"• Shape — Pyramid or Funnel, with a Pointed or Flat tip"}]},{"type":"paragraph","content":[{"type":"text","text":"• Colors — Gradient (Top → Bottom, auto-blended) or Custom per layer"}]},{"type":"paragraph","content":[{"type":"text","text":"• Gap — spacing between layers"}]},{"type":"paragraph","content":[{"type":"text","text":"• Side Notes — show or hide, adjustable notes width"}]},{"type":"paragraph","content":[{"type":"text","text":"• Compact Below — on narrow screens, notes move into a caption under the pyramid (tap a layer to read it)"}]},{"type":"paragraph","content":[{"type":"text","text":"• Hover Highlight — focus one layer and its note"}]},{"type":"paragraph","content":[{"type":"text","text":"• Entrance — layers stack in once when scrolled into view"}]},{"type":"paragraph","content":[{"type":"text","text":"• Style & Fonts — note, line and light/dark text colors; layer and note fonts"}]},{"type":"paragraph","content":[{"type":"text","text":"■ Why this component"}]},{"type":"paragraph","content":[{"type":"text","text":"• No drawing: change the list, the shapes follow."}]},{"type":"paragraph","content":[{"type":"text","text":"• Readable on every layer: text flips between light and dark based on the layer color."}]},{"type":"paragraph","content":[{"type":"text","text":"• Mobile-ready: switches to a compact layout with a tap-to-read caption."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"■ Need help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr."}]},{"type":"paragraph","content":[{"type":"text","text":"More components from BrandingUp: https://brandingupstudio.com"}]}]},"introduction":"Layered pyramid with side notes","slug":"05-pyramid-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/01a0fcb0-01f9-74fc-a7e7-0360381d34e7.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T12:59:27.614Z","updatedAt":"2026-10-03T08:12:53.132Z","publishedAt":"2026-10-02T12:59:27.611Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/PyramidDiagram-OFIfGT.js@ql7hcAOsQKAZPKFS81Xp","previewUrl":"https://small-convention-270138.framer.app/pyramid-diagram","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"ql7hcAOsQKAZPKFS81Xp","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T12:59:28.321Z","updatedAt":"2026-10-02T12:59:28.321Z"},{"id":"01a0fcaf-400b-73d5-a3c3-56ea3ad4b47c","title":null,"body":"

Made a free 2x2 positioning map component 📍 Give each competitor an X and Y value, mark your own brand as Featured, and hover any item for a short note. Chip or dot markers, highlighted quadrant. Feedback welcome!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Made a free 2x2 positioning map component "},{"type":"emoji","attrs":{"name":"round_pushpin","emoji":"📍"}},{"type":"text","text":" Give each competitor an X and Y value, mark your own brand as Featured, and hover any item for a short note. Chip or dot markers, highlighted quadrant. Feedback welcome!"}]}]},"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":"UVFMNoraJKpDfRLA2Uc6","resolved":true,"title":"04 Positioning Map","body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"■ What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"Place your product and competitors on a 2x2 map — just type an X and Y value (0–100) for each one. Axes, quadrant names and spacing are handled for you, and your own brand stands out with an accent chip and a highlighted quadrant."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for \"Why us\" sections, SaaS comparison pages, pitch-style landing pages and brand strategy case studies."}]},{"type":"paragraph","content":[{"type":"text","text":"■ Customizable properties"}]},{"type":"paragraph","content":[{"type":"text","text":"• Items — name, X, Y, logo (or auto initials), color, tooltip note and a Featured toggle"}]},{"type":"paragraph","content":[{"type":"text","text":"• Axes — left, right, bottom and top labels"}]},{"type":"paragraph","content":[{"type":"text","text":"• Quadrants — four corner names, plus one highlighted quadrant"}]},{"type":"paragraph","content":[{"type":"text","text":"• Marker — Chip (logo + name) or Dot (point + label)"}]},{"type":"paragraph","content":[{"type":"text","text":"• Tooltips — hover (or tap) an item to show its note"}]},{"type":"paragraph","content":[{"type":"text","text":"• Entrance — items pop in once when scrolled into view"}]},{"type":"paragraph","content":[{"type":"text","text":"• Style & Fonts — background, grid, axis, text, chip and accent colors, corner radius; label, axis and quadrant fonts"}]},{"type":"paragraph","content":[{"type":"text","text":"■ Why this component"}]},{"type":"paragraph","content":[{"type":"text","text":"• Data-first: move an item by changing two numbers — no manual positioning."}]},{"type":"paragraph","content":[{"type":"text","text":"• Your brand pops: accent chip with a soft ring + tinted \"winning\" quadrant."}]},{"type":"paragraph","content":[{"type":"text","text":"• Responsive: positions are relative, text stays readable from desktop to mobile."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"■ Need help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr."}]},{"type":"paragraph","content":[{"type":"text","text":"More components from BrandingUp: https://brandingupstudio.com"}]}]},"introduction":"2x2 quadrant chart vs competitors","slug":"04-positioning-map","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/01a0fcae-97a7-7738-8393-30b03302af56.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T12:55:38.091Z","updatedAt":"2026-10-03T08:12:38.044Z","publishedAt":"2026-10-02T12:55:38.088Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/PositioningMap-L3dn9L.js@BlyDbgpC94DiVhcI8wXi","previewUrl":"https://small-convention-270138.framer.app/positioning-map","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"BlyDbgpC94DiVhcI8wXi","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T12:55:38.763Z","updatedAt":"2026-10-02T12:55:38.763Z"},{"id":"01a0fcae-067e-7167-8f54-b5201af345ed","title":null,"body":"

Made a free Venn diagram component ⭕⭕⭕ Name every overlap, then hover (or tap) any area and the caption explains it. 2 or 3 circles, labels place themselves, tint / blend / outline fills. Feedback welcome!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Made a free Venn diagram component ⭕⭕⭕ Name every overlap, then hover (or tap) any area and the caption explains it. 2 or 3 circles, labels place themselves, tint / blend / outline fills. Feedback welcome!"}]}]},"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":"3Yso0xhHWp1F5CLbcRcN","resolved":true,"title":"03 Venn Diagram","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"■ What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"Explain how your skills, services or ideas overlap — in one clean diagram. Name each circle and every overlap (up to 7 areas), and visitors can hover or tap any area to see a short explanation in the caption below."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for agency \"what we do\" sections, portfolios, SaaS positioning and pitch-style landing pages."}]},{"type":"paragraph","content":[{"type":"text","text":"■ Customizable properties"}]},{"type":"paragraph","content":[{"type":"text","text":"• Circles — 2 or 3"}]},{"type":"paragraph","content":[{"type":"text","text":"• Circle A / B / C — label, note, color and a hover detail"}]},{"type":"paragraph","content":[{"type":"text","text":"• Overlaps — A∩B, A∩C, B∩C and Center labels with their own details"}]},{"type":"paragraph","content":[{"type":"text","text":"• Overlap — how close the circles sit (10–80%); labels re-position automatically"}]},{"type":"paragraph","content":[{"type":"text","text":"• Fill — Tint, Blend (colors mix where they overlap) or Outline"}]},{"type":"paragraph","content":[{"type":"text","text":"• Hover Highlight — highlights exactly the area under the cursor (tap on mobile)"}]},{"type":"paragraph","content":[{"type":"text","text":"• Caption — default text, shown or hidden"}]},{"type":"paragraph","content":[{"type":"text","text":"• Entrance — circles glide in once when scrolled into view"}]},{"type":"paragraph","content":[{"type":"text","text":"• Style & Fonts — text, stroke, highlight and caption colors; label, note, region and caption fonts"}]},{"type":"paragraph","content":[{"type":"text","text":"■ Why this component"}]},{"type":"paragraph","content":[{"type":"text","text":"• Real area-by-area interaction: each overlap is its own hover target."}]},{"type":"paragraph","content":[{"type":"text","text":"• Labels place themselves inside the correct area, whatever overlap you choose."}]},{"type":"paragraph","content":[{"type":"text","text":"• Pure SVG: crisp at any size, text scales with the diagram."}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"■ Need help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr."}]},{"type":"paragraph","content":[{"type":"text","text":"More components from BrandingUp: https://brandingupstudio.com"}]}]},"introduction":"Interactive 2 & 3 circle overlaps","slug":"03-venn-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/01a0fcac-c2f8-76f9-a9fe-1f85340afe13.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T12:54:17.805Z","updatedAt":"2026-10-03T08:12:22.000Z","publishedAt":"2026-10-02T12:54:17.802Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/VennDiagram-hKzrdf.js@lXxC8gtIewMZNC6wM9dD","previewUrl":"https://small-convention-270138.framer.app/venn-diagram","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"lXxC8gtIewMZNC6wM9dD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T12:54:18.494Z","updatedAt":"2026-10-02T12:54:18.494Z"},{"id":"01a0eb14-9b6d-7270-8af8-4bcd9060fcfd","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":"GMjW4e83XXSMb1isubyx","resolved":true,"title":"01 Team Org Chart","body":"$54","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Add people, type who they report to, and Org Chart builds the whole hierarchy for you. Cards, connector lines and spacing are laid out automatically. No manual positioning, no nested frames. Perfect for About, Team and Company pages."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you can customize"}]},{"type":"paragraph","content":[{"type":"text","text":"- People: name, role, photo, \"Reports To\" and team color"}]},{"type":"paragraph","content":[{"type":"text","text":"- Direction: vertical (top-down) or horizontal (left-to-right)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Lines: elbow or curved connectors"}]},{"type":"paragraph","content":[{"type":"text","text":"- Expanded Levels: how many levels are open on load"}]},{"type":"paragraph","content":[{"type":"text","text":"- Collapsible: click a card to expand or collapse its team (+N badge shows hidden people)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Overflow: Fit, Shrink or Scroll, so large teams never break on mobile"}]},{"type":"paragraph","content":[{"type":"text","text":"- Layout, colors, radius, shadow and separate name/role fonts"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Why it's different"}]},{"type":"paragraph","content":[{"type":"text","text":"- Built from a flat list: just type the manager's name and the tree updates itself."}]},{"type":"paragraph","content":[{"type":"text","text":"- Big org? Collapse teams and let Fit/Shrink keep everything readable on any screen."}]},{"type":"paragraph","content":[{"type":"text","text":"- No photo? Initials avatars in each team's color are generated automatically."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"How to install: copy the Component URL and paste it onto your Framer canvas (Cmd/Ctrl + V)."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Built with code but fully customizable via property controls, no coding needed. Unlink is not provided so we can keep shipping updates. When an update is available, just click Update on the component."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Made by BrandingUp."}]},{"type":"paragraph","content":[{"type":"text","text":"■ Need help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Email hello@brandingupstudio.com — we usually reply within 72 hours. Custom edits are available from $75/hr."}]},{"type":"paragraph","content":[{"type":"text","text":"More components from BrandingUp: https://brandingupstudio.com"}]}]},"introduction":"Auto-layout collapsible team tree","slug":"01-team-org-chart","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/01a0eb10-cfb2-739d-bd0c-50b9d91f1397.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-29T02:53:10.757Z","updatedAt":"2026-10-03T08:12:05.388Z","publishedAt":"2026-09-29T02:53:10.755Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/OrgChart-NYpTmq.js@RUykuukL11m0osbc5GAJ","previewUrl":"https://small-convention-270138.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"RUykuukL11m0osbc5GAJ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-29T02:53:11.405Z","updatedAt":"2026-09-29T02:53:11.405Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L55"}]