CrazyGLDigit Up
A large number that counts from a start value up to an end value with configurable easing, decimals, prefix and suffix — the classic stats / numbers section, but as a full hero.
Usage
import DigitUp from '@crazygl/hero-digit-up';
export default function Hero() {
return (
<DigitUp
startValue={0}
endValue={42000}
duration={2.5}
suffix="+"
label="Active customers worldwide"
/>
);
}Customise
- Number —
startValue,endValue,decimals,prefix,suffix(thousand separators added automatically). - Animation —
duration,delay,easing(linear / ease-out / ease-in-out),loopInterval(replay period; 0 = one-shot). - Content —
labelcaption below the number (empty hides it). - Typography —
textColor,fontSize,letterSpacing,headingFontFamily,headingFontWeight. - Backdrop —
bgColor,accentColor/accentStrength(radial bloom),transparentBackground.
Best for
- Brand homepage stats reveals and "by the numbers" blocks.
- SaaS landing-page key metrics and growth dashboards.
- Conference / investor-relations splash numbers.
One command, zero config.
npm install @crazygl/hero-digit-upImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import DigitUp from '@crazygl/hero-digit-up';
export default function Landing() {
return (
<DigitUp />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import DigitUp from '@crazygl/hero-digit-up';
export default function Page() {
return (
<section>
<DigitUp
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
