Add immediate opt-out so FadeIn and AnimatedNumber can run on mount

Fixes #1. Dashboards and wall displays never scroll, so whileInView left FadeIn at opacity 0 and AnimatedNumber stuck at 0. Default is unchanged.
2026-08-20 16:59:19 -05:00
parent 2d746c0d33
commit 1db797b4db
3 changed files with 17 additions and 5 deletions
@@ -24,6 +24,8 @@ export interface StatCardProps {
  intent?: StatIntent;
  icon?: React.ReactNode;
  className?: string;
+  /** Count up on mount. Pass through to AnimatedNumber. */
+  immediate?: boolean;
 }

 /** Dashboard metric tile. Pass `animate` for a count-up, or `value` for static. */
@@ -36,6 +38,7 @@ export function StatCard({
  intent = "default",
  icon,
  className,
+  immediate,
 }: StatCardProps) {
  return (
    <div className={cn("rounded-lg border border-border bg-surface p-4 shadow-sm", className)}>
@@ -44,7 +47,7 @@ export function StatCard({
        {icon && <span className="text-muted [&_svg]:size-4">{icon}</span>}
      </div>
      <p className={cn("mt-1 font-display text-2xl font-bold", INTENT[intent])}>
-        {animate != null ? <AnimatedNumber value={animate} format={format} /> : value}
+        {animate != null ? <AnimatedNumber value={animate} format={format} immediate={immediate} /> : value}
      </p>
      {sub && <p className="mt-0.5 text-xs text-muted">{sub}</p>}
    </div>