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
@@ -9,19 +9,24 @@ export function FadeIn({
  delay = 0,
  y = 8,
  className,
+  immediate = false,
 }: {
  children: React.ReactNode;
  delay?: number;
  y?: number;
  className?: string;
+  /** Animate on mount instead of waiting to scroll into view. Dashboards. */
+  immediate?: boolean;
 }) {
  const reduce = useReducedMotion();
+  const visible = { opacity: 1, y: 0 };
  return (
    <motion.div
      className={className}
      initial={reduce ? false : { opacity: 0, y }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true, margin: "-10% 0px" }}
+      {...(immediate
+        ? { animate: visible }
+        : { whileInView: visible, viewport: { once: true, margin: "-10% 0px" as const } })}
      transition={reduce ? { duration: 0 } : { duration: 0.4, ease: easeOut, delay }}
    >
      {children}