Number Ticker

RzNumberTicker renders a correct SSR-first numeric value and progressively enhances it with Alpine-based count animation. It is a single component (not a primitive family), and client behavior is handled by x-data="rzNumberTicker" instead of Blazor interactivity.

Under the Hood

The server always renders the final formatted value first. When JavaScript is available, Alpine reads the data attributes, optionally waits for viewport entry, and animates toward the destination value.

Basic Usage

Default count-up behavior to an integer target.

Source

<RzNumberTicker Value="100" class="text-6xl font-semibold tracking-tight" />

Decimal Formatting

Control fraction digits, culture, and grouping.

Source

<RzNumberTicker Value="12345.67m" DecimalPlaces="2" Culture="en-US" class="text-4xl font-medium" />
<RzNumberTicker Value="12345.67m" DecimalPlaces="2" Culture="de-DE" UseGrouping="false" class="text-4xl font-medium" />

Countdown with Delay

In down mode the ticker starts at Value and animates to StartValue. This matches the original MagicUI behavior.

Source

<RzNumberTicker Value="100" StartValue="80" Direction="NumberTickerDirection.Down" Delay="0.4" class="text-5xl font-semibold" />

Dashboard / HTMX Partial Integration

This card-style snippet is representative of markup you could return from an HTMX endpoint.

Source

<div class="max-w-md rounded-lg border border-border bg-card p-6 shadow-sm">
    <p class="text-sm text-muted-foreground">Monthly recurring revenue</p>
    <RzNumberTicker Value="48210" DecimalPlaces="0" class="mt-2 text-4xl font-bold" />
</div>

Docs note: this preview does not execute a live HTMX endpoint, it only demonstrates component-safe SSR markup.

Server-First / No Animation

Use static mode for precision-sensitive dashboards or intentionally non-animated metrics.

Source

<RzNumberTicker Value="987654321.1234m" DecimalPlaces="4" DisableAnimation="true" class="text-4xl font-semibold" />

Parameters

Property	Description	Type	Default
`Value`	Destination numeric value.	`decimal`	Required
`StartValue`	Start value for up mode and destination for down mode.	`decimal`	`0`
`Direction`	Animation direction.	`NumberTickerDirection`	`Up`
`Delay`	Delay in seconds before animation starts.	`double`	`0`
`DecimalPlaces`	Minimum and maximum fraction digits.	`int`	`0`
`Culture`	Culture name for number formatting.	`string?`	Current culture
`UseGrouping`	Enables thousands separators.	`bool`	`true`
`TriggerOnView`	Delays start until viewport entry.	`bool`	`true`
`AnimateOnce`	Runs viewport animation once.	`bool`	`true`
`DisableAnimation`	Keeps server text static.	`bool`	`false`
`AriaLabel`	Optional accessible name.	`string?`	`null`
`ComponentAssetKeys`	Asset keys resolved to URLs for Alpine loader compatibility.	`string[]`	`[]`

Client Behavior

The underlying Alpine data key is rzNumberTicker. There are no public custom methods, no custom browser events, and no required external runtime assets. The component is safe for SSR and partial rendering.