Animated Stat

Animate metrics between two values

npm run add AnimatedStat

Use the AnimatedStat component to visually animate metrics between two values. They are useful for indicating the number of users, views, or other metrics in your application. They can be used for:

• At-a-glance insights: Quickly communicates status, performance, or capacity without reading detailed data.
• Improving data visualization: Makes numeric ranges more intuitive through visual scales.
• Enhancing decision-making: Helps users spot trends, thresholds, or warnings instantly.
• Engaging users: Adds a dynamic, dashboard-like feel to interfaces.

<AnimatedStat
    to={100}
    subText="Users"
/>

To use the component set a to prop for the ending value. You can optionally also set a subText prop to display additional secondary text under the stat. The component is only animated when it becomes visible in the viewport. The animation is based on CSS to keep the component simple and performant.

Custom Values

By default, the number is animated from 0. If you want to change this value, you can also specify a from prop:

<AnimatedStat
    from={-1000}
    to={100}
/>

Duration and Delay

The animation timing can be changed using the duration and delay props:

• duration: Sets the duration of the animation in seconds. Defaults to 4s.
• delay: Sets a delay for the animation start. Defaults to 0s.

<AnimatedStat
    title="Duration set to 10s"
    to={100}
    duration={10}
/>

<AnimatedStat
    title="Delay set to 10s"
    to={100}
    delay={10}
/>

Pre and Postfixes

In case you want to animate formatted values, for example pricing or percentage, you can use the prefix and postfix props (you can also set both at the same time):

<AnimatedStat
    to={200}
    subText="Monthly Sales"
    prefix="$"
/>

<AnimatedStat
    to={99}
    subText="Uptime"
    postfix="%"
/>

Card Styles

As the component is based on the Card component, you can use card-specific props, such as title or secondary:

<AnimatedStat
    to={100}
    subText="Users"
    title="Animated stat with title and secondary card"
    secondary={true}
/>

Color

In case you need the component to match your brand, you can specify the color of the stat through the color prop:

<AnimatedStat
    to={100}
    subText="Colored stat"
    color="var(--w-color-info)" {/* You can use any valid CSS value */}
/>

Configuration with CSS

If you would like to keep component configuration in one place and make them global, you can also set many of the props through the following CSS variables:

html body {
    --w-animated-stat-color: var(--w-color-primary);
    --w-animated-stat-duration: 4s;
    --w-animated-stat-delay: 0s;
    --w-animated-stat-prefix: '';
    --w-animated-stat-postfix: '';
}

API

type AnimatedStatProps = {
    from?: number
    to: number
    duration?: number
    delay?: number
    prefix?: string
    postfix?: string
    subText?: string
    color?: string
} & CardProps