Generate animated number counters that count up when scrolled into view. Perfect for statistics, achievements, or metrics sections.
Generates animated scroll-triggered number counters for WordPress with Greenshift blocks.
/plugin marketplace add vcode-sh/vibe-tools/plugin install greenshift-blocks@vibe-toolsGenerate animated number counters that count up when scrolled into view. Perfect for statistics, achievements, or metrics sections.
greenshift-blocks skill documentation, specifically docs/08-variations.md for counter structure<!-- wp:greenshift-blocks/element {"id":"gsbp-XXXXXXX","textContent":"0","localId":"gsbp-XXXXXXX","styleAttributes":{...},"isVariation":"counter","endNumber":100,"durationNumber":2,"offsetNumber":50,"stepNumber":1} -->
<div class="gsbp-XXXXXXX" data-gs-counter="{"end":100,"duration":2,"offset":50,"step":1}">0</div>
<!-- /wp:greenshift-blocks/element -->
{
"isVariation": "counter",
"textContent": "0",
"endNumber": 100,
"durationNumber": 2,
"offsetNumber": 50,
"stepNumber": 1,
"styleAttributes": {
"fontSize": ["50px"],
"lineHeight": ["50px"],
"minHeight": ["50px"],
"minWidth": ["50px"],
"display": ["inline-block"],
"position": ["relative"],
"fontWeight": ["bold"]
}
}
| Parameter | Type | Description | Default |
|---|---|---|---|
endNumber | Number | Target number to count to | Required |
durationNumber | Number | Animation duration in seconds | 2 |
offsetNumber | Number | Scroll offset trigger (%) | 50 |
stepNumber | Number | Increment step size | 1 |
textContent | String | Starting display value | "0" |
The counter uses a JSON data attribute:
data-gs-counter="{"end":100,"duration":2,"offset":50,"step":1}"
Decoded JSON:
{
"end": 100,
"duration": 2,
"offset": 50,
"step": 1
}
For numbers like "500+" or "99%":
<!-- Counter wrapper -->
<!-- wp:greenshift-blocks/element {"type":"inner","styleAttributes":{"display":["inline-flex"],"alignItems":["baseline"]}} -->
<div>
<!-- Number -->
<!-- wp:greenshift-blocks/element {"isVariation":"counter","endNumber":500,...} -->
<div data-gs-counter="...">0</div>
<!-- /wp:greenshift-blocks/element -->
<!-- Suffix -->
<!-- wp:greenshift-blocks/element {"textContent":"+","tag":"span",...} -->
<span>+</span>
<!-- /wp:greenshift-blocks/element -->
</div>
<!-- /wp:greenshift-blocks/element -->
Full section with multiple counters:
Section (alignfull)
└── Content Area
└── Counter Grid (flexbox, 4 columns)
├── Counter Item 1
│ ├── Icon (optional)
│ ├── Number (counter)
│ └── Label
├── Counter Item 2
│ └── ...
└── ...
{
"styleAttributes": {
"fontSize": ["var(--wp--preset--font-size--giant, 4rem)"],
"fontWeight": ["700"],
"color": ["var(--wp--preset--color--primary, #000)"],
"lineHeight": ["1"]
}
}
{
"styleAttributes": {
"fontSize": ["var(--wp--preset--font-size--s, 1rem)"],
"marginTop": ["var(--wp--preset--spacing--40, 1rem)"],
"opacity": ["0.7"],
"textTransform": ["uppercase"],
"letterSpacing": ["0.1em"]
}
}
{
"styleAttributes": {
"display": ["flex"],
"flexWrap": ["wrap"],
"justifyContent": ["center"],
"columnGap": ["var(--wp--preset--spacing--70, 3rem)"],
"rowGap": ["var(--wp--preset--spacing--60, 2rem)"],
"textAlign": ["center"]
}
}
| Type | Example | endNumber | Suffix |
|---|---|---|---|
| Percentage | 99% | 99 | % |
| Count | 500+ | 500 | + |
| Thousands | 10k | 10 | k |
| Years | 25 years | 25 | years |
| Currency | $1M | 1 | M |
counter-stats.html)IMPORTANT: Always save output to a .html file. Never just display the code in chat.