Back to HyperFrames Templates
Liquid Counter
A number that fills with gooey liquid as it counts up, then drains and loops
Description
A stat reveal with physicality: a bright gradient liquid rises inside the digits while the value counts up in sync, and a metaball surface (an SVG goo filter over bobbing blobs) makes the fill line wobble and drip. A soft glow and grain keep it off the flat. A tiny vanilla-JS loop drives the count and fill height together, so they never desync.
Set `TARGET`, `PREFIX`, `SUFFIX` and the timing in the script block, and the palette in `:root`. Great for conversion rates, uptime, growth — any single hero metric in a report or explainer.
How to use it
- Copy the block's HTML from the Source Code tab.
- Paste it into your HyperFrames composition (or any HTML page).
- Edit the text, colours, and timing to match your brand, then render it to video with HyperFrames.
Category
Data
Building with Remotion?
Get the same effects as ready-to-copy Remotion (React) components — 80+ free video templates.