Before After Counter

Counts the change, not the number.

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.

Counts the change, not the number.