Gooey Counter

Overview

Gooey Counter adds motion to a component that already has a job: numbers move with a liquid feel.

Use Gooey Counter when a small metric row needs a liquid, expressive number treatment. The motion should make proof feel branded while keeping the final value easy to read.

The production risk is unreadable proof. The number has to settle quickly, remain available as text, and avoid looping once the metric has been understood.

Install

Usage

Component Code

Example Production Use Case

A launch page can use Gooey Counter for one or two headline metrics when the brand can carry a liquid, expressive number treatment. The counter adds texture to proof without making the figure hard to read.

Best Used For

• Metric sections where a small number of proof points can carry an expressive number treatment.
• Launch pages where the motion adds brand texture without making the figure hard to read.
• Metric bands where brand motion can make proof feel owned without reducing legibility.

Not For

Not for financial, compliance, analytics, or dashboard numbers where exact reading speed matters more than expressive motion.

Performance Budget

Limit the number of animated counters, avoid expensive filters over large text, and stop the animation after the value has resolved.

Accessibility and Mobile

Expose the final number once in readable text. On mobile and reduced motion, show the settled metric without gooey transitions.

Common Mistakes

• Animating every statistic on the page.
• Making the number hard to read while it matters.
• Looping proof metrics after users already understood them.