Number Ticker

Analytical easeOutExpo numerical counter with direct DOM textContent manipulation and zero external animation libraries.

CLI Installation

React

$pnpm dlxexhumaaddnumber-ticker--flavor=react

// 01Workbench

Interactive Specification & Studio

primitives

Preset:

Viewport

Fluid 100%

ANALYTICAL EASING (rAF)

Closed-form easeOutExpo with direct DOM manipulation and zero VDOM re-rendering.

120 FPS DIRECT DOM

1.5s • 1-2^(-10t)

Parameters

6 Props

value

initialValue

duration

decimalPlaces

prefix

suffix

// 02Usage

Quick Start & Consumer Example

Copy-paste ready implementation for React (.tsx). Automatically updates when you modify parameters in the Workbench above.

NumberTickerDemo.tsx

React (.tsx)

import * as React from 'react';
import { NumberTicker } from './NumberTicker';

export function NumberTickerDemo() {
  return (
    <div className="flex flex-col items-center justify-center p-8 bg-card rounded-2xl border border-border/80 shadow-lg max-w-sm mx-auto">
      <span className="text-3xs font-mono font-bold text-primary uppercase tracking-wider mb-2">
        HARDWARE TELEMETRY
      </span>
      <div className="font-mono text-5xl font-black tracking-tight text-foreground">
        <NumberTicker
          value={1250}
          initialValue={0}
          duration={1.5}
          decimalPlaces={0}
          prefix=""
          suffix=""
        />
      </div>
      <p className="text-xs text-muted-foreground mt-3 font-mono">
        Closed-form analytical easeOutExpo with zero React VDOM re-render overhead.
      </p>
    </div>
  );
}

// 03API Contract

Props & Configuration

Exhaustive parameter contract for Number Ticker. Validated in the live Studio workbench above and statically checked across all 13 ecosystem templates.

Prop	Type	Default	Description
value	number	1250	The target numerical value to count towards.
initialValue	number	0	Starting number at inception.
duration	number	1.5	Time in seconds to reach the target number.
decimalPlaces	number	0	Decimal precision to format.
prefix	string	—	Leading currency or symbol (e.g. "$", "+", "€").
suffix	string	—	Trailing unit identifier (e.g. "%", "ms", "k", "M").

value

number

The target numerical value to count towards.

Default:1250

initialValue

number

Starting number at inception.

Default:0

duration

number

Time in seconds to reach the target number.

Default:1.5

decimalPlaces

number

Decimal precision to format.

Default:0

prefix

string

Leading currency or symbol (e.g. "$", "+", "€").

Default:—

suffix

string

Trailing unit identifier (e.g. "%", "ms", "k", "M").

Default:—

// 04Source Code

Component Source

Component source definition for React (.tsx). Toggle between the clean wrapper and the standalone ejected engine micro-kernel.

NumberTicker.tsx

import * as React from 'react';
import {
  NumberTicker as CoreNumberTicker,
  type NumberTickerProps as CoreNumberTickerProps,
} from '@exhuma/core';
import { clsx } from 'clsx';

export interface NumberTickerProps extends CoreNumberTickerProps {
  className?: string;
}

export const NumberTicker = React.forwardRef<HTMLSpanElement, NumberTickerProps>(
  (
    {
      value = 1250,
      initialValue = 0,
      duration = 1.5,
      decimalPlaces = 0,
      prefix = '',
      suffix = '',
      className,
      ...props
    },
    ref
  ) => {
    return (
      <CoreNumberTicker
        ref={ref}
        value={value}
        initialValue={initialValue}
        duration={duration}
        decimalPlaces={decimalPlaces}
        prefix={prefix}
        suffix={suffix}
        className={clsx('inline-block tabular-nums font-bold tracking-tight text-foreground font-mono', className)}
        {...props}
      />
    );
  }
);
NumberTicker.displayName = 'NumberTicker';

export default NumberTicker;

// 05Architecture

Lifecycle Safety & Performance

Engineered for high-frequency user interactions with zero memory leaks.

Teardown

Deterministic Cleanup

All pointer event listeners, scroll handlers, and resize observers are cleanly destroyed on component unmount, preventing lingering background processes.

Compositor

GPU Compositor Acceleration

Transform and opacity modifications run directly on the GPU compositor thread using will-change: transform without triggering browser layout recalculations.

// 06a11y

Accessibility Considerations

Fully compliant with WCAG guidelines and respects user motion preferences.

Motion

prefers-reduced-motion Support

When a user has prefers-reduced-motion: reduce enabled in their operating system, Exhuma components automatically disable 3D gyroscope tilt and spring animations, rendering static accessible content.

import * as React from 'react'; import { NumberTicker } from './NumberTicker'; export function NumberTickerDemo() { return ( <div className="flex flex-col items-center justify-center p-8 bg-card rounded-2xl border border-border/80 shadow-lg max-w-sm mx-auto"> <span className="text-3xs font-mono font-bold text-primary uppercase tracking-wider mb-2"> HARDWARE TELEMETRY </span> <div className="font-mono text-5xl font-black tracking-tight text-foreground"> <NumberTicker value={1250} initialValue={0} duration={1.5} decimalPlaces={0} prefix="" suffix="" /> </div> <p className="text-xs text-muted-foreground mt-3 font-mono"> Closed-form analytical easeOutExpo with zero React VDOM re-render overhead. </p> </div> ); }

Prop

Type

Default

Description

value

number

1250

The target numerical value to count towards.

initialValue

number

Starting number at inception.

duration

number

1.5

Time in seconds to reach the target number.

decimalPlaces

number

Decimal precision to format.

prefix

string

—

Leading currency or symbol (e.g. "$", "+", "€").

suffix

string

—

Trailing unit identifier (e.g. "%", "ms", "k", "M").

import * as React from 'react'; import { NumberTicker as CoreNumberTicker, type NumberTickerProps as CoreNumberTickerProps, } from '@exhuma/core'; import { clsx } from 'clsx'; export interface NumberTickerProps extends CoreNumberTickerProps { className?: string; } export const NumberTicker = React.forwardRef<HTMLSpanElement, NumberTickerProps>( ( { value = 1250, initialValue = 0, duration = 1.5, decimalPlaces = 0, prefix = '', suffix = '', className, ...props }, ref ) => { return ( <CoreNumberTicker ref={ref} value={value} initialValue={initialValue} duration={duration} decimalPlaces={decimalPlaces} prefix={prefix} suffix={suffix} className={clsx('inline-block tabular-nums font-bold tracking-tight text-foreground font-mono', className)} {...props} /> ); } ); NumberTicker.displayName = 'NumberTicker'; export default NumberTicker;