5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/2obmdiyh47oqt.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:T639,

Most counter components animate one number. This one animates the change.

Each card shows where a number started, where it ended, and the gain between

them — all three counting up together when the section scrolls into view.

That is the shape of a proof block: not "1,480 students" but "1,280 → 1,480."

WHY THE GAIN CHIP STAYS GREEN

A gain is not always a bigger number. Weight, cost, churn, load time, support

tickets — in half the categories that matter, going down is the win. The chip

flips its arrow and keeps the green either way, so the same section works for

a tutor showing score lifts and an agency showing bounce rate cut in half.

WHAT YOU GET

— Two numbers per card. Type the before and the after; the gain is calculated

and animated for you.

— Counts up once, when the section scrolls into view. Static in the Framer

canvas, so your layout never jitters while you design.

— Any number of cards in a grid that reflows on its own.

— Per card: label, prefix, suffix, timeframe, and a note line — for units,

dates, or the source of the number.

— Light and dark themes, an accent color, and a section background that is

transparent by default so it drops onto your existing page.

— Section eyebrow, heading, subheading, and a footnote for disclaimers.

— Zero external libraries, zero layout shift. Pure React and CSS.

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

library, no CMS.

59:[["$","$L5c",null,{"post":{"id":"01a036af-f18e-705b-a0ab-5cbf4c3309b6","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":"nMZdDgecbaoY2Aqkn88B","resolved":true,"title":"Before After Counter","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Most counter components animate one number. This one animates the change."}]},{"type":"paragraph","content":[{"type":"text","text":"Each card shows where a number started, where it ended, and the gain between"}]},{"type":"paragraph","content":[{"type":"text","text":"them — all three counting up together when the section scrolls into view."}]},{"type":"paragraph","content":[{"type":"text","text":"That is the shape of a proof block: not \"1,480 students\" but \"1,280 → 1,480.\""}]},{"type":"paragraph","content":[{"type":"text","text":"WHY THE GAIN CHIP STAYS GREEN"}]},{"type":"paragraph","content":[{"type":"text","text":"A gain is not always a bigger number. Weight, cost, churn, load time, support"}]},{"type":"paragraph","content":[{"type":"text","text":"tickets — in half the categories that matter, going down is the win. The chip"}]},{"type":"paragraph","content":[{"type":"text","text":"flips its arrow and keeps the green either way, so the same section works for"}]},{"type":"paragraph","content":[{"type":"text","text":"a tutor showing score lifts and an agency showing bounce rate cut in half."}]},{"type":"paragraph","content":[{"type":"text","text":"WHAT YOU GET"}]},{"type":"paragraph","content":[{"type":"text","text":"— Two numbers per card. Type the before and the after; the gain is calculated"}]},{"type":"paragraph","content":[{"type":"text","text":"and animated for you."}]},{"type":"paragraph","content":[{"type":"text","text":"— Counts up once, when the section scrolls into view. Static in the Framer"}]},{"type":"paragraph","content":[{"type":"text","text":"canvas, so your layout never jitters while you design."}]},{"type":"paragraph","content":[{"type":"text","text":"— Any number of cards in a grid that reflows on its own."}]},{"type":"paragraph","content":[{"type":"text","text":"— Per card: label, prefix, suffix, timeframe, and a note line — for units,"}]},{"type":"paragraph","content":[{"type":"text","text":"dates, or the source of the number."}]},{"type":"paragraph","content":[{"type":"text","text":"— Light and dark themes, an accent color, and a section background that is"}]},{"type":"paragraph","content":[{"type":"text","text":"transparent by default so it drops onto your existing page."}]},{"type":"paragraph","content":[{"type":"text","text":"— Section eyebrow, heading, subheading, and a footnote for disclaimers."}]},{"type":"paragraph","content":[{"type":"text","text":"— Zero external libraries, zero layout shift. Pure React and CSS."}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is configured from the properties panel. No code, no chart"}]},{"type":"paragraph","content":[{"type":"text","text":"library, no CMS."}]}]},"introduction":"Counts the change, not the number.","slug":"before-after-counter","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/01a036af-db15-7091-a0a4-33773e02af10.png","metadata":{"tint":"hsl(60 26% 47%)","aspectRatio":1.754247572815534}}],"post":null,"createdAt":"2026-08-25T02:11:34.834Z","updatedAt":"2026-08-25T02:11:34.834Z","publishedAt":"2026-08-25T02:11:34.831Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://expanded-accessibility-040239.framer.app/","price":"10","paymentUrl":"https://isaaccomponents.lemonsqueezy.com/checkout/buy/0e8778be-1398-4d5e-be6a-4fbf387eb63e","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"txGSYscwtPez9H1r1BpZ"}}],"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-08-25T02:11:35.438Z","updatedAt":"2026-08-25T02:11:35.438Z","reported":false}}],"$L5e"]

Suggested for you