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:T809,

SVG Chart draws your data. Benchmark Bars makes your case — the "N× faster" section dev-tool and AI landing pages hand-code, as one component that measures nothing and sends nothing.

WHAT IT IS

For each metric you type the rows — your product and two to five alternatives, one per line as Name | 42. The section draws horizontal bars, highlights your row, and works out the ratio against the strongest competitor: 4.3× faster, 4.1× smaller, 2.2× more throughput. Lower- and higher-is-better metrics sit side by side, each with its own hint.

WHAT YOU GET

— Horizontal bars per metric, your row in the accent color, the others in a quiet gray

— A ratio badge computed from your numbers, with your own word: faster, smaller, cheaper. It hides when your row is behind or the gap is under 1.1×

— Units before or after the value ($0.12, 42 ms, 94.2%), thousands separators kept exactly as you typed them

— A footnote per metric plus a source line and link for the section — a benchmark without its setup is just a claim

— List or two-column layout, light and dark themes, one accent color, adjustable max width

— Bars grow and numbers count up once on scroll into view; reduced-motion visitors see the final state at once

WHAT IT DOES NOT DO

It does not run benchmarks, load a chart library, or talk to a backend. The numbers are yours — measure them, type them, and say where they came from. Fictional placeholder names ship as defaults, so nothing on your page names a competitor until you do.

BUILT FOR

Developer tools, APIs, AI products, and any SaaS page with real numbers to show against the alternatives.

Zero external libraries, zero layout shift: bar widths are final from the first paint and only the fill animates, value cells reserve their width, and every row is labeled for screen readers ("Ours: 42 ms, 4.3× faster than Alternative A").

Everything is configured from the properties panel. No CMS, no code.

5a:[["$","$L5d",null,{"post":{"id":"01a0aeaf-f71f-76bf-8ce0-b4dd60fe10bd","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3c3a050e-de48-4606-9543-56ae1f8cec24","name":"Isaac Yi","slug":"yi-isaac","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3c3a050e-de48-4606-9543-56ae1f8cec24/4lbl4j4n","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Ot6pcRhV5SxBDqRggdGB","resolved":true,"title":"Benchmark Bars","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"SVG Chart draws your data. Benchmark Bars makes your case — the \"N× faster\" section dev-tool and AI landing pages hand-code, as one component that measures nothing and sends nothing."}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT IT IS"}]},{"type":"paragraph","content":[{"type":"text","text":"For each metric you type the rows — your product and two to five alternatives, one per line as Name | 42. The section draws horizontal bars, highlights your row, and works out the ratio against the strongest competitor: 4.3× faster, 4.1× smaller, 2.2× more throughput. Lower- and higher-is-better metrics sit side by side, each with its own hint."}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT YOU GET"}]},{"type":"paragraph","content":[{"type":"text","text":"— Horizontal bars per metric, your row in the accent color, the others in a quiet gray"}]},{"type":"paragraph","content":[{"type":"text","text":"— A ratio badge computed from your numbers, with your own word: faster, smaller, cheaper. It hides when your row is behind or the gap is under 1.1×"}]},{"type":"paragraph","content":[{"type":"text","text":"— Units before or after the value ($0.12, 42 ms, 94.2%), thousands separators kept exactly as you typed them"}]},{"type":"paragraph","content":[{"type":"text","text":"— A footnote per metric plus a source line and link for the section — a benchmark without its setup is just a claim"}]},{"type":"paragraph","content":[{"type":"text","text":"— List or two-column layout, light and dark themes, one accent color, adjustable max width"}]},{"type":"paragraph","content":[{"type":"text","text":"— Bars grow and numbers count up once on scroll into view; reduced-motion visitors see the final state at once"}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT IT DOES NOT DO"}]},{"type":"paragraph","content":[{"type":"text","text":"It does not run benchmarks, load a chart library, or talk to a backend. The numbers are yours — measure them, type them, and say where they came from. Fictional placeholder names ship as defaults, so nothing on your page names a competitor until you do."}]},{"type":"paragraph","content":[{"type":"text","text":"BUILT FOR"}]},{"type":"paragraph","content":[{"type":"text","text":"Developer tools, APIs, AI products, and any SaaS page with real numbers to show against the alternatives."}]},{"type":"paragraph","content":[{"type":"text","text":"Zero external libraries, zero layout shift: bar widths are final from the first paint and only the fill animates, value cells reserve their width, and every row is labeled for screen readers (\"Ours: 42 ms, 4.3× faster than Alternative A\")."}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is configured from the properties panel. No CMS, no code."}]}]},"introduction":"Your product vs theirs, in bars.","slug":"benchmark-bars","author":{"framerUserId":"3c3a050e-de48-4606-9543-56ae1f8cec24","name":"Isaac Yi","slug":"yi-isaac","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3c3a050e-de48-4606-9543-56ae1f8cec24/4lbl4j4n","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3c3a050e-de48-4606-9543-56ae1f8cec24/01a0aeaf-db83-7492-8410-53fe9c7182cf.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2845,"height":1650}}],"post":null,"createdAt":"2026-09-17T09:26:01.442Z","updatedAt":"2026-09-17T09:26:01.442Z","publishedAt":"2026-09-17T09:26:01.417Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://affable-football-015996.framer.app/","price":"10","paymentUrl":"https://isaaccomponents.lemonsqueezy.com/checkout/buy/57869e21-c336-412b-8a3a-5bcb1b02cec7","workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"NRCv4JJXorNYUlQRtAuG","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-09-17T09:26:02.783Z","updatedAt":"2026-09-17T09:26:02.783Z","reported":false}}],"$L5f"]

Suggested for you