Stats & Numbers
Animated Stat Numbers
Two-column stats section — copy and CTAs beside four stat cards that count up once when they scroll into view. Vanilla JS, no animation library.
Animated Stat Numbers
Live preview of the Animated Stat Numbers component
By The Numbers
Fifteen years, 120+ projects, $12M+ in managed ad spend.
Web design and marketing, all in one place. Honest and fair pricing structures. Manage your brand and marketing from a single point of contact, with a cohesive strategy between your website and your marketing, from the build through to ongoing Google Ads management, Meta campaigns and SEO on the Gold Coast.
- 0 +
- Years Experience
- 0 +
- Projects Delivered
- 0 M+
- Ad Spend Managed
- 0 +
- Technologies
Professional web design and development across every major platform and framework.
Websites, apps, marketing campaigns, and brand identities shipped for clients across Australia.
Dollars of marketing spend managed across Google, Meta, and programmatic display networks.
From React to Shopify, Python to After Effects -- we pick the right stack for every project.
The code ships with Velocity.
Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.
Get Velocity X — from $1,250 See all packages →Using the Animated Stat Numbers component
The stat block counts up once when it scrolls into view and then stops, rather than looping or re-firing on every scroll. It runs on a few lines of vanilla JavaScript — no animation library — and re-arms itself after a client-side navigation, so the counters still play for someone arriving from another page.
More Velocity components
Browse all →Sticky CTA Bar
Mobile/tablet bottom CTA bar that slides in past the hero — keeps the primary conversion one thumb-tap away. Dismissible, safe-area aware, fires cta_clicked.
Social-Proof Toast
Bottom-left toast that rotates short, credible social-proof lines on an interval, then stops. Pauses on hover, dismiss-for-session, aria-live, dark-mode + safe-area aware. Fires social_proof_shown.
Readability Kit
Long-form scannability primitives — Callout (4 variants), Key Takeaways TL;DR box, large PullQuote, and a reading-time pill. Branded, accessible, dark-mode, zero-motion.
Draft my Velocity
A short guided form that creates a branded starting direction for a more useful project conversation. It is an early concept, not a finished template site.
Shader Backgrounds (drop-in)
Productized Shader-Lab backgrounds: <ShaderBackground shader="…" preset="hero|section|card|subtle"> drops any of the 88 shaders behind real content with a theme-aware legibility scrim. GL context self-manages (near-screen create / off-screen destroy), reduced-motion + WebGL-fallback safe.
Maze Growth (SVG)
A fast "growth" that draws itself through a geometric truchet maze — pure SVG with a stroke-dashoffset reveal (pathLength=1), so you can swap the maze for your own SVG paths and it grows the same way. Rows staggered so it spreads in lots.