diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38ab581..20d6f0f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,26 @@
 # Changelog
 
+## [6.2.2] - 2026-04-15
+
+### Added
+
+- **Zentrales Motion-System für Dashboard-Sektionen und Einzel-Visualisierungen** — ein gemeinsamer Section-/Element-Lifecycle steuert jetzt Preload, Reveal und sichtbarkeitsgebundene Aufbauanimationen für Karten, Diagramme und Wertbalken konsistent aus einer Quelle
+- **Gezielte Motion-Regressionstests für Dashboard und Diagramme** — neue Frontend-Tests decken Section-Preloading, sichtbarkeitsgebundene Chart-Starts, Histogramm-/Snapshot-Verhalten, responsives Legend-Layout sowie ROI-/Limits-Bar-Aufbau gezielt ab
+
+### Improved
+
+- **Dashboard-Animationen und Ladeverhalten** — Sektionen werden vor dem Eintritt robuster vorbereitet, blenden ruhiger ein und starten Diagramm- sowie Meter-Aufbauten zeitlich harmonischer und deutlich konsistenter als zuvor
+- **Diagramm-Aufbau über das gesamte Dashboard** — Linien-, Flächen-, Balken-, Donut-, Scatter- und Heatmap-Visualisierungen nutzen jetzt abgestimmtere Timings, sichtbarkeitsgebundene Starts und ein ruhigeres Motion-Tuning statt gemischter Einzelpfade
+- **Heatmap-, KPI- und Meter-Reveals** — Heatmaps bauen sich wochenweise auf, KPI-/Insight-Gruppen folgen einem gleichmäßigeren Reveal, und Dashboard-Bars verwenden denselben orchestrierten Startpfad wie die übrigen Visualisierungen
+- **Legendendarstellung in Diagrammen mit vielen Labels** — Chart-Legenden umbrechen jetzt responsiv auf mehrere Zeilen statt horizontal zu scrollen, einschließlich der betreffenden Linien- und Donut-Diagramme
+- **Verifizierbarkeit der Motion- und Chart-Änderungen** — zusätzliche gezielte Tests für Anfragequalität, Verteilungen, Cache-Hit-Rate, Legend-Integrationen und Motion-Zeitverhalten sichern die neue Dashboard-Politur gegen Regressionen ab
+
+### Fixed
+
+- **Vorzeitig fertig geladene oder flackernde Diagrammanimationen** — Chart-Aufbauten laufen nicht mehr verdeckt vor dem sichtbaren Reveal ab, sondern starten erst dann, wenn Section und konkretes Diagramm tatsächlich sichtbar sind
+- **Inkonsistente Bar- und Vergleichsanimationen in Sekundärflächen** — Anfragequalität, Cache-Ersparnis (ROI), Limits & Abonnements sowie weitere Dashboard-Bars verwenden jetzt keine widersprüchlichen lokalen Sonderpfade oder künstlichen Mindestbreiten mehr
+- **Chart-spezifische Darstellungsprobleme in Analyseflächen** — das Verteilungs-Histogramm folgt jetzt dem gemeinsamen Chart-Lifecycle, der Modell-Snapshot der Cache-Hit-Rate ist visuell sauberer gewichtet, und mehrere Legend-/Label-Pfade reagieren auf engem Platz stabiler
+
 ## [6.2.1] - 2026-04-15
 
 ### Added
diff --git a/src/components/cards/MonthMetrics.tsx b/src/components/cards/MonthMetrics.tsx
index 6a1e03a..2ad9ed0 100644
--- a/src/components/cards/MonthMetrics.tsx
+++ b/src/components/cards/MonthMetrics.tsx
@@ -11,9 +11,9 @@ import {
   BrainCircuit,
 } from 'lucide-react'
 import { MetricCard } from './MetricCard'
+import { DashboardMotionItem } from '@/components/dashboard/DashboardMotion'
 import { FormattedValue } from '@/components/ui/formatted-value'
 import { SectionHeader } from '@/components/ui/section-header'
-import { FadeIn } from '@/components/features/animations/FadeIn'
 import { SECTION_HELP } from '@/lib/help-content'
 import { formatCurrency, formatMonthYear, localMonth } from '@/lib/formatters'
 import { getCurrentLocale } from '@/lib/i18n'
@@ -144,8 +144,8 @@ export function MonthMetrics({ daily, metrics }: MonthMetricsProps) {
         description={t('metricCards.month.description')}
         info={SECTION_HELP.currentMonth}
       />
-      <FadeIn delay={0.08}>
-        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4 xl:grid-cols-8">
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4 xl:grid-cols-8">
+        <DashboardMotionItem order={0}>
           <MetricCard
             label={t('metricCards.month.costMonth')}
             value={<FormattedValue value={agg.totalCost} type="currency" />}
@@ -159,12 +159,16 @@ export function MonthMetrics({ daily, metrics }: MonthMetricsProps) {
                 : null
             }
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={1}>
           <MetricCard
             label={t('metricCards.month.tokensMonth')}
             value={<FormattedValue value={agg.totalTokens} type="tokens" />}
             icon={<Coins className="h-4 w-4" />}
             {...(tokensSubtitle ? { subtitle: tokensSubtitle } : {})}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={2}>
           <MetricCard
             label={t('metricCards.month.activeDays')}
             value={`${agg.activeDays} / ${agg.dayOfMonth}`}
@@ -173,18 +177,24 @@ export function MonthMetrics({ daily, metrics }: MonthMetricsProps) {
             })}
             icon={<CalendarDays className="h-4 w-4" />}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={3}>
           <MetricCard
             label={t('metricCards.month.models')}
             value={String(agg.modelCount)}
             icon={<Cpu className="h-4 w-4" />}
             {...(modelsSubtitle ? { subtitle: modelsSubtitle } : {})}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={4}>
           <MetricCard
             label={t('metricCards.month.costPerMillion')}
             value={<FormattedValue value={agg.costPerMillion} type="currency" />}
             icon={<TrendingDown className="h-4 w-4" />}
             {...(costPerMillionSubtitle ? { subtitle: costPerMillionSubtitle } : {})}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={5}>
           <MetricCard
             label={t('metricCards.month.cacheHitRate')}
             value={<FormattedValue value={agg.cacheHitRate} type="percent" />}
@@ -194,6 +204,8 @@ export function MonthMetrics({ daily, metrics }: MonthMetricsProps) {
             })}
             icon={<Database className="h-4 w-4" />}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={6}>
           <MetricCard
             label={t('metricCards.month.requests')}
             value={
@@ -220,14 +232,16 @@ export function MonthMetrics({ daily, metrics }: MonthMetricsProps) {
             }
             icon={<Activity className="h-4 w-4" />}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={7}>
           <MetricCard
             label={t('metricCards.month.thinking')}
             value={<FormattedValue value={agg.thinkingTokens} type="tokens" />}
             icon={<BrainCircuit className="h-4 w-4" />}
             {...(thinkingSubtitle ? { subtitle: thinkingSubtitle } : {})}
           />
-        </div>
-      </FadeIn>
+        </DashboardMotionItem>
+      </div>
     </div>
   )
 }
diff --git a/src/components/cards/PrimaryMetrics.tsx b/src/components/cards/PrimaryMetrics.tsx
index a486f90..07c5c79 100644
--- a/src/components/cards/PrimaryMetrics.tsx
+++ b/src/components/cards/PrimaryMetrics.tsx
@@ -9,6 +9,7 @@ import {
   BrainCircuit,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { DashboardMotionItem } from '@/components/dashboard/DashboardMotion'
 import { MetricCard } from './MetricCard'
 import { FormattedValue } from '@/components/ui/formatted-value'
 import { formatCurrency, formatPercent, formatTokens, periodUnit } from '@/lib/formatters'
@@ -68,130 +69,146 @@ export function PrimaryMetrics({
 
   return (
     <div className="grid grid-cols-2 gap-3 lg:grid-cols-4 xl:grid-cols-8">
-      <MetricCard
-        label={t('metricCards.primary.totalCost')}
-        value={
-          <FormattedValue
-            value={metrics.totalCost}
-            type="currency"
-            label={t('metricCards.primary.totalCost')}
-            insight={t('metricCards.primary.avgPerPeriod', {
-              value: formatCurrency(metrics.avgDailyCost),
-              unit: periodUnit(viewMode),
-            })}
-          />
-        }
-        subtitle={t('metricCards.primary.totalCostSubtitle', {
-          average: formatCurrency(metrics.avgDailyCost),
-          unit: periodUnit(viewMode),
-          costPerRequest: formatCurrency(metrics.avgCostPerRequest),
-        })}
-        icon={<DollarSign className="h-4 w-4" />}
-        trend={metrics.weekOverWeekChange !== null ? { value: metrics.weekOverWeekChange } : null}
-        info={METRIC_HELP.totalCost}
-      />
-      <MetricCard
-        label={t('metricCards.primary.totalTokens')}
-        value={
-          <FormattedValue
-            value={metrics.totalTokens}
-            type="tokens"
-            label={t('metricCards.primary.totalTokens')}
-            insight={t('metricCards.primary.tokensPerRequestAvg', {
-              value: formatTokens(metrics.avgTokensPerRequest),
-            })}
-          />
-        }
-        subtitle={
-          ioRatio
-            ? t('metricCards.primary.totalTokensSubtitleWithRatio', {
-                ratio: ioRatio,
-                tokensPerRequest: formatTokens(metrics.avgTokensPerRequest),
-              })
-            : t('metricCards.primary.totalTokensSubtitle', {
-                tokensPerRequest: formatTokens(metrics.avgTokensPerRequest),
-              })
-        }
-        icon={<Coins className="h-4 w-4" />}
-        info={METRIC_HELP.totalTokens}
-      />
-      <MetricCard
-        label={t('metricCards.primary.activeDays')}
-        value={String(metrics.activeDays)}
-        subtitle={
-          coverageRate !== null
-            ? t('metricCards.primary.coverageOfDays', {
-                coverage: formatPercent(coverageRate, 0),
-                days: totalCalendarDays,
-              })
-            : t('metricCards.primary.providersActive', { count: metrics.providerCount })
-        }
-        icon={<Calendar className="h-4 w-4" />}
-        info={METRIC_HELP.activeDays}
-      />
-      <MetricCard
-        label={t('metricCards.primary.topModel')}
-        value={metrics.topModel?.name ?? '–'}
-        icon={<Cpu className="h-4 w-4" />}
-        info={METRIC_HELP.topModel}
-        {...(topModelSubtitle ? { subtitle: topModelSubtitle } : {})}
-      />
-      <MetricCard
-        label={t('metricCards.primary.cacheHitRate')}
-        value={<FormattedValue value={metrics.cacheHitRate} type="percent" />}
-        icon={<Database className="h-4 w-4" />}
-        info={METRIC_HELP.cacheHitRate}
-        {...(cacheHitRateSubtitle ? { subtitle: cacheHitRateSubtitle } : {})}
-      />
-      <MetricCard
-        label={t('metricCards.primary.costPerMillion')}
-        value={<FormattedValue value={metrics.costPerMillion} type="currency" />}
-        icon={<TrendingDown className="h-4 w-4" />}
-        info={METRIC_HELP.costPerMillion}
-      />
-      <MetricCard
-        label={t('metricCards.primary.requests')}
-        value={
-          metrics.hasRequestData ? (
+      <DashboardMotionItem order={0}>
+        <MetricCard
+          label={t('metricCards.primary.totalCost')}
+          value={
             <FormattedValue
-              value={metrics.totalRequests}
-              type="number"
-              label={t('metricCards.primary.requests')}
-              insight={t('insights.requestEconomy.summary', {
-                cost: formatCurrency(metrics.avgCostPerRequest),
-                tokens: formatTokens(metrics.avgTokensPerRequest),
-                leader: '',
-              }).trim()}
-            />
-          ) : (
-            t('common.notAvailable')
-          )
-        }
-        subtitle={
-          metrics.hasRequestData
-            ? t('metricCards.primary.requestsSubtitle', {
-                requests: metrics.avgRequestsPerDay.toFixed(1),
+              value={metrics.totalCost}
+              type="currency"
+              label={t('metricCards.primary.totalCost')}
+              insight={t('metricCards.primary.avgPerPeriod', {
+                value: formatCurrency(metrics.avgDailyCost),
                 unit: periodUnit(viewMode),
-                cost: formatCurrency(metrics.avgCostPerRequest),
-                volatility: Math.round(metrics.requestVolatility),
-              })
-            : t('metricCards.primary.requestCountersMissing')
-        }
-        icon={<Activity className="h-4 w-4" />}
-      />
-      <MetricCard
-        label={t('metricCards.primary.thinking')}
-        value={
-          <FormattedValue
-            value={metrics.totalThinking}
-            type="tokens"
-            label={t('metricCards.primary.thinking')}
-            {...(thinkingInsight ? { insight: thinkingInsight } : {})}
-          />
-        }
-        icon={<BrainCircuit className="h-4 w-4" />}
-        {...(thinkingSubtitle ? { subtitle: thinkingSubtitle } : {})}
-      />
+              })}
+            />
+          }
+          subtitle={t('metricCards.primary.totalCostSubtitle', {
+            average: formatCurrency(metrics.avgDailyCost),
+            unit: periodUnit(viewMode),
+            costPerRequest: formatCurrency(metrics.avgCostPerRequest),
+          })}
+          icon={<DollarSign className="h-4 w-4" />}
+          trend={metrics.weekOverWeekChange !== null ? { value: metrics.weekOverWeekChange } : null}
+          info={METRIC_HELP.totalCost}
+        />
+      </DashboardMotionItem>
+      <DashboardMotionItem order={1}>
+        <MetricCard
+          label={t('metricCards.primary.totalTokens')}
+          value={
+            <FormattedValue
+              value={metrics.totalTokens}
+              type="tokens"
+              label={t('metricCards.primary.totalTokens')}
+              insight={t('metricCards.primary.tokensPerRequestAvg', {
+                value: formatTokens(metrics.avgTokensPerRequest),
+              })}
+            />
+          }
+          subtitle={
+            ioRatio
+              ? t('metricCards.primary.totalTokensSubtitleWithRatio', {
+                  ratio: ioRatio,
+                  tokensPerRequest: formatTokens(metrics.avgTokensPerRequest),
+                })
+              : t('metricCards.primary.totalTokensSubtitle', {
+                  tokensPerRequest: formatTokens(metrics.avgTokensPerRequest),
+                })
+          }
+          icon={<Coins className="h-4 w-4" />}
+          info={METRIC_HELP.totalTokens}
+        />
+      </DashboardMotionItem>
+      <DashboardMotionItem order={2}>
+        <MetricCard
+          label={t('metricCards.primary.activeDays')}
+          value={String(metrics.activeDays)}
+          subtitle={
+            coverageRate !== null
+              ? t('metricCards.primary.coverageOfDays', {
+                  coverage: formatPercent(coverageRate, 0),
+                  days: totalCalendarDays,
+                })
+              : t('metricCards.primary.providersActive', { count: metrics.providerCount })
+          }
+          icon={<Calendar className="h-4 w-4" />}
+          info={METRIC_HELP.activeDays}
+        />
+      </DashboardMotionItem>
+      <DashboardMotionItem order={3}>
+        <MetricCard
+          label={t('metricCards.primary.topModel')}
+          value={metrics.topModel?.name ?? '–'}
+          icon={<Cpu className="h-4 w-4" />}
+          info={METRIC_HELP.topModel}
+          {...(topModelSubtitle ? { subtitle: topModelSubtitle } : {})}
+        />
+      </DashboardMotionItem>
+      <DashboardMotionItem order={4}>
+        <MetricCard
+          label={t('metricCards.primary.cacheHitRate')}
+          value={<FormattedValue value={metrics.cacheHitRate} type="percent" />}
+          icon={<Database className="h-4 w-4" />}
+          info={METRIC_HELP.cacheHitRate}
+          {...(cacheHitRateSubtitle ? { subtitle: cacheHitRateSubtitle } : {})}
+        />
+      </DashboardMotionItem>
+      <DashboardMotionItem order={5}>
+        <MetricCard
+          label={t('metricCards.primary.costPerMillion')}
+          value={<FormattedValue value={metrics.costPerMillion} type="currency" />}
+          icon={<TrendingDown className="h-4 w-4" />}
+          info={METRIC_HELP.costPerMillion}
+        />
+      </DashboardMotionItem>
+      <DashboardMotionItem order={6}>
+        <MetricCard
+          label={t('metricCards.primary.requests')}
+          value={
+            metrics.hasRequestData ? (
+              <FormattedValue
+                value={metrics.totalRequests}
+                type="number"
+                label={t('metricCards.primary.requests')}
+                insight={t('insights.requestEconomy.summary', {
+                  cost: formatCurrency(metrics.avgCostPerRequest),
+                  tokens: formatTokens(metrics.avgTokensPerRequest),
+                  leader: '',
+                }).trim()}
+              />
+            ) : (
+              t('common.notAvailable')
+            )
+          }
+          subtitle={
+            metrics.hasRequestData
+              ? t('metricCards.primary.requestsSubtitle', {
+                  requests: metrics.avgRequestsPerDay.toFixed(1),
+                  unit: periodUnit(viewMode),
+                  cost: formatCurrency(metrics.avgCostPerRequest),
+                  volatility: Math.round(metrics.requestVolatility),
+                })
+              : t('metricCards.primary.requestCountersMissing')
+          }
+          icon={<Activity className="h-4 w-4" />}
+        />
+      </DashboardMotionItem>
+      <DashboardMotionItem order={7}>
+        <MetricCard
+          label={t('metricCards.primary.thinking')}
+          value={
+            <FormattedValue
+              value={metrics.totalThinking}
+              type="tokens"
+              label={t('metricCards.primary.thinking')}
+              {...(thinkingInsight ? { insight: thinkingInsight } : {})}
+            />
+          }
+          icon={<BrainCircuit className="h-4 w-4" />}
+          {...(thinkingSubtitle ? { subtitle: thinkingSubtitle } : {})}
+        />
+      </DashboardMotionItem>
     </div>
   )
 }
diff --git a/src/components/cards/SecondaryMetrics.tsx b/src/components/cards/SecondaryMetrics.tsx
index 61eb4df..3fe48f3 100644
--- a/src/components/cards/SecondaryMetrics.tsx
+++ b/src/components/cards/SecondaryMetrics.tsx
@@ -1,5 +1,6 @@
 import { TrendingUp, ChartBar, Sigma, Building2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { DashboardMotionItem } from '@/components/dashboard/DashboardMotion'
 import { MetricCard } from './MetricCard'
 import { FormattedValue } from '@/components/ui/formatted-value'
 import {
@@ -71,55 +72,76 @@ export function SecondaryMetrics({
           volatility: Math.round(metrics.requestVolatility),
         })
       : null
+  const topCostInfo =
+    viewMode === 'yearly'
+      ? METRIC_HELP.mostExpensiveYear
+      : viewMode === 'monthly'
+        ? METRIC_HELP.mostExpensiveMonth
+        : METRIC_HELP.mostExpensiveDay
+  const avgCostInfo =
+    viewMode === 'yearly'
+      ? METRIC_HELP.avgCostPerYear
+      : viewMode === 'monthly'
+        ? METRIC_HELP.avgCostPerMonth
+        : METRIC_HELP.avgCostPerDay
+  const periodAverageInfo = viewMode === 'daily' ? METRIC_HELP.peak7Days : avgCostInfo
 
   return (
     <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
-      <MetricCard
-        label={
-          viewMode === 'yearly'
-            ? t('metricCards.secondary.mostExpensiveYear')
-            : viewMode === 'monthly'
-              ? t('metricCards.secondary.mostExpensiveMonth')
-              : t('metricCards.secondary.mostExpensiveDay')
-        }
-        value={
-          metrics.topDay ? <FormattedValue value={metrics.topDay.cost} type="currency" /> : '–'
-        }
-        icon={<TrendingUp className="h-4 w-4" />}
-        info={METRIC_HELP.mostExpensiveDay}
-        {...(topDaySubtitle ? { subtitle: topDaySubtitle } : {})}
-      />
-      <MetricCard
-        label={t('metricCards.secondary.dominantProvider')}
-        value={metrics.topProvider?.name ?? '–'}
-        icon={<Building2 className="h-4 w-4" />}
-        info={t('metricCards.secondary.medianInfo')}
-        {...(topProviderSubtitle ? { subtitle: topProviderSubtitle } : {})}
-      />
-      <MetricCard
-        label={
-          viewMode === 'daily'
-            ? t('metricCards.secondary.peak7Days')
-            : t('metricCards.secondary.avgCostPerUnit', { unit: periodUnit(viewMode) })
-        }
-        value={
-          viewMode === 'daily' && metrics.busiestWeek ? (
-            <FormattedValue value={metrics.busiestWeek.cost} type="currency" />
-          ) : (
-            <FormattedValue value={metrics.avgDailyCost} type="currency" />
-          )
-        }
-        icon={<ChartBar className="h-4 w-4" />}
-        info={METRIC_HELP.avgCostPerDay}
-        {...(peakSubtitle ? { subtitle: peakSubtitle } : {})}
-      />
-      <MetricCard
-        label={t('metricCards.secondary.medianPerUnit', { unit: periodUnit(viewMode) })}
-        value={median !== null ? <FormattedValue value={median} type="currency" /> : '–'}
-        icon={<Sigma className="h-4 w-4" />}
-        info={t('metricCards.secondary.medianInfo')}
-        {...(medianSubtitle ? { subtitle: medianSubtitle } : {})}
-      />
+      <DashboardMotionItem order={0}>
+        <MetricCard
+          label={
+            viewMode === 'yearly'
+              ? t('metricCards.secondary.mostExpensiveYear')
+              : viewMode === 'monthly'
+                ? t('metricCards.secondary.mostExpensiveMonth')
+                : t('metricCards.secondary.mostExpensiveDay')
+          }
+          value={
+            metrics.topDay ? <FormattedValue value={metrics.topDay.cost} type="currency" /> : '–'
+          }
+          icon={<TrendingUp className="h-4 w-4" />}
+          info={topCostInfo}
+          {...(topDaySubtitle ? { subtitle: topDaySubtitle } : {})}
+        />
+      </DashboardMotionItem>
+      <DashboardMotionItem order={1}>
+        <MetricCard
+          label={t('metricCards.secondary.dominantProvider')}
+          value={metrics.topProvider?.name ?? '–'}
+          icon={<Building2 className="h-4 w-4" />}
+          info={t('metricCards.secondary.dominantProviderInfo')}
+          {...(topProviderSubtitle ? { subtitle: topProviderSubtitle } : {})}
+        />
+      </DashboardMotionItem>
+      <DashboardMotionItem order={2}>
+        <MetricCard
+          label={
+            viewMode === 'daily'
+              ? t('metricCards.secondary.peak7Days')
+              : t('metricCards.secondary.avgCostPerUnit', { unit: periodUnit(viewMode) })
+          }
+          value={
+            viewMode === 'daily' && metrics.busiestWeek ? (
+              <FormattedValue value={metrics.busiestWeek.cost} type="currency" />
+            ) : (
+              <FormattedValue value={metrics.avgDailyCost} type="currency" />
+            )
+          }
+          icon={<ChartBar className="h-4 w-4" />}
+          info={periodAverageInfo}
+          {...(peakSubtitle ? { subtitle: peakSubtitle } : {})}
+        />
+      </DashboardMotionItem>
+      <DashboardMotionItem order={3}>
+        <MetricCard
+          label={t('metricCards.secondary.medianPerUnit', { unit: periodUnit(viewMode) })}
+          value={median !== null ? <FormattedValue value={median} type="currency" /> : '–'}
+          icon={<Sigma className="h-4 w-4" />}
+          info={t('metricCards.secondary.medianInfo')}
+          {...(medianSubtitle ? { subtitle: medianSubtitle } : {})}
+        />
+      </DashboardMotionItem>
     </div>
   )
 }
diff --git a/src/components/cards/TodayMetrics.tsx b/src/components/cards/TodayMetrics.tsx
index 7f674f2..655e0cf 100644
--- a/src/components/cards/TodayMetrics.tsx
+++ b/src/components/cards/TodayMetrics.tsx
@@ -8,10 +8,10 @@ import {
   BrainCircuit,
 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { DashboardMotionItem } from '@/components/dashboard/DashboardMotion'
 import { MetricCard } from './MetricCard'
 import { FormattedValue } from '@/components/ui/formatted-value'
 import { SectionHeader } from '@/components/ui/section-header'
-import { FadeIn } from '@/components/features/animations/FadeIn'
 import { SECTION_HELP } from '@/lib/help-content'
 import { formatCurrency, formatPercent, formatDate, formatTokens } from '@/lib/formatters'
 import { normalizeModelName } from '@/lib/model-utils'
@@ -83,8 +83,8 @@ export function TodayMetrics({ today, metrics }: TodayMetricsProps) {
         description={t('metricCards.today.description')}
         info={SECTION_HELP.today}
       />
-      <FadeIn delay={0.05}>
-        <div className="grid grid-cols-2 gap-3 lg:grid-cols-4 xl:grid-cols-6">
+      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4 xl:grid-cols-6">
+        <DashboardMotionItem order={0}>
           <MetricCard
             label={t('metricCards.today.costToday')}
             value={<FormattedValue value={today.totalCost} type="currency" />}
@@ -96,6 +96,8 @@ export function TodayMetrics({ today, metrics }: TodayMetricsProps) {
             }
             {...(costSubtitle ? { subtitle: costSubtitle } : {})}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={1}>
           <MetricCard
             label={t('metricCards.today.tokensToday')}
             value={
@@ -113,12 +115,16 @@ export function TodayMetrics({ today, metrics }: TodayMetricsProps) {
             icon={<Coins className="h-4 w-4" />}
             {...(tokensSubtitle ? { subtitle: tokensSubtitle } : {})}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={2}>
           <MetricCard
             label={t('metricCards.today.models')}
             value={String(modelsCount)}
             icon={<Cpu className="h-4 w-4" />}
             {...(modelSubtitle ? { subtitle: modelSubtitle } : {})}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={3}>
           <MetricCard
             label={t('metricCards.today.costPerMillion')}
             value={
@@ -132,6 +138,8 @@ export function TodayMetrics({ today, metrics }: TodayMetricsProps) {
             icon={<TrendingDown className="h-4 w-4" />}
             {...(costPerMillionSubtitle ? { subtitle: costPerMillionSubtitle } : {})}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={4}>
           <MetricCard
             label={t('metricCards.today.cacheHitRate')}
             value={<FormattedValue value={cacheHitRate} type="percent" />}
@@ -140,6 +148,8 @@ export function TodayMetrics({ today, metrics }: TodayMetricsProps) {
             })}
             icon={<Database className="h-4 w-4" />}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={5}>
           <MetricCard
             label={t('metricCards.today.requests')}
             value={
@@ -159,14 +169,16 @@ export function TodayMetrics({ today, metrics }: TodayMetricsProps) {
             subtitle={requestsSubtitle}
             icon={<Activity className="h-4 w-4" />}
           />
+        </DashboardMotionItem>
+        <DashboardMotionItem order={6}>
           <MetricCard
             label={t('metricCards.today.thinking')}
             value={<FormattedValue value={today.thinkingTokens} type="tokens" />}
             icon={<BrainCircuit className="h-4 w-4" />}
             {...(thinkingSubtitle ? { subtitle: thinkingSubtitle } : {})}
           />
-        </div>
-      </FadeIn>
+        </DashboardMotionItem>
+      </div>
     </div>
   )
 }
diff --git a/src/components/charts/ChartCard.tsx b/src/components/charts/ChartCard.tsx
index e9f3c7d..4405504 100644
--- a/src/components/charts/ChartCard.tsx
+++ b/src/components/charts/ChartCard.tsx
@@ -8,11 +8,17 @@ import {
   type ReactNode,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useInView } from 'framer-motion'
+import { motion, useInView } from 'framer-motion'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/components/ui/dialog'
 import { Maximize2 } from 'lucide-react'
 import { InfoButton } from '@/components/features/help/InfoButton'
+import {
+  DASHBOARD_MOTION,
+  useDashboardElementMotion,
+  useDashboardSectionMotion,
+} from '@/components/dashboard/DashboardMotion'
+import { CHART_ANIMATION } from './chart-theme'
 import { cn } from '@/lib/cn'
 import { buildCsvLine } from '@/lib/csv'
 import { formatCurrency } from '@/lib/formatters'
@@ -48,18 +54,43 @@ export function buildChartCsv(chartData: Record<string, unknown>[]): string {
   ].join('\n')
 }
 
-const ChartAnimationContext = createContext(false)
+interface ChartAnimationState {
+  active: boolean
+  delayMs: number
+  runKey: number
+}
+
+const ChartAnimationContext = createContext<ChartAnimationState>({
+  active: false,
+  delayMs: 0,
+  runKey: 0,
+})
 
 /** Returns whether chart-specific animation should currently run. */
 export function useChartAnimationActive() {
+  return useContext(ChartAnimationContext).active
+}
+
+/** Returns the current chart animation state. */
+export function useChartAnimationState() {
   return useContext(ChartAnimationContext)
 }
 
+/** Returns the current chart animation delay in milliseconds. */
+export function useChartAnimationDelay() {
+  return useContext(ChartAnimationContext).delayMs
+}
+
+/** Returns the current chart animation run key. */
+export function useChartAnimationRunKey() {
+  return useContext(ChartAnimationContext).runKey
+}
+
 /** Exposes the current chart animation state to a render prop. */
 export function ChartAnimationAware({ children }: { children: (active: boolean) => ReactNode }) {
   const shouldReduceMotion = useShouldReduceMotion()
-  const animationActive = useChartAnimationActive()
-  return <>{children(shouldReduceMotion ? false : animationActive)}</>
+  const animationState = useChartAnimationState()
+  return <>{children(shouldReduceMotion ? false : animationState.active)}</>
 }
 
 interface ChartRevealProps {
@@ -69,20 +100,36 @@ interface ChartRevealProps {
 
 /** Wraps chart content in the shared reveal policy for its chart variant. */
 export function ChartReveal({ children, variant = 'line' }: ChartRevealProps) {
+  const shouldReduceMotion = useShouldReduceMotion()
+  const active = useChartAnimationActive()
+  const runKey = useChartAnimationRunKey()
+  const wrapperStyle = {
+    width: '100%',
+    height: '100%',
+    overflow: variant === 'radial' ? 'visible' : 'hidden',
+    transformOrigin: variant === 'bar' ? 'center bottom' : 'center center',
+    paddingTop: variant === 'radial' ? 8 : 0,
+    paddingBottom: variant === 'radial' ? 8 : 0,
+    boxSizing: 'border-box',
+  } as const
+
+  if (shouldReduceMotion) {
+    return <div style={wrapperStyle}>{children}</div>
+  }
+
   return (
-    <div
-      style={{
-        width: '100%',
-        height: '100%',
-        overflow: variant === 'radial' ? 'visible' : 'hidden',
-        transformOrigin: variant === 'bar' ? 'center bottom' : 'center center',
-        paddingTop: variant === 'radial' ? 8 : 0,
-        paddingBottom: variant === 'radial' ? 8 : 0,
-        boxSizing: 'border-box',
+    <motion.div
+      style={wrapperStyle}
+      initial={false}
+      animate={active ? { opacity: 1, y: 0 } : { opacity: 0, y: 8 }}
+      transition={{
+        duration: CHART_ANIMATION.revealDuration / 1000,
+        delay: 0,
+        ease: DASHBOARD_MOTION.sectionRevealEase,
       }}
     >
-      {children}
-    </div>
+      <div key={shouldReduceMotion ? 'reduced-motion' : `chart-run-${runKey}`}>{children}</div>
+    </motion.div>
   )
 }
 
@@ -101,10 +148,40 @@ export function ChartCard({
   expandedExtra,
 }: ChartCardProps) {
   const { t } = useTranslation()
+  const sectionMotion = useDashboardSectionMotion()
   const [expanded, setExpanded] = useState(false)
   const cardRef = useRef<HTMLDivElement | null>(null)
   const isInView = useInView(cardRef, { once: true, amount: 0.25 })
-  const animationActive = isInView || expanded
+  const elementMotion = useDashboardElementMotion(cardRef, {
+    kind: 'chart',
+    amount: 0.3,
+  })
+  const animationState = useMemo<ChartAnimationState>(() => {
+    if (expanded) {
+      return { active: true, delayMs: 0, runKey: 1 }
+    }
+
+    if (sectionMotion) {
+      return {
+        active: elementMotion.active,
+        delayMs: elementMotion.delayMs,
+        runKey: elementMotion.runKey,
+      }
+    }
+
+    return {
+      active: isInView,
+      delayMs: DASHBOARD_MOTION.chartStartDelayMs,
+      runKey: isInView ? 1 : 0,
+    }
+  }, [
+    elementMotion.active,
+    elementMotion.delayMs,
+    elementMotion.runKey,
+    expanded,
+    isInView,
+    sectionMotion,
+  ])
 
   const stats = useMemo(() => {
     if (!chartData || !valueKey) return null
@@ -125,6 +202,7 @@ export function ChartCard({
   const fmt = valueFormatter ?? formatCurrency
   const renderChildren = (isExpanded: boolean) =>
     typeof children === 'function' ? children(isExpanded) : children
+  const isSectionVisible = sectionMotion?.sectionVisible ?? true
 
   const handleExport = useCallback(() => {
     if (!chartData || chartData.length === 0) return
@@ -156,7 +234,7 @@ export function ChartCard({
 
   return (
     <>
-      <ChartAnimationContext.Provider value={animationActive}>
+      <ChartAnimationContext.Provider value={animationState}>
         <Card ref={cardRef} className={cn('group relative', className)}>
           {header}
           <CardContent>{renderChildren(false)}</CardContent>
@@ -164,6 +242,7 @@ export function ChartCard({
             <button
               type="button"
               onClick={() => setExpanded(true)}
+              tabIndex={isSectionVisible ? undefined : -1}
               className="absolute top-3 right-3 z-10 rounded-lg border border-border/50 bg-background/80 p-1.5 text-muted-foreground opacity-100 backdrop-blur-sm transition-opacity duration-200 hover:bg-accent hover:text-foreground focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none motion-reduce:transition-none md:opacity-0 md:group-focus-within:opacity-100 md:group-hover:opacity-100"
               title={t('common.expand')}
               aria-label={t('common.expandWithTitle', { title })}
@@ -181,7 +260,7 @@ export function ChartCard({
             <DialogDescription className="sr-only">
               {t('chartCard.expandedDescription')}
             </DialogDescription>
-            <ChartAnimationContext.Provider value={expanded}>
+            <ChartAnimationContext.Provider value={{ active: expanded, delayMs: 0, runKey: 1 }}>
               <div className="relative flex h-full flex-col">
                 <div className="p-4 pb-2 sm:p-6">
                   <div className="flex items-center justify-between">
diff --git a/src/components/charts/ChartLegend.tsx b/src/components/charts/ChartLegend.tsx
index 1cdd44e..fb32286 100644
--- a/src/components/charts/ChartLegend.tsx
+++ b/src/components/charts/ChartLegend.tsx
@@ -1,3 +1,6 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/cn'
+
 interface ChartLegendEntry {
   id?: string | number
   dataKey?: string | number
@@ -5,25 +8,32 @@ interface ChartLegendEntry {
   value?: string | number
 }
 
+interface ChartLegendProps {
+  payload?: ChartLegendEntry[]
+  className?: string
+  renderLabel?: (entry: ChartLegendEntry) => ReactNode
+}
+
 /** Renders a compact responsive legend for Recharts payload items. */
-export function ChartLegend({ payload }: { payload?: ChartLegendEntry[] }) {
+export function ChartLegend({ payload, className, renderLabel }: ChartLegendProps) {
   if (!payload?.length) return null
 
   return (
-    <div className="mt-3 overflow-x-auto pb-1">
-      <div className="flex min-w-max items-center gap-3 pr-2">
+    <div className={cn('mt-3 pb-1', className)}>
+      <div className="flex flex-wrap items-start gap-x-3 gap-y-2 pr-2">
         {payload.map((entry, index) => {
           const color = typeof entry.color === 'string' ? entry.color : 'currentColor'
           const label = String(entry.value ?? '')
+          const renderedLabel = renderLabel ? renderLabel(entry) : label
           const key = entry.id ?? entry.dataKey ?? `${label}-${color}-${index}`
 
           return (
-            <div key={String(key)} className="inline-flex items-center gap-2 text-xs">
+            <div key={String(key)} className="inline-flex min-w-0 items-center gap-2 text-xs">
               <span
                 className="h-2.5 w-2.5 shrink-0 rounded-full"
                 style={{ backgroundColor: color }}
               />
-              <span className="whitespace-nowrap text-muted-foreground">{label}</span>
+              <span className="min-w-0 break-words text-muted-foreground">{renderedLabel}</span>
             </div>
           )
         })}
diff --git a/src/components/charts/CorrelationAnalysis.tsx b/src/components/charts/CorrelationAnalysis.tsx
index 8c9fc6c..d8bfc19 100644
--- a/src/components/charts/CorrelationAnalysis.tsx
+++ b/src/components/charts/CorrelationAnalysis.tsx
@@ -1,6 +1,5 @@
 import { useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useInView } from 'framer-motion'
 import {
   ResponsiveContainer,
   ScatterChart,
@@ -12,8 +11,9 @@ import {
   ZAxis,
 } from 'recharts'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { useDashboardElementMotion } from '@/components/dashboard/DashboardMotion'
 import { InfoHeading } from '@/components/features/help/InfoHeading'
-import { CHART_COLORS, CHART_MARGIN, CHART_ANIMATION } from './chart-theme'
+import { CHART_COLORS, CHART_MARGIN, getScatterAnimationProps } from './chart-theme'
 import { CHART_HELP } from '@/lib/help-content'
 import {
   formatCurrency,
@@ -22,7 +22,6 @@ import {
   formatPercent,
   formatTokens,
 } from '@/lib/formatters'
-import { useShouldReduceMotion } from '@/lib/motion'
 import type { DailyUsage } from '@/types'
 
 interface CorrelationAnalysisProps {
@@ -145,6 +144,8 @@ function CorrelationPanel({
   xTickFormatter,
   yAxisName,
   footer,
+  showPoints,
+  animatePoints,
 }: {
   title: string
   subtitle: string
@@ -156,15 +157,13 @@ function CorrelationPanel({
   xTickFormatter?: (value: number) => string
   yAxisName: string
   footer: string
+  showPoints: boolean
+  animatePoints: boolean
 }) {
-  const panelRef = useRef<HTMLDivElement | null>(null)
-  const panelInView = useInView(panelRef, { once: true, amount: 0.45 })
-  const shouldReduceMotion = useShouldReduceMotion()
-  const animatePoints = shouldReduceMotion ? true : panelInView
-  const chartData = animatePoints ? data : []
+  const chartData = showPoints ? data : []
 
   return (
-    <div ref={panelRef}>
+    <div>
       <div>
         <div className="mb-2 flex items-center justify-between gap-3">
           <div className="text-[10px] tracking-[0.14em] text-muted-foreground uppercase">
@@ -201,9 +200,7 @@ function CorrelationPanel({
               fill={color}
               stroke={color}
               fillOpacity={0.72}
-              isAnimationActive={!shouldReduceMotion && animatePoints}
-              animationBegin={animationBegin}
-              animationDuration={CHART_ANIMATION.duration}
+              {...getScatterAnimationProps(animatePoints, animationBegin)}
             />
           </ScatterChart>
         </ResponsiveContainer>
@@ -216,6 +213,13 @@ function CorrelationPanel({
 /** Renders scatter-plot based correlation analysis for the current dataset. */
 export function CorrelationAnalysis({ data }: CorrelationAnalysisProps) {
   const { t } = useTranslation()
+  const cardRef = useRef<HTMLDivElement | null>(null)
+  const chartMotion = useDashboardElementMotion(cardRef, {
+    kind: 'chart',
+    amount: 0.28,
+  })
+  const showPoints = chartMotion.shouldReduceMotion || chartMotion.active
+  const animatePoints = !chartMotion.shouldReduceMotion && chartMotion.active
   const requestVsCost = useMemo<ScatterPoint[]>(
     () =>
       data.map((entry) => ({
@@ -258,7 +262,7 @@ export function CorrelationAnalysis({ data }: CorrelationAnalysisProps) {
 
   if (data.length < 2) {
     return (
-      <Card>
+      <Card ref={cardRef}>
         <CardHeader>
           <InfoHeading info={CHART_HELP.correlationAnalysis}>
             <CardTitle className="text-sm font-medium text-muted-foreground">
@@ -276,7 +280,7 @@ export function CorrelationAnalysis({ data }: CorrelationAnalysisProps) {
   }
 
   return (
-    <Card>
+    <Card ref={cardRef}>
       <CardHeader>
         <InfoHeading info={CHART_HELP.correlationAnalysis}>
           <CardTitle className="text-sm font-medium text-muted-foreground">
@@ -286,23 +290,29 @@ export function CorrelationAnalysis({ data }: CorrelationAnalysisProps) {
       </CardHeader>
       <CardContent className="grid grid-cols-1 gap-4 xl:grid-cols-2">
         <CorrelationPanel
+          key={`request-cost-${chartMotion.runKey}`}
           title={t('charts.correlation.requestsVsCost')}
           subtitle={`r ${requestCostCorrelation.toFixed(2)} · ${t('charts.correlation.points', { count: requestVsCost.length })}`}
           mode="requestCost"
           data={requestVsCost}
           color={CHART_COLORS.cost}
+          showPoints={showPoints}
+          animatePoints={animatePoints}
           xAxisName={t('charts.correlation.requestsAxis')}
           yAxisName={t('charts.correlation.cost')}
           footer={getCorrelationInterpretation(t, requestCostCorrelation, 'requestCost')}
         />
 
         <CorrelationPanel
+          key={`cache-cost-${chartMotion.runKey}`}
           title={t('charts.correlation.cacheVsCostPerRequest')}
           subtitle={`r ${cacheEfficiencyCorrelation.toFixed(2)} · ${t('charts.correlation.points', { count: cacheVsCostPerRequest.length })}`}
           mode="cacheEfficiency"
           data={cacheVsCostPerRequest}
           color={CHART_COLORS.cumulative}
-          animationBegin={CHART_ANIMATION.stagger}
+          showPoints={showPoints}
+          animatePoints={animatePoints}
+          animationBegin={70}
           xAxisName={t('charts.correlation.cacheRate')}
           xTickFormatter={(value) => formatPercent(value, 0)}
           yAxisName={t('charts.correlation.costPerRequestAxis')}
diff --git a/src/components/charts/CostByModel.tsx b/src/components/charts/CostByModel.tsx
index eb64efb..0209c15 100644
--- a/src/components/charts/CostByModel.tsx
+++ b/src/components/charts/CostByModel.tsx
@@ -1,8 +1,9 @@
 import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend } from 'recharts'
 import { useTranslation } from 'react-i18next'
 import { ChartCard, ChartAnimationAware, ChartReveal } from './ChartCard'
+import { ChartLegend } from './ChartLegend'
 import { CustomTooltip } from './CustomTooltip'
-import { CHART_ANIMATION } from './chart-theme'
+import { getRadialAnimationProps } from './chart-theme'
 import { getModelColor } from '@/lib/model-utils'
 import { formatCurrency, formatPercent } from '@/lib/formatters'
 import { CHART_HELP } from '@/lib/help-content'
@@ -84,10 +85,7 @@ export function CostByModel({ data }: CostByModelProps) {
                         paddingAngle={2}
                         dataKey="value"
                         nameKey="name"
-                        isAnimationActive={animate}
-                        animationDuration={CHART_ANIMATION.duration}
-                        animationBegin={CHART_ANIMATION.stagger}
-                        animationEasing={CHART_ANIMATION.easing}
+                        {...getRadialAnimationProps(animate)}
                         label={false}
                       >
                         {data.map((entry) => (
@@ -97,15 +95,16 @@ export function CostByModel({ data }: CostByModelProps) {
                       </Pie>
                       <Tooltip content={<CustomTooltip formatter={(v) => formatCurrency(v)} />} />
                       <Legend
-                        wrapperStyle={{ fontSize: '12px', paddingTop: expanded ? '22px' : '8px' }}
-                        formatter={(value: string) => {
-                          const entry = data.find((d) => d.name === value)
-                          return (
-                            <span className="text-xs text-foreground">
-                              {value} ({entry ? formatCurrency(entry.value) : ''})
-                            </span>
-                          )
-                        }}
+                        content={
+                          <ChartLegend
+                            className={expanded ? 'pt-[22px]' : 'pt-2'}
+                            renderLabel={(entry: { value?: string | number }) => {
+                              const value = String(entry.value ?? '')
+                              const segment = data.find((item) => item.name === value)
+                              return segment ? `${value} (${formatCurrency(segment.value)})` : value
+                            }}
+                          />
+                        }
                       />
                     </PieChart>
                   </ResponsiveContainer>
diff --git a/src/components/charts/CostByModelOverTime.tsx b/src/components/charts/CostByModelOverTime.tsx
index 55d000b..b6488f5 100644
--- a/src/components/charts/CostByModelOverTime.tsx
+++ b/src/components/charts/CostByModelOverTime.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next'
 import { ChartCard, ChartAnimationAware, ChartReveal } from './ChartCard'
 import { ChartLegend } from './ChartLegend'
 import { CustomTooltip } from './CustomTooltip'
-import { CHART_COLORS, CHART_MARGIN, CHART_ANIMATION } from './chart-theme'
+import { CHART_COLORS, CHART_MARGIN, getLineAnimationProps } from './chart-theme'
 import { getModelColor } from '@/lib/model-utils'
 import type { ModelCostChartPoint } from '@/lib/data-transforms'
 import { coerceNumber, formatCurrency, formatDateAxis } from '@/lib/formatters'
@@ -82,9 +82,7 @@ export function CostByModelOverTime({ data, models }: CostByModelOverTimeProps)
                     strokeWidth={2}
                     strokeDasharray="5 4"
                     connectNulls
-                    isAnimationActive={animate}
-                    animationBegin={CHART_ANIMATION.stagger * (index % 5)}
-                    animationDuration={CHART_ANIMATION.slowDuration}
+                    {...getLineAnimationProps(animate, { order: index % 5, role: 'secondary' })}
                   />
                 ))}
               </LineChart>
@@ -150,10 +148,7 @@ export function CostByModelOverTime({ data, models }: CostByModelOverTimeProps)
                     name={model}
                     dot={false}
                     strokeWidth={1.5}
-                    isAnimationActive={animate}
-                    animationBegin={CHART_ANIMATION.stagger * (index % 5)}
-                    animationDuration={CHART_ANIMATION.duration}
-                    animationEasing={CHART_ANIMATION.easing}
+                    {...getLineAnimationProps(animate, { order: index % 5 })}
                   />
                 ))}
               </LineChart>
diff --git a/src/components/charts/CostByWeekday.tsx b/src/components/charts/CostByWeekday.tsx
index e3485bd..8b21f2b 100644
--- a/src/components/charts/CostByWeekday.tsx
+++ b/src/components/charts/CostByWeekday.tsx
@@ -12,7 +12,7 @@ import { useState, useId } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChartCard, ChartAnimationAware, ChartReveal } from './ChartCard'
 import { CustomTooltip } from './CustomTooltip'
-import { CHART_COLORS, CHART_MARGIN, CHART_ANIMATION } from './chart-theme'
+import { CHART_COLORS, CHART_MARGIN, getBarAnimationProps } from './chart-theme'
 import { coerceNumber, formatCurrency } from '@/lib/formatters'
 import { CHART_HELP } from '@/lib/help-content'
 import type { WeekdayData } from '@/types'
@@ -105,10 +105,7 @@ export function CostByWeekday({ data }: CostByWeekdayProps) {
                   dataKey="cost"
                   radius={[4, 4, 0, 0]}
                   name={t('charts.costByWeekday.averageCost')}
-                  isAnimationActive={animate}
-                  animationBegin={CHART_ANIMATION.stagger}
-                  animationDuration={CHART_ANIMATION.duration}
-                  animationEasing={CHART_ANIMATION.easing}
+                  {...getBarAnimationProps(animate)}
                 >
                   {data.map((_, index) => {
                     let fill = `url(#${gid('weekday')})`
diff --git a/src/components/charts/CostOverTime.tsx b/src/components/charts/CostOverTime.tsx
index dd269cc..3676214 100644
--- a/src/components/charts/CostOverTime.tsx
+++ b/src/components/charts/CostOverTime.tsx
@@ -14,7 +14,12 @@ import {
 import { ChartCard, ChartAnimationAware, ChartReveal } from './ChartCard'
 import { ChartLegend } from './ChartLegend'
 import { CustomTooltip } from './CustomTooltip'
-import { CHART_COLORS, CHART_MARGIN, CHART_ANIMATION } from './chart-theme'
+import {
+  CHART_COLORS,
+  CHART_MARGIN,
+  getAreaAnimationProps,
+  getLineAnimationProps,
+} from './chart-theme'
 import { coerceNumber, formatCurrency, formatDateAxis } from '@/lib/formatters'
 import { CHART_HELP } from '@/lib/help-content'
 import type { ChartDataPoint } from '@/types'
@@ -126,10 +131,7 @@ export function CostOverTime({ data, onClickDay }: CostOverTimeProps) {
                     fill: 'hsl(var(--background))',
                   }}
                   dot={false}
-                  isAnimationActive={animate}
-                  animationBegin={0}
-                  animationDuration={CHART_ANIMATION.duration}
-                  animationEasing={CHART_ANIMATION.easing}
+                  {...getAreaAnimationProps(animate)}
                 />
                 <Line
                   type="monotone"
@@ -140,9 +142,7 @@ export function CostOverTime({ data, onClickDay }: CostOverTimeProps) {
                   strokeWidth={2}
                   strokeDasharray="5 5"
                   connectNulls
-                  isAnimationActive={animate}
-                  animationBegin={CHART_ANIMATION.stagger}
-                  animationDuration={CHART_ANIMATION.slowDuration}
+                  {...getLineAnimationProps(animate, { role: 'secondary' })}
                 />
               </ComposedChart>
             </ResponsiveContainer>
diff --git a/src/components/charts/CumulativeCost.tsx b/src/components/charts/CumulativeCost.tsx
index 170a9d1..fc05ef0 100644
--- a/src/components/charts/CumulativeCost.tsx
+++ b/src/components/charts/CumulativeCost.tsx
@@ -12,7 +12,12 @@ import {
 } from 'recharts'
 import { ChartCard, ChartAnimationAware, ChartReveal } from './ChartCard'
 import { CustomTooltip } from './CustomTooltip'
-import { CHART_COLORS, CHART_MARGIN, CHART_ANIMATION } from './chart-theme'
+import {
+  CHART_COLORS,
+  CHART_MARGIN,
+  getAreaAnimationProps,
+  getLineAnimationProps,
+} from './chart-theme'
 import { coerceNumber, formatCurrency, formatDateAxis } from '@/lib/formatters'
 import { computeCurrentMonthForecast } from '@/lib/calculations'
 import { CHART_HELP } from '@/lib/help-content'
@@ -113,10 +118,7 @@ export function CumulativeCost({ data, rawData }: CumulativeCostProps) {
                     fill: 'hsl(var(--background))',
                   }}
                   dot={false}
-                  isAnimationActive={animate}
-                  animationBegin={0}
-                  animationDuration={CHART_ANIMATION.duration}
-                  animationEasing={CHART_ANIMATION.easing}
+                  {...getAreaAnimationProps(animate)}
                   connectNulls={false}
                 />
                 <Line
@@ -128,9 +130,7 @@ export function CumulativeCost({ data, rawData }: CumulativeCostProps) {
                   dot={false}
                   name={t('charts.cumulativeCost.projection')}
                   connectNulls
-                  isAnimationActive={animate}
-                  animationBegin={CHART_ANIMATION.stagger}
-                  animationDuration={CHART_ANIMATION.slowDuration}
+                  {...getLineAnimationProps(animate, { role: 'secondary' })}
                 />
               </ComposedChart>
             </ResponsiveContainer>
diff --git a/src/components/charts/DistributionAnalysis.tsx b/src/components/charts/DistributionAnalysis.tsx
index 5522a02..4be5835 100644
--- a/src/components/charts/DistributionAnalysis.tsx
+++ b/src/components/charts/DistributionAnalysis.tsx
@@ -10,12 +10,10 @@ import {
   Tooltip,
   Cell,
 } from 'recharts'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { InfoHeading } from '@/components/features/help/InfoHeading'
-import { CHART_COLORS, CHART_MARGIN, CHART_ANIMATION } from './chart-theme'
+import { ChartAnimationAware, ChartCard, ChartReveal, useChartAnimationRunKey } from './ChartCard'
+import { CHART_COLORS, CHART_MARGIN, getBarAnimationProps } from './chart-theme'
 import { CHART_HELP } from '@/lib/help-content'
 import { formatCurrency, formatNumber, formatTokens, periodLabel } from '@/lib/formatters'
-import { useShouldReduceMotion } from '@/lib/motion'
 import type { DailyUsage, ViewMode } from '@/types'
 
 interface DistributionAnalysisProps {
@@ -30,6 +28,11 @@ interface DistributionBin {
   count: number
 }
 
+interface DistributionSeries {
+  title: string
+  data: DistributionBin[]
+}
+
 function toBins(values: number[], formatter: (value: number) => string): DistributionBin[] {
   if (values.length === 0) return []
   const min = Math.min(...values)
@@ -94,9 +97,8 @@ function DistributionTooltip({
 export function DistributionAnalysis({ data, viewMode = 'daily' }: DistributionAnalysisProps) {
   const { t } = useTranslation()
   const uid = useId().replace(/:/g, '')
-  const shouldReduceMotion = useShouldReduceMotion()
 
-  const distributions = useMemo(() => {
+  const distributions = useMemo<DistributionSeries[]>(() => {
     if (data.length < 2) return []
 
     const costs = data.map((entry) => entry.totalCost)
@@ -123,100 +125,125 @@ export function DistributionAnalysis({ data, viewMode = 'daily' }: DistributionA
 
   if (data.length < 2) {
     return (
-      <Card>
-        <CardHeader>
-          <InfoHeading info={CHART_HELP.distributionAnalysis}>
-            <CardTitle className="text-sm font-medium text-muted-foreground">
-              {t('charts.distribution.title')}
-            </CardTitle>
-          </InfoHeading>
-        </CardHeader>
-        <CardContent>
-          <div className="rounded-xl border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-sm text-muted-foreground">
-            {t('charts.distribution.requiresData')}
-          </div>
-        </CardContent>
-      </Card>
+      <ChartCard
+        title={t('charts.distribution.title')}
+        info={CHART_HELP.distributionAnalysis}
+        expandable={false}
+      >
+        <div className="rounded-xl border border-dashed border-border/60 bg-muted/10 px-4 py-6 text-sm text-muted-foreground">
+          {t('charts.distribution.requiresData')}
+        </div>
+      </ChartCard>
     )
   }
 
   return (
-    <Card>
-      <CardHeader>
-        <InfoHeading info={CHART_HELP.distributionAnalysis}>
-          <CardTitle className="text-sm font-medium text-muted-foreground">
-            {t('charts.distribution.title')}
-          </CardTitle>
-        </InfoHeading>
-      </CardHeader>
-      <CardContent className="space-y-5">
-        {distributions.map((distribution, index) => (
-          <div key={distribution.title}>
-            <div>
-              <div className="mb-2 flex items-center justify-between gap-3">
-                <div className="text-[10px] tracking-[0.14em] text-muted-foreground uppercase">
-                  {distribution.title}
-                </div>
-                <div className="text-[10px] text-muted-foreground">
-                  {distribution.data.length} {t('charts.distribution.buckets')}
-                </div>
-              </div>
-              <ResponsiveContainer width="100%" height={160}>
-                <BarChart data={distribution.data} margin={CHART_MARGIN}>
-                  <defs>
-                    <linearGradient id={`${uid}-distribution-${index}`} x1="0" y1="0" x2="0" y2="1">
-                      <stop offset="0%" stopColor={CHART_COLORS.cost} stopOpacity={0.9} />
-                      <stop offset="100%" stopColor={CHART_COLORS.cost} stopOpacity={0.4} />
-                    </linearGradient>
-                  </defs>
-                  <CartesianGrid strokeDasharray="3 3" stroke={CHART_COLORS.grid} opacity={0.25} />
-                  <XAxis
-                    dataKey="label"
-                    stroke={CHART_COLORS.axis}
-                    fontSize={10}
-                    tickLine={false}
-                    interval={0}
-                    angle={distribution.data.length > 5 ? -16 : 0}
-                    textAnchor={distribution.data.length > 5 ? 'end' : 'middle'}
-                    height={distribution.data.length > 5 ? 48 : 30}
-                  />
-                  <YAxis
-                    stroke={CHART_COLORS.axis}
-                    fontSize={10}
-                    tickLine={false}
-                    axisLine={false}
-                    allowDecimals={false}
-                  />
-                  <Tooltip
-                    content={<DistributionTooltip />}
-                    cursor={{ fill: 'hsl(var(--muted))', opacity: 0.15 }}
-                  />
-                  <Bar
-                    dataKey="count"
-                    radius={[6, 6, 0, 0]}
-                    fill={`url(#${uid}-distribution-${index})`}
-                    isAnimationActive={!shouldReduceMotion}
-                    animationBegin={CHART_ANIMATION.stagger * index}
-                    animationDuration={CHART_ANIMATION.duration}
-                  >
-                    {distribution.data.map((_, binIndex) => {
-                      const intensity =
-                        distribution.data.length > 1 ? binIndex / (distribution.data.length - 1) : 0
-                      const opacity = 0.45 + intensity * 0.35
-                      return (
-                        <Cell
-                          key={`${distribution.title}-${binIndex}`}
-                          fill={`hsla(215, 70%, 55%, ${opacity.toFixed(2)})`}
-                        />
-                      )
-                    })}
-                  </Bar>
-                </BarChart>
-              </ResponsiveContainer>
+    <ChartCard
+      title={t('charts.distribution.title')}
+      info={CHART_HELP.distributionAnalysis}
+      expandable={false}
+    >
+      <DistributionCharts distributions={distributions} uid={uid} />
+    </ChartCard>
+  )
+}
+
+function DistributionCharts({
+  distributions,
+  uid,
+}: {
+  distributions: DistributionSeries[]
+  uid: string
+}) {
+  const { t } = useTranslation()
+  const runKey = useChartAnimationRunKey()
+
+  return (
+    <div className="space-y-5">
+      {distributions.map((distribution, index) => (
+        <div key={distribution.title}>
+          <div className="mb-2 flex items-center justify-between gap-3">
+            <div className="text-[10px] tracking-[0.14em] text-muted-foreground uppercase">
+              {distribution.title}
+            </div>
+            <div className="text-[10px] text-muted-foreground">
+              {distribution.data.length} {t('charts.distribution.buckets')}
             </div>
           </div>
-        ))}
-      </CardContent>
-    </Card>
+          <ChartAnimationAware>
+            {(animate) => (
+              <ChartReveal variant="bar">
+                <ResponsiveContainer
+                  key={`distribution-${runKey}-${index}`}
+                  width="100%"
+                  height={160}
+                >
+                  <BarChart data={distribution.data} margin={CHART_MARGIN}>
+                    <defs>
+                      <linearGradient
+                        id={`${uid}-distribution-${index}`}
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop offset="0%" stopColor={CHART_COLORS.cost} stopOpacity={0.9} />
+                        <stop offset="100%" stopColor={CHART_COLORS.cost} stopOpacity={0.4} />
+                      </linearGradient>
+                    </defs>
+                    <CartesianGrid
+                      strokeDasharray="3 3"
+                      stroke={CHART_COLORS.grid}
+                      opacity={0.25}
+                    />
+                    <XAxis
+                      dataKey="label"
+                      stroke={CHART_COLORS.axis}
+                      fontSize={10}
+                      tickLine={false}
+                      interval={0}
+                      angle={distribution.data.length > 5 ? -16 : 0}
+                      textAnchor={distribution.data.length > 5 ? 'end' : 'middle'}
+                      height={distribution.data.length > 5 ? 48 : 30}
+                    />
+                    <YAxis
+                      stroke={CHART_COLORS.axis}
+                      fontSize={10}
+                      tickLine={false}
+                      axisLine={false}
+                      allowDecimals={false}
+                    />
+                    <Tooltip
+                      content={<DistributionTooltip />}
+                      cursor={{ fill: 'hsl(var(--muted))', opacity: 0.15 }}
+                    />
+                    <Bar
+                      dataKey="count"
+                      radius={[6, 6, 0, 0]}
+                      fill={`url(#${uid}-distribution-${index})`}
+                      {...getBarAnimationProps(animate, index)}
+                    >
+                      {distribution.data.map((_, binIndex) => {
+                        const intensity =
+                          distribution.data.length > 1
+                            ? binIndex / (distribution.data.length - 1)
+                            : 0
+                        const opacity = 0.45 + intensity * 0.35
+                        return (
+                          <Cell
+                            key={`${distribution.title}-${binIndex}`}
+                            fill={`hsla(215, 70%, 55%, ${opacity.toFixed(2)})`}
+                          />
+                        )
+                      })}
+                    </Bar>
+                  </BarChart>
+                </ResponsiveContainer>
+              </ChartReveal>
+            )}
+          </ChartAnimationAware>
+        </div>
+      ))}
+    </div>
   )
 }
diff --git a/src/components/charts/ModelMix.tsx b/src/components/charts/ModelMix.tsx
index 6c1a216..bb2b9c9 100644
--- a/src/components/charts/ModelMix.tsx
+++ b/src/components/charts/ModelMix.tsx
@@ -10,7 +10,7 @@ import {
   Tooltip,
 } from 'recharts'
 import { ChartCard, ChartAnimationAware, ChartReveal } from './ChartCard'
-import { CHART_COLORS, CHART_MARGIN, CHART_ANIMATION } from './chart-theme'
+import { CHART_COLORS, CHART_MARGIN, getAreaAnimationProps } from './chart-theme'
 import { CHART_HELP } from '@/lib/help-content'
 import { getModelColor, normalizeModelName } from '@/lib/model-utils'
 import { coerceNumber, formatDateAxis, formatPercent } from '@/lib/formatters'
@@ -141,10 +141,7 @@ export function ModelMix({ data }: ModelMixProps) {
                       strokeOpacity={0.6}
                       fill={`url(#${id})`}
                       name={model}
-                      isAnimationActive={animate}
-                      animationBegin={CHART_ANIMATION.stagger * (index % 5)}
-                      animationDuration={CHART_ANIMATION.duration}
-                      animationEasing={CHART_ANIMATION.easing}
+                      {...getAreaAnimationProps(animate, { order: index % 5, role: 'stacked' })}
                     />
                   )
                 })}
diff --git a/src/components/charts/RequestCacheHitRateByModel.tsx b/src/components/charts/RequestCacheHitRateByModel.tsx
index 36806a7..d4f1ab3 100644
--- a/src/components/charts/RequestCacheHitRateByModel.tsx
+++ b/src/components/charts/RequestCacheHitRateByModel.tsx
@@ -16,7 +16,13 @@ import {
 } from 'recharts'
 import { ChartAnimationAware, ChartCard, ChartReveal } from './ChartCard'
 import { ChartLegend } from './ChartLegend'
-import { CHART_ANIMATION, CHART_COLORS, CHART_MARGIN } from './chart-theme'
+import {
+  CHART_COLORS,
+  CHART_MARGIN,
+  getAreaAnimationProps,
+  getBarAnimationProps,
+  getLineAnimationProps,
+} from './chart-theme'
 import { CustomTooltip } from './CustomTooltip'
 import { CHART_HELP } from '@/lib/help-content'
 import { computeCacheHitRateByModel, computeMovingAverage } from '@/lib/calculations'
@@ -54,6 +60,7 @@ export function RequestCacheHitRateByModel({
   const { t } = useTranslation()
   const uid = useId().replace(/:/g, '')
   const totalLabel = t('charts.requestCacheHitRate.total')
+  const trendRate = 'trailing7Rate' as const
   const trendLabel =
     viewMode === 'daily'
       ? t('charts.requestCacheHitRate.trailing7Rate')
@@ -189,10 +196,10 @@ export function RequestCacheHitRateByModel({
             </div>
             <div>
               <div className="text-[10px] tracking-wider text-muted-foreground uppercase">
-                {t('charts.requestCacheHitRate.trailing7Rate')}
+                {trendLabel}
               </div>
               <div className="text-lg font-semibold tabular-nums">
-                {formatRate(entry.trailing7Rate)}
+                {formatRate(entry[trendRate])}
               </div>
             </div>
           </div>
@@ -201,268 +208,266 @@ export function RequestCacheHitRateByModel({
     </div>
   )
 
-  return (
-    <ChartCard
-      title={t('charts.requestCacheHitRate.title')}
-      subtitle={t('charts.requestCacheHitRate.subtitle', {
-        total: formatRate(summary.total.totalRate),
-        trailing: formatRate(summary.total.trailing7Rate),
-      })}
-      info={CHART_HELP.requestCacheHitRate}
-      chartData={barData as unknown as Record<string, unknown>[]}
-      valueKey="totalRate"
-      valueFormatter={formatRate}
-      expandedExtra={expandedExtra}
-    >
-      {(expanded) => (
-        <>
-          <div className="mb-3 grid grid-cols-2 gap-2 text-center md:grid-cols-4">
-            <div className="rounded-lg bg-muted/20 p-2">
-              <div className="text-[9px] tracking-wider text-muted-foreground uppercase">
-                {t('charts.requestCacheHitRate.totalRate')}
-              </div>
-              <div className="text-sm font-semibold tabular-nums">
-                {formatRate(summary.total.totalRate)}
-              </div>
+  const renderCharts = (expanded: boolean) => {
+    const snapshotBarSize = expanded ? 8 : 6
+
+    return (
+      <>
+        <div className="mb-3 grid grid-cols-2 gap-2 text-center md:grid-cols-4">
+          <div className="rounded-lg bg-muted/20 p-2">
+            <div className="text-[9px] tracking-wider text-muted-foreground uppercase">
+              {t('charts.requestCacheHitRate.totalRate')}
             </div>
-            <div className="rounded-lg bg-muted/20 p-2">
-              <div className="text-[9px] tracking-wider text-muted-foreground uppercase">
-                {t('charts.requestCacheHitRate.trailing7Rate')}
-              </div>
-              <div className="text-sm font-semibold tabular-nums">
-                {formatRate(summary.total.trailing7Rate)}
-              </div>
+            <div className="text-sm font-semibold tabular-nums">
+              {formatRate(summary.total.totalRate)}
             </div>
-            <div className="rounded-lg bg-muted/20 p-2">
-              <div className="text-[9px] tracking-wider text-muted-foreground uppercase">
-                {t('charts.requestCacheHitRate.topModel')}
-              </div>
-              <div className="truncate text-sm font-semibold">{summary.topModel?.model ?? '–'}</div>
+          </div>
+          <div className="rounded-lg bg-muted/20 p-2">
+            <div className="text-[9px] tracking-wider text-muted-foreground uppercase">
+              {trendLabel}
             </div>
-            <div className="rounded-lg bg-muted/20 p-2">
-              <div className="text-[9px] tracking-wider text-muted-foreground uppercase">
-                {t('charts.requestCacheHitRate.models')}
-              </div>
-              <div className="text-sm font-semibold tabular-nums">{summary.models}</div>
+            <div className="text-sm font-semibold tabular-nums">
+              {formatRate(summary.total[trendRate])}
             </div>
           </div>
+          <div className="rounded-lg bg-muted/20 p-2">
+            <div className="text-[9px] tracking-wider text-muted-foreground uppercase">
+              {t('charts.requestCacheHitRate.topModel')}
+            </div>
+            <div className="truncate text-sm font-semibold">{summary.topModel?.model ?? '–'}</div>
+          </div>
+          <div className="rounded-lg bg-muted/20 p-2">
+            <div className="text-[9px] tracking-wider text-muted-foreground uppercase">
+              {t('charts.requestCacheHitRate.models')}
+            </div>
+            <div className="text-sm font-semibold tabular-nums">{summary.models}</div>
+          </div>
+        </div>
 
-          <div
-            className={`grid gap-4 ${expanded ? 'grid-cols-1 xl:grid-cols-[2fr_1fr]' : 'grid-cols-1 lg:grid-cols-[2fr_1fr]'}`}
-          >
-            <div>
-              <div className="mb-2 text-[10px] tracking-wider text-muted-foreground uppercase">
-                {t('charts.requestCacheHitRate.timelineHeading', { unit: periodUnit(viewMode) })}
-              </div>
-              <ChartAnimationAware>
-                {(animate) => (
-                  <ChartReveal variant="line">
-                    <ResponsiveContainer
-                      width="100%"
-                      height={expanded ? expandedLineHeight : lineHeight}
-                    >
-                      <ComposedChart data={lineData} margin={CHART_MARGIN}>
-                        <defs>
-                          <linearGradient id={`${uid}-total-rate`} x1="0" y1="0" x2="0" y2="1">
-                            <stop offset="0%" stopColor={CHART_COLORS.cost} stopOpacity={0.24} />
-                            <stop offset="100%" stopColor={CHART_COLORS.cost} stopOpacity={0} />
-                          </linearGradient>
-                        </defs>
-                        <CartesianGrid
-                          strokeDasharray="3 3"
-                          stroke={CHART_COLORS.grid}
-                          opacity={0.3}
-                        />
-                        <XAxis
-                          dataKey="date"
-                          tickFormatter={formatDateAxis}
-                          stroke={CHART_COLORS.axis}
-                          fontSize={11}
-                          tickLine={false}
-                        />
-                        <YAxis
-                          type="number"
-                          domain={[0, 100]}
-                          tickFormatter={formatRate}
-                          stroke={CHART_COLORS.axis}
-                          fontSize={11}
-                          tickLine={false}
-                          axisLine={false}
-                        />
-                        <Tooltip
-                          content={
-                            <CustomTooltip
-                              formatter={(value) => formatRate(value)}
-                              pinnedEntryNames={[t('charts.requestCacheHitRate.totalRate')]}
-                              showComputedTotal={false}
-                              hideZeroValues
-                            />
-                          }
-                          cursor={{ fill: 'hsl(var(--muted))', opacity: 0.12 }}
-                        />
-                        <Legend content={<ChartLegend />} />
-                        <Area
-                          type="monotone"
-                          dataKey="totalRate"
-                          stroke={CHART_COLORS.cost}
-                          fill={`url(#${uid}-total-rate)`}
-                          name={t('charts.requestCacheHitRate.totalRate')}
-                          strokeWidth={2}
-                          dot={false}
-                          activeDot={{
-                            r: 5,
-                            strokeWidth: 2,
-                            stroke: CHART_COLORS.cost,
-                            fill: 'hsl(var(--background))',
-                          }}
-                          isAnimationActive={animate}
-                          animationDuration={CHART_ANIMATION.duration}
-                          animationEasing={CHART_ANIMATION.easing}
-                        />
+        <div
+          className={`grid gap-4 ${expanded ? 'grid-cols-1 xl:grid-cols-[2fr_1fr]' : 'grid-cols-1 lg:grid-cols-[2fr_1fr]'}`}
+        >
+          <div>
+            <div className="mb-2 text-[10px] tracking-wider text-muted-foreground uppercase">
+              {t('charts.requestCacheHitRate.timelineHeading', { unit: periodUnit(viewMode) })}
+            </div>
+            <ChartAnimationAware>
+              {(animate) => (
+                <ChartReveal variant="line">
+                  <ResponsiveContainer
+                    width="100%"
+                    height={expanded ? expandedLineHeight : lineHeight}
+                  >
+                    <ComposedChart data={lineData} margin={CHART_MARGIN}>
+                      <defs>
+                        <linearGradient id={`${uid}-total-rate`} x1="0" y1="0" x2="0" y2="1">
+                          <stop offset="0%" stopColor={CHART_COLORS.cost} stopOpacity={0.24} />
+                          <stop offset="100%" stopColor={CHART_COLORS.cost} stopOpacity={0} />
+                        </linearGradient>
+                      </defs>
+                      <CartesianGrid
+                        strokeDasharray="3 3"
+                        stroke={CHART_COLORS.grid}
+                        opacity={0.3}
+                      />
+                      <XAxis
+                        dataKey="date"
+                        tickFormatter={formatDateAxis}
+                        stroke={CHART_COLORS.axis}
+                        fontSize={11}
+                        tickLine={false}
+                      />
+                      <YAxis
+                        type="number"
+                        domain={[0, 100]}
+                        tickFormatter={formatRate}
+                        stroke={CHART_COLORS.axis}
+                        fontSize={11}
+                        tickLine={false}
+                        axisLine={false}
+                      />
+                      <Tooltip
+                        content={
+                          <CustomTooltip
+                            formatter={(value) => formatRate(value)}
+                            pinnedEntryNames={[t('charts.requestCacheHitRate.totalRate')]}
+                            showComputedTotal={false}
+                            hideZeroValues
+                          />
+                        }
+                        cursor={{ fill: 'hsl(var(--muted))', opacity: 0.12 }}
+                      />
+                      <Legend content={<ChartLegend />} />
+                      <Area
+                        type="monotone"
+                        dataKey="totalRate"
+                        stroke={CHART_COLORS.cost}
+                        fill={`url(#${uid}-total-rate)`}
+                        name={t('charts.requestCacheHitRate.totalRate')}
+                        strokeWidth={2}
+                        dot={false}
+                        activeDot={{
+                          r: 5,
+                          strokeWidth: 2,
+                          stroke: CHART_COLORS.cost,
+                          fill: 'hsl(var(--background))',
+                        }}
+                        {...getAreaAnimationProps(animate)}
+                      />
+                      <Line
+                        type="monotone"
+                        dataKey="totalRate_ma7"
+                        stroke={CHART_COLORS.ma7}
+                        name={trendLabel}
+                        dot={false}
+                        strokeWidth={2}
+                        strokeDasharray="5 5"
+                        connectNulls
+                        {...getLineAnimationProps(animate, { role: 'secondary' })}
+                      />
+                      {lineSeries.map((series, index) => (
                         <Line
+                          key={series}
                           type="monotone"
-                          dataKey="totalRate_ma7"
-                          stroke={CHART_COLORS.ma7}
-                          name={trendLabel}
+                          dataKey={series}
+                          stroke={getModelColor(series)}
+                          name={series}
                           dot={false}
-                          strokeWidth={2}
-                          strokeDasharray="5 5"
+                          strokeWidth={1.8}
                           connectNulls
-                          isAnimationActive={animate}
-                          animationBegin={CHART_ANIMATION.stagger}
-                          animationDuration={CHART_ANIMATION.slowDuration}
-                          animationEasing={CHART_ANIMATION.easing}
+                          {...getLineAnimationProps(animate, {
+                            order: index + 2,
+                            role: 'secondary',
+                          })}
                         />
-                        {lineSeries.map((series, index) => (
-                          <Line
-                            key={series}
-                            type="monotone"
-                            dataKey={series}
-                            stroke={getModelColor(series)}
-                            name={series}
-                            dot={false}
-                            strokeWidth={1.8}
-                            connectNulls
-                            isAnimationActive={animate}
-                            animationBegin={CHART_ANIMATION.stagger * (index + 2)}
-                            animationDuration={CHART_ANIMATION.slowDuration}
-                            animationEasing={CHART_ANIMATION.easing}
-                          />
-                        ))}
-                      </ComposedChart>
-                    </ResponsiveContainer>
-                  </ChartReveal>
-                )}
-              </ChartAnimationAware>
-            </div>
+                      ))}
+                    </ComposedChart>
+                  </ResponsiveContainer>
+                </ChartReveal>
+              )}
+            </ChartAnimationAware>
+          </div>
 
-            <div>
-              <div className="mb-2 text-[10px] tracking-wider text-muted-foreground uppercase">
-                {t('charts.requestCacheHitRate.modelBreakdownHeading')}
-              </div>
-              <ChartAnimationAware>
-                {(animate) => (
-                  <ChartReveal variant="line">
-                    <ResponsiveContainer
-                      width="100%"
-                      height={expanded ? expandedBarHeight : compactBarHeight}
+          <div>
+            <div className="mb-2 text-[10px] tracking-wider text-muted-foreground uppercase">
+              {t('charts.requestCacheHitRate.modelBreakdownHeading')}
+            </div>
+            <ChartAnimationAware>
+              {(animate) => (
+                <ChartReveal variant="line">
+                  <ResponsiveContainer
+                    width="100%"
+                    height={expanded ? expandedBarHeight : compactBarHeight}
+                  >
+                    <BarChart
+                      data={barData}
+                      layout="vertical"
+                      margin={{ ...CHART_MARGIN, left: expanded ? 30 : 20, right: 8 }}
+                      barCategoryGap={expanded ? 14 : 10}
+                      barSize={snapshotBarSize}
+                      maxBarSize={snapshotBarSize}
                     >
-                      <BarChart
-                        data={barData}
-                        layout="vertical"
-                        margin={{ ...CHART_MARGIN, left: expanded ? 30 : 20, right: 8 }}
-                        barCategoryGap={expanded ? 14 : 10}
+                      <CartesianGrid
+                        strokeDasharray="3 3"
+                        stroke={CHART_COLORS.grid}
+                        opacity={0.22}
+                        horizontal={false}
+                      />
+                      <XAxis
+                        type="number"
+                        domain={[0, 100]}
+                        tickFormatter={formatRate}
+                        stroke={CHART_COLORS.axis}
+                        fontSize={10}
+                        tickLine={false}
+                        axisLine={false}
+                      />
+                      <YAxis
+                        type="category"
+                        dataKey="model"
+                        stroke={CHART_COLORS.axis}
+                        fontSize={10}
+                        tickLine={false}
+                        axisLine={false}
+                        width={expanded ? 126 : 108}
+                      />
+                      <Tooltip
+                        content={
+                          <CustomTooltip
+                            formatter={(value) => formatRate(value)}
+                            pinnedEntryNames={[
+                              t('charts.requestCacheHitRate.totalRate'),
+                              trendLabel,
+                            ]}
+                            showComputedTotal={false}
+                          />
+                        }
+                        cursor={{ fill: 'hsl(var(--muted))', opacity: 0.12 }}
+                      />
+                      <Legend content={<ChartLegend />} />
+                      <Bar
+                        dataKey="totalRate"
+                        name={t('charts.requestCacheHitRate.totalRate')}
+                        radius={[0, 4, 4, 0]}
+                        fill={CHART_COLORS.cacheRead}
+                        {...getBarAnimationProps(animate)}
                       >
-                        <CartesianGrid
-                          strokeDasharray="3 3"
-                          stroke={CHART_COLORS.grid}
-                          opacity={0.22}
-                          horizontal={false}
-                        />
-                        <XAxis
-                          type="number"
-                          domain={[0, 100]}
-                          tickFormatter={formatRate}
-                          stroke={CHART_COLORS.axis}
-                          fontSize={10}
-                          tickLine={false}
-                          axisLine={false}
-                        />
-                        <YAxis
-                          type="category"
-                          dataKey="model"
-                          stroke={CHART_COLORS.axis}
-                          fontSize={10}
-                          tickLine={false}
-                          axisLine={false}
-                          width={expanded ? 126 : 108}
-                        />
-                        <Tooltip
-                          content={
-                            <CustomTooltip
-                              formatter={(value) => formatRate(value)}
-                              pinnedEntryNames={[
-                                t('charts.requestCacheHitRate.totalRate'),
-                                t('charts.requestCacheHitRate.trailing7Rate'),
-                              ]}
-                              showComputedTotal={false}
-                            />
-                          }
-                          cursor={{ fill: 'hsl(var(--muted))', opacity: 0.12 }}
-                        />
-                        <Legend content={<ChartLegend />} />
-                        <Bar
-                          dataKey="totalRate"
-                          name={t('charts.requestCacheHitRate.totalRate')}
-                          radius={[0, 4, 4, 0]}
-                          fill={CHART_COLORS.cacheRead}
-                          isAnimationActive={animate}
-                          animationDuration={CHART_ANIMATION.duration}
-                          animationEasing={CHART_ANIMATION.easing}
-                        >
-                          {barData.map((entry) => (
-                            <Cell
-                              key={`${entry.model}-total`}
-                              fill={
-                                entry.model === totalLabel
-                                  ? CHART_COLORS.cost
-                                  : CHART_COLORS.cacheRead
-                              }
-                              fillOpacity={entry.model === totalLabel ? 0.95 : 0.82}
-                            />
-                          ))}
-                        </Bar>
-                        <Bar
-                          dataKey="trailing7Rate"
-                          name={t('charts.requestCacheHitRate.trailing7Rate')}
-                          radius={[0, 4, 4, 0]}
-                          fill={CHART_COLORS.ma7}
-                          isAnimationActive={animate}
-                          animationBegin={CHART_ANIMATION.stagger}
-                          animationDuration={CHART_ANIMATION.slowDuration}
-                          animationEasing={CHART_ANIMATION.easing}
-                        >
-                          {barData.map((entry) => (
-                            <Cell
-                              key={`${entry.model}-recent`}
-                              fill={
-                                entry.model === totalLabel
-                                  ? CHART_COLORS.cumulative
-                                  : CHART_COLORS.ma7
-                              }
-                              fillOpacity={entry.model === totalLabel ? 0.95 : 0.8}
-                            />
-                          ))}
-                        </Bar>
-                      </BarChart>
-                    </ResponsiveContainer>
-                  </ChartReveal>
-                )}
-              </ChartAnimationAware>
-            </div>
+                        {barData.map((entry) => (
+                          <Cell
+                            key={`${entry.model}-total`}
+                            fill={
+                              entry.model === totalLabel
+                                ? CHART_COLORS.cost
+                                : CHART_COLORS.cacheRead
+                            }
+                            fillOpacity={entry.model === totalLabel ? 0.95 : 0.82}
+                          />
+                        ))}
+                      </Bar>
+                      <Bar
+                        dataKey={trendRate}
+                        name={trendLabel}
+                        radius={[0, 4, 4, 0]}
+                        fill={CHART_COLORS.ma7}
+                        {...getBarAnimationProps(animate, 1)}
+                      >
+                        {barData.map((entry) => (
+                          <Cell
+                            key={`${entry.model}-recent`}
+                            fill={
+                              entry.model === totalLabel
+                                ? CHART_COLORS.cumulative
+                                : CHART_COLORS.ma7
+                            }
+                            fillOpacity={entry.model === totalLabel ? 0.95 : 0.8}
+                          />
+                        ))}
+                      </Bar>
+                    </BarChart>
+                  </ResponsiveContainer>
+                </ChartReveal>
+              )}
+            </ChartAnimationAware>
           </div>
-        </>
-      )}
+        </div>
+      </>
+    )
+  }
+
+  return (
+    <ChartCard
+      title={t('charts.requestCacheHitRate.title')}
+      subtitle={t('charts.requestCacheHitRate.subtitle', {
+        total: formatRate(summary.total.totalRate),
+        trailing: formatRate(summary.total[trendRate]),
+      })}
+      info={CHART_HELP.requestCacheHitRate}
+      chartData={barData as unknown as Record<string, unknown>[]}
+      valueKey="totalRate"
+      valueFormatter={formatRate}
+      expandedExtra={expandedExtra}
+    >
+      {renderCharts}
     </ChartCard>
   )
 }
diff --git a/src/components/charts/RequestsOverTime.tsx b/src/components/charts/RequestsOverTime.tsx
index 790f69f..7316926 100644
--- a/src/components/charts/RequestsOverTime.tsx
+++ b/src/components/charts/RequestsOverTime.tsx
@@ -17,7 +17,13 @@ import {
 import { ChartCard, ChartAnimationAware, ChartReveal } from './ChartCard'
 import { ChartLegend } from './ChartLegend'
 import { CustomTooltip } from './CustomTooltip'
-import { CHART_COLORS, CHART_MARGIN, CHART_ANIMATION } from './chart-theme'
+import {
+  CHART_COLORS,
+  CHART_MARGIN,
+  getAreaAnimationProps,
+  getLineAnimationProps,
+  getRadialAnimationProps,
+} from './chart-theme'
 import { FormattedValue } from '@/components/ui/formatted-value'
 import { formatDateAxis, periodUnit } from '@/lib/formatters'
 import { getCurrentLocale } from '@/lib/i18n'
@@ -172,9 +178,7 @@ export function RequestsOverTime({ data, viewMode = 'daily', onClickDay }: Reque
                     strokeWidth={2.5}
                     strokeDasharray="6 4"
                     connectNulls
-                    isAnimationActive={animate}
-                    animationBegin={0}
-                    animationDuration={CHART_ANIMATION.slowDuration}
+                    {...getLineAnimationProps(animate, { role: 'secondary' })}
                   />
                   {(summary?.topModels ?? []).map(([model], index) => (
                     <Line
@@ -187,9 +191,7 @@ export function RequestsOverTime({ data, viewMode = 'daily', onClickDay }: Reque
                       strokeWidth={2}
                       strokeDasharray="5 4"
                       connectNulls
-                      isAnimationActive={animate}
-                      animationBegin={CHART_ANIMATION.stagger * (index % 6)}
-                      animationDuration={CHART_ANIMATION.slowDuration}
+                      {...getLineAnimationProps(animate, { order: index % 6, role: 'secondary' })}
                     />
                   ))}
                 </ComposedChart>
@@ -369,8 +371,7 @@ export function RequestsOverTime({ data, viewMode = 'daily', onClickDay }: Reque
                               stroke: CHART_COLORS.cumulative,
                               fill: 'hsl(var(--background))',
                             }}
-                            isAnimationActive={animate}
-                            animationDuration={CHART_ANIMATION.duration}
+                            {...getAreaAnimationProps(animate)}
                           />
                           <Line
                             type="monotone"
@@ -381,9 +382,7 @@ export function RequestsOverTime({ data, viewMode = 'daily', onClickDay }: Reque
                             strokeWidth={2.2}
                             strokeDasharray="5 5"
                             connectNulls
-                            isAnimationActive={animate}
-                            animationBegin={CHART_ANIMATION.stagger}
-                            animationDuration={CHART_ANIMATION.slowDuration}
+                            {...getLineAnimationProps(animate, { role: 'secondary' })}
                           />
                           {visibleModels.map((model, index) => (
                             <Line
@@ -394,9 +393,7 @@ export function RequestsOverTime({ data, viewMode = 'daily', onClickDay }: Reque
                               name={model}
                               dot={false}
                               strokeWidth={1.6}
-                              isAnimationActive={animate}
-                              animationBegin={CHART_ANIMATION.stagger * ((index % 5) + 1)}
-                              animationDuration={CHART_ANIMATION.duration}
+                              {...getLineAnimationProps(animate, { order: (index % 5) + 1 })}
                             />
                           ))}
                         </ComposedChart>
@@ -421,10 +418,7 @@ export function RequestsOverTime({ data, viewMode = 'daily', onClickDay }: Reque
                             paddingAngle={2}
                             dataKey="value"
                             nameKey="name"
-                            isAnimationActive={animate}
-                            animationDuration={CHART_ANIMATION.duration}
-                            animationBegin={CHART_ANIMATION.stagger}
-                            animationEasing={CHART_ANIMATION.easing}
+                            {...getRadialAnimationProps(animate)}
                           >
                             {donutData.map((entry) => (
                               <Cell key={entry.name} fill={getModelColor(entry.name)} />
@@ -437,18 +431,16 @@ export function RequestsOverTime({ data, viewMode = 'daily', onClickDay }: Reque
                             content={<CustomTooltip formatter={(v) => formatRequests(v)} />}
                           />
                           <Legend
-                            wrapperStyle={{
-                              fontSize: '12px',
-                              paddingTop: expanded ? '18px' : '8px',
-                            }}
-                            formatter={(value: string) => {
-                              const entry = donutData.find((d) => d.name === value)
-                              return (
-                                <span className="text-xs text-foreground">
-                                  {value} ({entry ? formatRequests(entry.value) : ''})
-                                </span>
-                              )
-                            }}
+                            content={
+                              <ChartLegend
+                                className={expanded ? 'pt-[18px]' : 'pt-2'}
+                                renderLabel={(entry: { value?: string | number }) => {
+                                  const value = String(entry.value ?? '')
+                                  const segment = donutData.find((item) => item.name === value)
+                                  return `${value} (${segment ? formatRequests(segment.value) : ''})`
+                                }}
+                              />
+                            }
                           />
                         </PieChart>
                       </ResponsiveContainer>
diff --git a/src/components/charts/TokenEfficiency.tsx b/src/components/charts/TokenEfficiency.tsx
index a8dc871..115e154 100644
--- a/src/components/charts/TokenEfficiency.tsx
+++ b/src/components/charts/TokenEfficiency.tsx
@@ -13,7 +13,12 @@ import {
 } from 'recharts'
 import { ChartCard, ChartAnimationAware, ChartReveal } from './ChartCard'
 import { CustomTooltip } from './CustomTooltip'
-import { CHART_COLORS, CHART_MARGIN, CHART_ANIMATION } from './chart-theme'
+import {
+  CHART_COLORS,
+  CHART_MARGIN,
+  getAreaAnimationProps,
+  getLineAnimationProps,
+} from './chart-theme'
 import { computeMovingAverage } from '@/lib/calculations'
 import { CHART_HELP } from '@/lib/help-content'
 import { coerceNumber, formatCurrency, formatDateAxis } from '@/lib/formatters'
@@ -104,8 +109,7 @@ export function TokenEfficiency({ data }: TokenEfficiencyProps) {
                   strokeWidth={1.5}
                   name={t('charts.tokenEfficiency.series')}
                   dot={false}
-                  isAnimationActive={animate}
-                  animationDuration={CHART_ANIMATION.duration}
+                  {...getAreaAnimationProps(animate)}
                 />
                 <Line
                   type="monotone"
@@ -116,9 +120,7 @@ export function TokenEfficiency({ data }: TokenEfficiencyProps) {
                   dot={false}
                   connectNulls
                   name={t('charts.tokenEfficiency.movingAverage')}
-                  isAnimationActive={animate}
-                  animationBegin={CHART_ANIMATION.stagger}
-                  animationDuration={CHART_ANIMATION.slowDuration}
+                  {...getLineAnimationProps(animate, { role: 'secondary' })}
                 />
               </ComposedChart>
             </ResponsiveContainer>
diff --git a/src/components/charts/TokenTypes.tsx b/src/components/charts/TokenTypes.tsx
index 2b7d89d..5fb5dc3 100644
--- a/src/components/charts/TokenTypes.tsx
+++ b/src/components/charts/TokenTypes.tsx
@@ -1,8 +1,9 @@
 import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip, Legend } from 'recharts'
 import { useTranslation } from 'react-i18next'
 import { ChartCard, ChartAnimationAware, ChartReveal } from './ChartCard'
+import { ChartLegend } from './ChartLegend'
 import { CustomTooltip } from './CustomTooltip'
-import { CHART_COLORS, CHART_ANIMATION } from './chart-theme'
+import { CHART_COLORS, getRadialAnimationProps } from './chart-theme'
 import { formatTokens } from '@/lib/formatters'
 import { CHART_HELP } from '@/lib/help-content'
 
@@ -76,10 +77,7 @@ export function TokenTypes({ data }: TokenTypesProps) {
                       paddingAngle={2}
                       dataKey="value"
                       nameKey="name"
-                      isAnimationActive={animate}
-                      animationDuration={CHART_ANIMATION.duration}
-                      animationBegin={CHART_ANIMATION.stagger}
-                      animationEasing={CHART_ANIMATION.easing}
+                      {...getRadialAnimationProps(animate)}
                     >
                       {data.map((entry) => (
                         <Cell
@@ -91,15 +89,16 @@ export function TokenTypes({ data }: TokenTypesProps) {
                     </Pie>
                     <Tooltip content={<CustomTooltip formatter={(v) => formatTokens(v)} />} />
                     <Legend
-                      wrapperStyle={{ fontSize: '12px', paddingTop: expanded ? '22px' : '8px' }}
-                      formatter={(value: string) => {
-                        const entry = data.find((d) => d.name === value)
-                        return (
-                          <span className="text-xs text-foreground">
-                            {value} ({entry ? formatTokens(entry.value) : ''})
-                          </span>
-                        )
-                      }}
+                      content={
+                        <ChartLegend
+                          className={expanded ? 'pt-[22px]' : 'pt-2'}
+                          renderLabel={(entry: { value?: string | number }) => {
+                            const value = String(entry.value ?? '')
+                            const segment = data.find((item) => item.name === value)
+                            return `${value} (${segment ? formatTokens(segment.value) : ''})`
+                          }}
+                        />
+                      }
                     />
                   </PieChart>
                 </ResponsiveContainer>
diff --git a/src/components/charts/TokensOverTime.tsx b/src/components/charts/TokensOverTime.tsx
index ce6b125..327533e 100644
--- a/src/components/charts/TokensOverTime.tsx
+++ b/src/components/charts/TokensOverTime.tsx
@@ -12,7 +12,12 @@ import {
 } from 'recharts'
 import { ChartCard, ChartAnimationAware, ChartReveal } from './ChartCard'
 import { CustomTooltip } from './CustomTooltip'
-import { CHART_COLORS, CHART_MARGIN, CHART_ANIMATION } from './chart-theme'
+import {
+  CHART_COLORS,
+  CHART_MARGIN,
+  getAreaAnimationProps,
+  getLineAnimationProps,
+} from './chart-theme'
 import { formatTokens, formatDateAxis } from '@/lib/formatters'
 import { FormattedValue } from '@/components/ui/formatted-value'
 import { CHART_HELP } from '@/lib/help-content'
@@ -123,8 +128,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                   fill={`url(#${gid('total')})`}
                   strokeWidth={1.5}
                   name={t('charts.tokensOverTime.totalTokens')}
-                  isAnimationActive={animate}
-                  animationDuration={CHART_ANIMATION.duration}
+                  {...getAreaAnimationProps(animate)}
                 />
                 <Line
                   type="monotone"
@@ -135,9 +139,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                   dot={false}
                   connectNulls
                   name={t('charts.tokensOverTime.movingAverage')}
-                  isAnimationActive={animate}
-                  animationBegin={CHART_ANIMATION.stagger}
-                  animationDuration={CHART_ANIMATION.slowDuration}
+                  {...getLineAnimationProps(animate, { role: 'secondary' })}
                 />
               </ComposedChart>
             </ResponsiveContainer>
@@ -236,8 +238,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                     fill={`url(#${gid('cacheRead')})`}
                     strokeWidth={1.5}
                     name="Cache Read"
-                    isAnimationActive={animate}
-                    animationDuration={CHART_ANIMATION.duration}
+                    {...getAreaAnimationProps(animate)}
                   />
                   <Area
                     type="monotone"
@@ -246,8 +247,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                     fill={`url(#${gid('cacheWrite')})`}
                     strokeWidth={1.5}
                     name="Cache Write"
-                    isAnimationActive={animate}
-                    animationDuration={CHART_ANIMATION.duration}
+                    {...getAreaAnimationProps(animate, { order: 1, role: 'stacked' })}
                   />
                   <Line
                     type="monotone"
@@ -258,9 +258,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                     dot={false}
                     connectNulls
                     name={`Cache Read ${t('charts.tokensOverTime.averageSuffix')}`}
-                    isAnimationActive={animate}
-                    animationBegin={CHART_ANIMATION.stagger}
-                    animationDuration={CHART_ANIMATION.slowDuration}
+                    {...getLineAnimationProps(animate, { role: 'secondary' })}
                   />
                   <Line
                     type="monotone"
@@ -271,9 +269,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                     dot={false}
                     connectNulls
                     name={`Cache Write ${t('charts.tokensOverTime.averageSuffix')}`}
-                    isAnimationActive={animate}
-                    animationBegin={CHART_ANIMATION.stagger * 2}
-                    animationDuration={CHART_ANIMATION.slowDuration}
+                    {...getLineAnimationProps(animate, { order: 1, role: 'secondary' })}
                   />
                 </ComposedChart>
               </ResponsiveContainer>
@@ -329,8 +325,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                     fill={`url(#${gid('output')})`}
                     strokeWidth={1.5}
                     name="Output"
-                    isAnimationActive={animate}
-                    animationDuration={CHART_ANIMATION.duration}
+                    {...getAreaAnimationProps(animate)}
                   />
                   <Area
                     type="monotone"
@@ -339,8 +334,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                     fill={`url(#${gid('input')})`}
                     strokeWidth={1.5}
                     name="Input"
-                    isAnimationActive={animate}
-                    animationDuration={CHART_ANIMATION.duration}
+                    {...getAreaAnimationProps(animate, { order: 1, role: 'stacked' })}
                   />
                   <Line
                     type="monotone"
@@ -351,9 +345,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                     dot={false}
                     connectNulls
                     name={`Output ${t('charts.tokensOverTime.averageSuffix')}`}
-                    isAnimationActive={animate}
-                    animationBegin={CHART_ANIMATION.stagger}
-                    animationDuration={CHART_ANIMATION.slowDuration}
+                    {...getLineAnimationProps(animate, { role: 'secondary' })}
                   />
                   <Line
                     type="monotone"
@@ -364,9 +356,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                     dot={false}
                     connectNulls
                     name={`Input ${t('charts.tokensOverTime.averageSuffix')}`}
-                    isAnimationActive={animate}
-                    animationBegin={CHART_ANIMATION.stagger * 2}
-                    animationDuration={CHART_ANIMATION.slowDuration}
+                    {...getLineAnimationProps(animate, { order: 1, role: 'secondary' })}
                   />
                 </ComposedChart>
               </ResponsiveContainer>
@@ -418,8 +408,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                     fill={`url(#${gid('thinking')})`}
                     strokeWidth={1.5}
                     name="Thinking"
-                    isAnimationActive={animate}
-                    animationDuration={CHART_ANIMATION.duration}
+                    {...getAreaAnimationProps(animate)}
                   />
                   <Line
                     type="monotone"
@@ -430,9 +419,7 @@ export function TokensOverTime({ data, onClickDay }: TokensOverTimeProps) {
                     dot={false}
                     connectNulls
                     name={`Thinking ${t('charts.tokensOverTime.averageSuffix')}`}
-                    isAnimationActive={animate}
-                    animationBegin={CHART_ANIMATION.stagger}
-                    animationDuration={CHART_ANIMATION.slowDuration}
+                    {...getLineAnimationProps(animate, { role: 'secondary' })}
                   />
                 </ComposedChart>
               </ResponsiveContainer>
diff --git a/src/components/charts/chart-theme.ts b/src/components/charts/chart-theme.ts
index f17ccb1..ab7617a 100644
--- a/src/components/charts/chart-theme.ts
+++ b/src/components/charts/chart-theme.ts
@@ -18,10 +18,85 @@ export const CHART_MARGIN = { top: 5, right: 10, left: 10, bottom: 5 }
 
 /** Defines the shared chart animation timings. */
 export const CHART_ANIMATION = {
-  duration: 800,
+  duration: 1290,
   easing: 'ease-out' as const,
-  stagger: 140,
-  slowDuration: 1200,
+  stagger: 120,
+  slowDuration: 1560,
+  chartStartDelay: 285,
+  barDuration: 930,
+  radialDuration: 1230,
+  revealDuration: 780,
+}
+
+type SeriesRole = 'primary' | 'secondary' | 'stacked'
+
+/** Builds the shared animation props for line-like series. */
+export function getLineAnimationProps(
+  active: boolean,
+  {
+    order = 0,
+    role = 'primary',
+  }: {
+    order?: number
+    role?: SeriesRole
+  } = {},
+) {
+  const delayOffset =
+    role === 'secondary' ? 140 + order * CHART_ANIMATION.stagger : order * CHART_ANIMATION.stagger
+
+  return {
+    isAnimationActive: active,
+    animationBegin: CHART_ANIMATION.chartStartDelay + delayOffset,
+    animationDuration:
+      role === 'secondary' ? CHART_ANIMATION.slowDuration : CHART_ANIMATION.duration,
+    animationEasing: CHART_ANIMATION.easing,
+  }
+}
+
+/** Builds the shared animation props for area-like series. */
+export function getAreaAnimationProps(
+  active: boolean,
+  {
+    order = 0,
+    role = 'primary',
+  }: {
+    order?: number
+    role?: SeriesRole
+  } = {},
+) {
+  return {
+    ...getLineAnimationProps(active, { order, role }),
+  }
+}
+
+/** Builds the shared animation props for bar-like series. */
+export function getBarAnimationProps(active: boolean, order = 0) {
+  return {
+    isAnimationActive: active,
+    animationBegin: CHART_ANIMATION.chartStartDelay + order * 90,
+    animationDuration: CHART_ANIMATION.barDuration,
+    animationEasing: CHART_ANIMATION.easing,
+  }
+}
+
+/** Builds the shared animation props for donut/pie/radial series. */
+export function getRadialAnimationProps(active: boolean, order = 0) {
+  return {
+    isAnimationActive: active,
+    animationBegin: CHART_ANIMATION.chartStartDelay + 20 + order * 80,
+    animationDuration: CHART_ANIMATION.radialDuration,
+    animationEasing: CHART_ANIMATION.easing,
+  }
+}
+
+/** Builds the shared animation props for scatter-like series. */
+export function getScatterAnimationProps(active: boolean, delayOffsetMs = 0) {
+  return {
+    isAnimationActive: active,
+    animationBegin: CHART_ANIMATION.chartStartDelay + delayOffsetMs,
+    animationDuration: CHART_ANIMATION.revealDuration,
+    animationEasing: CHART_ANIMATION.easing,
+  }
 }
 
 /** Generates a CSS-safe gradient id from an arbitrary name. */
diff --git a/src/components/dashboard/DashboardMotion.tsx b/src/components/dashboard/DashboardMotion.tsx
new file mode 100644
index 0000000..d8ab50a
--- /dev/null
+++ b/src/components/dashboard/DashboardMotion.tsx
@@ -0,0 +1,430 @@
+import {
+  useCallback,
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type RefObject,
+  type ReactNode,
+} from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+import { cn } from '@/lib/cn'
+import { useShouldReduceMotion } from '@/lib/motion'
+
+/** Defines the shared dashboard motion timings for section reveal and child chart orchestration. */
+export const DASHBOARD_MOTION = {
+  sectionPreloadMargin: '0px 0px 45% 0px',
+  sectionRevealAmount: 0.14,
+  sectionRevealOffset: 12,
+  sectionRevealDuration: 0.6,
+  sectionRevealEase: [0.22, 1, 0.36, 1] as const,
+  placeholderFadeDuration: 0.34,
+  itemRevealAmount: 0.24,
+  itemRevealOffset: 8,
+  itemRevealDuration: 0.42,
+  itemStaggerMs: 105,
+  chartStartDelayMs: 285,
+  meterStartDelayMs: 375,
+  meterDurationMs: 960,
+}
+
+interface DashboardSectionMotionState {
+  sectionVisible: boolean
+  chartStartDelayMs: number
+  meterStartDelayMs: number
+  shouldReduceMotion: boolean
+}
+
+const DashboardSectionMotionContext = createContext<DashboardSectionMotionState | null>(null)
+
+/** Returns the current dashboard section motion state when available. */
+export function useDashboardSectionMotion() {
+  return useContext(DashboardSectionMotionContext)
+}
+
+interface DashboardElementMotionOptions {
+  amount?: number
+  kind?: 'chart' | 'meter' | 'item'
+  order?: number
+  delayMs?: number
+}
+
+interface DashboardElementMotionState {
+  active: boolean
+  runKey: number
+  delayMs: number
+  shouldReduceMotion: boolean
+}
+
+function useElementInView<T extends Element>(ref: RefObject<T | null>, amount: number) {
+  const [isInView, setIsInView] = useState(typeof IntersectionObserver === 'undefined')
+
+  useEffect(() => {
+    if (typeof IntersectionObserver === 'undefined') {
+      setIsInView(true)
+      return
+    }
+
+    if (isInView) return
+
+    const element = ref.current
+    if (!element) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0]
+        if (entry?.isIntersecting) {
+          setIsInView(true)
+          observer.disconnect()
+        }
+      },
+      { threshold: amount },
+    )
+
+    observer.observe(element)
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [amount, isInView, ref])
+
+  return isInView
+}
+
+/** Tracks one dashboard element and only activates motion once the element itself is visible. */
+export function useDashboardElementMotion<T extends Element>(
+  ref: RefObject<T | null>,
+  {
+    amount = DASHBOARD_MOTION.itemRevealAmount,
+    kind = 'item',
+    order = 0,
+    delayMs,
+  }: DashboardElementMotionOptions = {},
+): DashboardElementMotionState {
+  const sectionMotion = useDashboardSectionMotion()
+  const shouldReduceMotion = useShouldReduceMotion()
+  const observerMissing = typeof IntersectionObserver === 'undefined'
+  const isInView = useElementInView(ref, amount)
+  const active = (sectionMotion?.sectionVisible ?? true) && (observerMissing ? true : isInView)
+  const [runKey, setRunKey] = useState(0)
+  const previousActiveRef = useRef(false)
+
+  useEffect(() => {
+    if (active && !previousActiveRef.current) {
+      setRunKey((current) => current + 1)
+    }
+    previousActiveRef.current = active
+  }, [active])
+
+  const baseDelayMs =
+    delayMs ??
+    (kind === 'meter'
+      ? (sectionMotion?.meterStartDelayMs ?? DASHBOARD_MOTION.meterStartDelayMs)
+      : (sectionMotion?.chartStartDelayMs ?? DASHBOARD_MOTION.chartStartDelayMs))
+
+  return {
+    active: shouldReduceMotion ? true : active,
+    runKey,
+    delayMs: baseDelayMs + order * DASHBOARD_MOTION.itemStaggerMs,
+    shouldReduceMotion,
+  }
+}
+
+interface DashboardMotionItemProps {
+  children: ReactNode
+  className?: string
+  order?: number
+  delayMs?: number
+  amount?: number
+  'data-testid'?: string
+}
+
+/** Reveals one dashboard child element with the shared timing policy. */
+export function DashboardMotionItem({
+  children,
+  className,
+  order = 0,
+  delayMs,
+  amount,
+  'data-testid': dataTestId,
+}: DashboardMotionItemProps) {
+  const itemRef = useRef<HTMLDivElement | null>(null)
+  const itemMotion = useDashboardElementMotion(itemRef, {
+    kind: 'item',
+    order,
+    ...(delayMs !== undefined ? { delayMs } : {}),
+    ...(amount !== undefined ? { amount } : {}),
+  })
+
+  useEffect(() => {
+    const element = itemRef.current
+    if (!element) return
+
+    const focusableElements = element.querySelectorAll<HTMLElement>(
+      'a[href], button, input, select, textarea, [tabindex]',
+    )
+
+    focusableElements.forEach((focusable) => {
+      if (!itemMotion.active) {
+        if (!focusable.hasAttribute('data-dashboard-motion-tabindex')) {
+          focusable.setAttribute(
+            'data-dashboard-motion-tabindex',
+            focusable.getAttribute('tabindex') ?? '',
+          )
+        }
+        focusable.tabIndex = -1
+        return
+      }
+
+      if (!focusable.hasAttribute('data-dashboard-motion-tabindex')) return
+
+      const originalTabIndex = focusable.getAttribute('data-dashboard-motion-tabindex')
+      if (originalTabIndex) {
+        focusable.setAttribute('tabindex', originalTabIndex)
+      } else {
+        focusable.removeAttribute('tabindex')
+      }
+      focusable.removeAttribute('data-dashboard-motion-tabindex')
+    })
+  }, [itemMotion.active])
+
+  if (itemMotion.shouldReduceMotion) {
+    return (
+      <div ref={itemRef} className={className} data-testid={dataTestId}>
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <motion.div
+      ref={itemRef}
+      className={className}
+      data-testid={dataTestId}
+      aria-hidden={!itemMotion.active}
+      {...(!itemMotion.active ? { style: { pointerEvents: 'none' as const } } : {})}
+      initial={false}
+      animate={
+        itemMotion.active
+          ? { opacity: 1, y: 0 }
+          : { opacity: 0, y: DASHBOARD_MOTION.itemRevealOffset }
+      }
+      transition={{
+        duration: DASHBOARD_MOTION.itemRevealDuration,
+        delay: itemMotion.active ? itemMotion.delayMs / 1000 : 0,
+        ease: DASHBOARD_MOTION.sectionRevealEase,
+      }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+interface AnimatedDashboardSectionProps {
+  id: string
+  children: ReactNode
+  className?: string
+  contentClassName?: string
+  placeholderClassName?: string
+  eager?: boolean
+  onPreload?: (() => void | Promise<unknown>) | undefined
+}
+
+/** Gates one dashboard section by viewport visibility and exposes motion timing to descendants. */
+export function AnimatedDashboardSection({
+  id,
+  children,
+  className,
+  contentClassName,
+  placeholderClassName,
+  eager = false,
+  onPreload,
+}: AnimatedDashboardSectionProps) {
+  const sectionRef = useRef<HTMLElement | null>(null)
+  const hasTriggeredPreloadRef = useRef(false)
+  const preloadPromiseRef = useRef<Promise<unknown> | null>(null)
+  const isMountedRef = useRef(true)
+  const shouldReduceMotion = useShouldReduceMotion()
+  const [contentPrepared, setContentPrepared] = useState(eager)
+  const [sectionVisible, setSectionVisible] = useState(eager)
+
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false
+    }
+  }, [])
+
+  const triggerPreload = useCallback(() => {
+    if (hasTriggeredPreloadRef.current) return preloadPromiseRef.current
+
+    hasTriggeredPreloadRef.current = true
+
+    if (!onPreload) {
+      setContentPrepared(true)
+      const preloadTask = Promise.resolve()
+      preloadPromiseRef.current = preloadTask
+      return preloadTask
+    }
+
+    const preloadTask = Promise.resolve()
+      .then(() => onPreload())
+      .catch(() => undefined)
+      .finally(() => {
+        if (isMountedRef.current) {
+          setContentPrepared(true)
+        }
+      })
+
+    preloadPromiseRef.current = preloadTask
+    return preloadTask
+  }, [onPreload])
+
+  useEffect(() => {
+    if (eager) {
+      void triggerPreload()
+      setSectionVisible(true)
+      return
+    }
+
+    const element = sectionRef.current
+    if (!element || typeof IntersectionObserver === 'undefined') {
+      void triggerPreload()
+      setSectionVisible(true)
+      return
+    }
+
+    const preloadObserver = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0]
+        if (entry?.isIntersecting) {
+          void triggerPreload()
+          preloadObserver.disconnect()
+        }
+      },
+      {
+        rootMargin: DASHBOARD_MOTION.sectionPreloadMargin,
+        threshold: 0,
+      },
+    )
+
+    const revealObserver = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0]
+        if (entry?.isIntersecting) {
+          void triggerPreload()
+          setSectionVisible(true)
+          revealObserver.disconnect()
+        }
+      },
+      {
+        threshold: DASHBOARD_MOTION.sectionRevealAmount,
+      },
+    )
+
+    preloadObserver.observe(element)
+    revealObserver.observe(element)
+
+    return () => {
+      preloadObserver.disconnect()
+      revealObserver.disconnect()
+    }
+  }, [eager, triggerPreload])
+
+  const shouldRenderContent = eager || contentPrepared
+  const showPlaceholder = !sectionVisible
+  const hiddenContentStyle = { opacity: 0, pointerEvents: 'none' as const }
+  const hiddenAnimatedContentStyle = { pointerEvents: 'none' as const }
+
+  const contextValue = useMemo<DashboardSectionMotionState>(
+    () => ({
+      sectionVisible,
+      chartStartDelayMs: DASHBOARD_MOTION.chartStartDelayMs,
+      meterStartDelayMs: DASHBOARD_MOTION.meterStartDelayMs,
+      shouldReduceMotion,
+    }),
+    [sectionVisible, shouldReduceMotion],
+  )
+
+  return (
+    <section
+      id={id}
+      ref={sectionRef}
+      className={cn('relative', className)}
+      data-section-mounted={shouldRenderContent ? 'true' : 'false'}
+      data-section-visible={sectionVisible ? 'true' : 'false'}
+    >
+      {!shouldRenderContent ? (
+        <div
+          aria-hidden="true"
+          className={cn(
+            'rounded-2xl border border-border/40 bg-card/50 backdrop-blur-xl',
+            placeholderClassName ?? 'min-h-[320px]',
+          )}
+        />
+      ) : (
+        <DashboardSectionMotionContext.Provider value={contextValue}>
+          <div className="relative">
+            {shouldReduceMotion ? (
+              <div
+                {...(!sectionVisible ? { inert: true } : {})}
+                className={contentClassName}
+                style={sectionVisible ? undefined : hiddenContentStyle}
+              >
+                {children}
+              </div>
+            ) : (
+              <motion.div
+                {...(!sectionVisible ? { inert: true } : {})}
+                {...(!sectionVisible ? { style: hiddenAnimatedContentStyle } : {})}
+                initial={{
+                  opacity: 0,
+                  y: DASHBOARD_MOTION.sectionRevealOffset,
+                }}
+                animate={
+                  sectionVisible
+                    ? { opacity: 1, y: 0 }
+                    : { opacity: 0, y: DASHBOARD_MOTION.sectionRevealOffset }
+                }
+                transition={{
+                  duration: DASHBOARD_MOTION.sectionRevealDuration,
+                  ease: DASHBOARD_MOTION.sectionRevealEase,
+                }}
+                className={contentClassName}
+              >
+                {children}
+              </motion.div>
+            )}
+
+            <AnimatePresence initial={false}>
+              {showPlaceholder &&
+                (shouldReduceMotion ? (
+                  <div
+                    aria-hidden="true"
+                    className={cn(
+                      'pointer-events-none absolute inset-0 rounded-2xl border border-border/40 bg-card/50 backdrop-blur-xl',
+                      placeholderClassName ?? 'min-h-[320px]',
+                    )}
+                  />
+                ) : (
+                  <motion.div
+                    key="section-placeholder"
+                    aria-hidden="true"
+                    initial={{ opacity: 1 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: DASHBOARD_MOTION.placeholderFadeDuration }}
+                    className={cn(
+                      'pointer-events-none absolute inset-0 rounded-2xl border border-border/40 bg-card/50 backdrop-blur-xl',
+                      placeholderClassName ?? 'min-h-[320px]',
+                    )}
+                  />
+                ))}
+            </AnimatePresence>
+          </div>
+        </DashboardSectionMotionContext.Provider>
+      )}
+    </section>
+  )
+}
diff --git a/src/components/dashboard/DashboardSections.tsx b/src/components/dashboard/DashboardSections.tsx
index 009a728..8b314f7 100644
--- a/src/components/dashboard/DashboardSections.tsx
+++ b/src/components/dashboard/DashboardSections.tsx
@@ -1,4 +1,11 @@
-import { Fragment, Suspense, lazy } from 'react'
+import {
+  Fragment,
+  Suspense,
+  lazy,
+  type ComponentType,
+  type LazyExoticComponent,
+  type ReactNode,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import { PrimaryMetrics } from '../cards/PrimaryMetrics'
 import { SecondaryMetrics } from '../cards/SecondaryMetrics'
@@ -9,11 +16,11 @@ import { CostByModel } from '../charts/CostByModel'
 import { HeatmapCalendar } from '../features/heatmap/HeatmapCalendar'
 import { UsageInsights } from '../features/insights/UsageInsights'
 import { ConcentrationRisk } from '../features/risk/ConcentrationRisk'
-import { FadeIn } from '../features/animations/FadeIn'
 import { SectionHeader } from '../ui/section-header'
 import { ExpandableCard } from '../ui/expandable-card'
 import { ChartCardSkeleton } from '../ui/skeleton'
 import { ErrorBoundary } from '../ui/error-boundary'
+import { AnimatedDashboardSection } from './DashboardMotion'
 import { SECTION_HELP } from '@/lib/help-content'
 import { cn } from '@/lib/cn'
 import type { ModelCostChartPoint } from '@/lib/data-transforms'
@@ -31,102 +38,122 @@ import type {
   WeekdayData,
 } from '@/types'
 
-const CostForecast = lazy(() =>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type PreloadableLazyComponent<T extends ComponentType<any>> = LazyExoticComponent<T> & {
+  preload: () => Promise<{ default: T }>
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function lazyWithPreload<T extends ComponentType<any>>(
+  loader: () => Promise<{ default: T }>,
+): PreloadableLazyComponent<T> {
+  const Component = lazy(loader) as PreloadableLazyComponent<T>
+  Component.preload = loader
+  return Component
+}
+
+function preloadComponents(
+  ...components: Array<{ preload: () => Promise<unknown> }>
+): Promise<unknown[]> {
+  return Promise.all(components.map((component) => component.preload()))
+}
+
+const CostForecast = lazyWithPreload(() =>
   import('../features/forecast/CostForecast').then((module) => ({
     default: module.CostForecast,
   })),
 )
-const CostByModelOverTime = lazy(() =>
+const CostByModelOverTime = lazyWithPreload(() =>
   import('../charts/CostByModelOverTime').then((module) => ({
     default: module.CostByModelOverTime,
   })),
 )
-const CumulativeCost = lazy(() =>
+const CumulativeCost = lazyWithPreload(() =>
   import('../charts/CumulativeCost').then((module) => ({
     default: module.CumulativeCost,
   })),
 )
-const CostByWeekday = lazy(() =>
+const CostByWeekday = lazyWithPreload(() =>
   import('../charts/CostByWeekday').then((module) => ({
     default: module.CostByWeekday,
   })),
 )
-const TokenEfficiency = lazy(() =>
+const TokenEfficiency = lazyWithPreload(() =>
   import('../charts/TokenEfficiency').then((module) => ({
     default: module.TokenEfficiency,
   })),
 )
-const ModelMix = lazy(() =>
+const ModelMix = lazyWithPreload(() =>
   import('../charts/ModelMix').then((module) => ({
     default: module.ModelMix,
   })),
 )
-const TokensOverTime = lazy(() =>
+const TokensOverTime = lazyWithPreload(() =>
   import('../charts/TokensOverTime').then((module) => ({
     default: module.TokensOverTime,
   })),
 )
-const TokenTypes = lazy(() =>
+const TokenTypes = lazyWithPreload(() =>
   import('../charts/TokenTypes').then((module) => ({
     default: module.TokenTypes,
   })),
 )
-const RequestsOverTime = lazy(() =>
+const RequestsOverTime = lazyWithPreload(() =>
   import('../charts/RequestsOverTime').then((module) => ({
     default: module.RequestsOverTime,
   })),
 )
-const RequestCacheHitRateByModel = lazy(() =>
+const RequestCacheHitRateByModel = lazyWithPreload(() =>
   import('../charts/RequestCacheHitRateByModel').then((module) => ({
     default: module.RequestCacheHitRateByModel,
   })),
 )
-const CacheROI = lazy(() =>
+const CacheROI = lazyWithPreload(() =>
   import('../features/cache-roi/CacheROI').then((module) => ({
     default: module.CacheROI,
   })),
 )
-const ProviderLimitsSection = lazy(() =>
+const ProviderLimitsSection = lazyWithPreload(() =>
   import('../features/limits/ProviderLimitsSection').then((module) => ({
     default: module.ProviderLimitsSection,
   })),
 )
-const RequestQuality = lazy(() =>
+const RequestQuality = lazyWithPreload(() =>
   import('../features/request-quality/RequestQuality').then((module) => ({
     default: module.RequestQuality,
   })),
 )
-const DistributionAnalysis = lazy(() =>
+const DistributionAnalysis = lazyWithPreload(() =>
   import('../charts/DistributionAnalysis').then((module) => ({
     default: module.DistributionAnalysis,
   })),
 )
-const CorrelationAnalysis = lazy(() =>
+const CorrelationAnalysis = lazyWithPreload(() =>
   import('../charts/CorrelationAnalysis').then((module) => ({
     default: module.CorrelationAnalysis,
   })),
 )
-const PeriodComparison = lazy(() =>
+const PeriodComparison = lazyWithPreload(() =>
   import('../features/comparison/PeriodComparison').then((module) => ({
     default: module.PeriodComparison,
   })),
 )
-const AnomalyDetection = lazy(() =>
+const AnomalyDetection = lazyWithPreload(() =>
   import('../features/anomaly/AnomalyDetection').then((module) => ({
     default: module.AnomalyDetection,
   })),
 )
-const ModelEfficiency = lazy(() =>
+const ModelEfficiency = lazyWithPreload(() =>
   import('../tables/ModelEfficiency').then((module) => ({
     default: module.ModelEfficiency,
   })),
 )
-const ProviderEfficiency = lazy(() =>
+const ProviderEfficiency = lazyWithPreload(() =>
   import('../tables/ProviderEfficiency').then((module) => ({
     default: module.ProviderEfficiency,
   })),
 )
-const RecentDays = lazy(() =>
+const RecentDays = lazyWithPreload(() =>
   import('../tables/RecentDays').then((module) => ({
     default: module.RecentDays,
   })),
@@ -225,148 +252,206 @@ export function DashboardSections({
     </div>
   )
 
-  const renderLazySection = (content: React.ReactNode, className?: string) => (
+  const renderLazySection = (content: ReactNode, className?: string) => (
     <ErrorBoundary fallback={lazyErrorFallback(className)}>
       <Suspense fallback={lazyCardFallback(className)}>{content}</Suspense>
     </ErrorBoundary>
   )
 
+  const sectionPlaceholderClassName: Record<DashboardSectionId, string> = {
+    insights: 'min-h-[260px]',
+    metrics: 'min-h-[320px]',
+    today: 'min-h-[320px]',
+    currentMonth: 'min-h-[360px]',
+    activity: 'min-h-[360px]',
+    forecastCache: 'min-h-[420px]',
+    limits: 'min-h-[480px]',
+    costAnalysis: 'min-h-[980px]',
+    tokenAnalysis: 'min-h-[380px]',
+    requestAnalysis: 'min-h-[760px]',
+    advancedAnalysis: 'min-h-[760px]',
+    comparisons: 'min-h-[420px]',
+    tables: 'min-h-[900px]',
+  }
+  const sectionAnchorMap: Partial<Record<DashboardSectionId, string>> = {
+    costAnalysis: 'charts',
+    currentMonth: 'current-month',
+    tokenAnalysis: 'token-analysis',
+    requestAnalysis: 'request-analysis',
+    advancedAnalysis: 'advanced-analysis',
+  }
+
+  const renderAnimatedSection = (
+    sectionId: DashboardSectionId,
+    children: ReactNode,
+    {
+      eager = false,
+      onPreload,
+    }: { eager?: boolean; onPreload?: () => void | Promise<unknown> } = {},
+  ) => {
+    const sectionAnchorId = sectionAnchorMap[sectionId] ?? sectionId
+
+    return (
+      <AnimatedDashboardSection
+        id={sectionAnchorId}
+        eager={eager}
+        placeholderClassName={sectionPlaceholderClassName[sectionId]}
+        onPreload={onPreload}
+      >
+        {children}
+      </AnimatedDashboardSection>
+    )
+  }
+
   const renderSection = (sectionId: DashboardSectionId) => {
     switch (sectionId) {
       case 'insights':
-        return sectionVisibility.insights ? (
-          <div id="insights">
-            <UsageInsights
-              metrics={metrics}
-              viewMode={viewMode}
-              totalCalendarDays={totalCalendarDays}
-            />
-          </div>
-        ) : null
-      case 'metrics':
-        return sectionVisibility.metrics ? (
-          <div id="metrics">
-            <SectionHeader
-              title={t('dashboard.metrics.title')}
-              badge={t('dashboard.metrics.badge')}
-              description={t('dashboard.metrics.description')}
-              info={SECTION_HELP.metrics}
-            />
-            <FadeIn delay={0}>
-              <PrimaryMetrics
+        return sectionVisibility.insights
+          ? renderAnimatedSection(
+              'insights',
+              <UsageInsights
                 metrics={metrics}
-                totalCalendarDays={totalCalendarDays}
                 viewMode={viewMode}
-              />
-            </FadeIn>
-            <FadeIn delay={0.04}>
-              <div className="mt-4">
-                <SecondaryMetrics
+                totalCalendarDays={totalCalendarDays}
+              />,
+              { eager: true },
+            )
+          : null
+      case 'metrics':
+        return sectionVisibility.metrics
+          ? renderAnimatedSection(
+              'metrics',
+              <>
+                <SectionHeader
+                  title={t('dashboard.metrics.title')}
+                  badge={t('dashboard.metrics.badge')}
+                  description={t('dashboard.metrics.description')}
+                  info={SECTION_HELP.metrics}
+                />
+                <PrimaryMetrics
                   metrics={metrics}
-                  dailyCosts={filteredData.map((entry) => entry.totalCost)}
+                  totalCalendarDays={totalCalendarDays}
                   viewMode={viewMode}
                 />
-              </div>
-            </FadeIn>
-          </div>
-        ) : null
+                <div className="mt-4">
+                  <SecondaryMetrics
+                    metrics={metrics}
+                    dailyCosts={filteredData.map((entry) => entry.totalCost)}
+                    viewMode={viewMode}
+                  />
+                </div>
+              </>,
+              { eager: true },
+            )
+          : null
       case 'today':
-        return sectionVisibility.today && todayData ? (
-          <div id="today">
-            <TodayMetrics today={todayData} metrics={metrics} />
-          </div>
-        ) : null
+        return sectionVisibility.today && todayData
+          ? renderAnimatedSection('today', <TodayMetrics today={todayData} metrics={metrics} />, {
+              eager: true,
+            })
+          : null
       case 'currentMonth':
-        return sectionVisibility.currentMonth && hasCurrentMonthData ? (
-          <div id="current-month">
-            <MonthMetrics daily={filteredDailyData} metrics={metrics} />
-          </div>
-        ) : null
+        return sectionVisibility.currentMonth && hasCurrentMonthData
+          ? renderAnimatedSection(
+              'currentMonth',
+              <MonthMetrics daily={filteredDailyData} metrics={metrics} />,
+              {
+                eager: true,
+              },
+            )
+          : null
       case 'activity':
-        return sectionVisibility.activity ? (
-          <div id="activity">
-            <SectionHeader
-              title={t('dashboard.activity.title')}
-              description={
-                viewMode === 'daily'
-                  ? t('dashboard.activity.dailyDescription')
-                  : viewMode === 'monthly'
-                    ? t('dashboard.activity.monthlyDescription')
-                    : t('dashboard.activity.yearlyDescription')
-              }
-              info={SECTION_HELP.activity}
-            />
-            <FadeIn delay={0.05}>
-              <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
-                <HeatmapCalendar
-                  data={filteredData}
-                  viewMode={viewMode}
-                  metric="cost"
-                  isDark={isDark}
-                />
-                <HeatmapCalendar
-                  data={filteredData}
-                  viewMode={viewMode}
-                  metric="requests"
-                  isDark={isDark}
+        return sectionVisibility.activity
+          ? renderAnimatedSection(
+              'activity',
+              <>
+                <SectionHeader
+                  title={t('dashboard.activity.title')}
+                  description={
+                    viewMode === 'daily'
+                      ? t('dashboard.activity.dailyDescription')
+                      : viewMode === 'monthly'
+                        ? t('dashboard.activity.monthlyDescription')
+                        : t('dashboard.activity.yearlyDescription')
+                  }
+                  info={SECTION_HELP.activity}
                 />
-                <HeatmapCalendar
-                  data={filteredData}
-                  viewMode={viewMode}
-                  metric="tokens"
-                  isDark={isDark}
-                />
-              </div>
-            </FadeIn>
-          </div>
-        ) : null
+                <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
+                  <HeatmapCalendar
+                    data={filteredData}
+                    viewMode={viewMode}
+                    metric="cost"
+                    isDark={isDark}
+                  />
+                  <HeatmapCalendar
+                    data={filteredData}
+                    viewMode={viewMode}
+                    metric="requests"
+                    isDark={isDark}
+                  />
+                  <HeatmapCalendar
+                    data={filteredData}
+                    viewMode={viewMode}
+                    metric="tokens"
+                    isDark={isDark}
+                  />
+                </div>
+              </>,
+            )
+          : null
       case 'forecastCache':
-        return sectionVisibility.forecastCache ? (
-          <div id="forecast-cache">
-            <SectionHeader
-              title={t('dashboard.forecastCache.title')}
-              description={t('dashboard.forecastCache.description')}
-              info={SECTION_HELP.forecastCache}
-            />
-            <FadeIn delay={0.06}>
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-                {renderLazySection(
-                  <ExpandableCard title={t('dashboard.cards.costForecast')}>
-                    <CostForecast data={filteredData} viewMode={viewMode} />
-                  </ExpandableCard>,
-                  'h-[360px]',
-                )}
-                {renderLazySection(
-                  <ExpandableCard
-                    title={t('dashboard.cards.cacheRoi')}
-                    stats={[
-                      {
-                        label: t('dashboard.stats.cacheHitRate'),
-                        value: formatPercent(metrics.cacheHitRate),
-                      },
-                      {
-                        label: t('dashboard.stats.totalTokens'),
-                        value: formatTokens(metrics.totalTokens),
-                      },
-                      {
-                        label: t('dashboard.stats.cacheRead'),
-                        value: formatTokens(metrics.totalCacheRead),
-                      },
-                    ]}
-                  >
-                    <CacheROI data={filteredData} viewMode={viewMode} />
-                  </ExpandableCard>,
-                  'h-[360px]',
-                )}
-              </div>
-            </FadeIn>
-          </div>
-        ) : null
+        return sectionVisibility.forecastCache
+          ? renderAnimatedSection(
+              'forecastCache',
+              <>
+                <SectionHeader
+                  title={t('dashboard.forecastCache.title')}
+                  description={t('dashboard.forecastCache.description')}
+                  info={SECTION_HELP.forecastCache}
+                />
+                <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                  {renderLazySection(
+                    <ExpandableCard title={t('dashboard.cards.costForecast')}>
+                      <CostForecast data={filteredData} viewMode={viewMode} />
+                    </ExpandableCard>,
+                    'h-[360px]',
+                  )}
+                  {renderLazySection(
+                    <ExpandableCard
+                      title={t('dashboard.cards.cacheRoi')}
+                      stats={[
+                        {
+                          label: t('dashboard.stats.cacheHitRate'),
+                          value: formatPercent(metrics.cacheHitRate),
+                        },
+                        {
+                          label: t('dashboard.stats.totalTokens'),
+                          value: formatTokens(metrics.totalTokens),
+                        },
+                        {
+                          label: t('dashboard.stats.cacheRead'),
+                          value: formatTokens(metrics.totalCacheRead),
+                        },
+                      ]}
+                    >
+                      <CacheROI data={filteredData} viewMode={viewMode} />
+                    </ExpandableCard>,
+                    'h-[360px]',
+                  )}
+                </div>
+              </>,
+              {
+                onPreload: () => {
+                  return preloadComponents(CostForecast, CacheROI)
+                },
+              },
+            )
+          : null
       case 'limits':
-        return sectionVisibility.limits ? (
-          <div id="limits">
-            <FadeIn delay={0.07}>
-              {renderLazySection(
+        return sectionVisibility.limits
+          ? renderAnimatedSection(
+              'limits',
+              renderLazySection(
                 <ProviderLimitsSection
                   data={filteredDailyData}
                   providers={visibleLimitProviders}
@@ -374,238 +459,274 @@ export function DashboardSections({
                   selectedMonth={selectedMonth}
                 />,
                 'h-[420px]',
-              )}
-            </FadeIn>
-          </div>
-        ) : null
+              ),
+              {
+                onPreload: () => {
+                  return preloadComponents(ProviderLimitsSection)
+                },
+              },
+            )
+          : null
       case 'costAnalysis':
-        return sectionVisibility.costAnalysis ? (
-          <div id="charts">
-            <SectionHeader
-              title={t('dashboard.costAnalysis.title')}
-              badge={`${allModels.length} ${t('common.models')}`}
-              description={t('dashboard.costAnalysis.description')}
-              info={SECTION_HELP.costAnalysis}
-            />
-            <FadeIn delay={0.08}>
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-                <div className="lg:col-span-2">
-                  <CostOverTime data={costChartData} onClickDay={onDrillDownDateChange} />
+        return sectionVisibility.costAnalysis
+          ? renderAnimatedSection(
+              'costAnalysis',
+              <>
+                <SectionHeader
+                  title={t('dashboard.costAnalysis.title')}
+                  badge={`${allModels.length} ${t('common.models')}`}
+                  description={t('dashboard.costAnalysis.description')}
+                  info={SECTION_HELP.costAnalysis}
+                />
+                <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+                  <div className="lg:col-span-2">
+                    <CostOverTime data={costChartData} onClickDay={onDrillDownDateChange} />
+                  </div>
+                  <CostByModel data={modelPieData} />
                 </div>
-                <CostByModel data={modelPieData} />
-              </div>
-            </FadeIn>
-            <FadeIn delay={0.1}>
-              <div className="mt-4">
-                {renderLazySection(
-                  <CostByModelOverTime data={modelCostChartData} models={allModels} />,
-                  'h-[320px]',
-                )}
-              </div>
-            </FadeIn>
-            <FadeIn delay={0.11}>
-              <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
-                {renderLazySection(
-                  <CumulativeCost data={costChartData} rawData={filteredData} />,
-                  'h-[320px]',
-                )}
-                {renderLazySection(<CostByWeekday data={weekdayData} />, 'h-[320px]')}
-              </div>
-            </FadeIn>
-            <FadeIn delay={0.12}>
-              <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
-                {renderLazySection(<TokenEfficiency data={filteredData} />, 'h-[320px]')}
-                {renderLazySection(<ModelMix data={filteredData} />, 'h-[320px]')}
-              </div>
-            </FadeIn>
-          </div>
-        ) : null
+                <div className="mt-4">
+                  {renderLazySection(
+                    <CostByModelOverTime data={modelCostChartData} models={allModels} />,
+                    'h-[320px]',
+                  )}
+                </div>
+                <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
+                  {renderLazySection(
+                    <CumulativeCost data={costChartData} rawData={filteredData} />,
+                    'h-[320px]',
+                  )}
+                  {renderLazySection(<CostByWeekday data={weekdayData} />, 'h-[320px]')}
+                </div>
+                <div className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
+                  {renderLazySection(<TokenEfficiency data={filteredData} />, 'h-[320px]')}
+                  {renderLazySection(<ModelMix data={filteredData} />, 'h-[320px]')}
+                </div>
+              </>,
+              {
+                onPreload: () => {
+                  return preloadComponents(
+                    CostByModelOverTime,
+                    CumulativeCost,
+                    CostByWeekday,
+                    TokenEfficiency,
+                    ModelMix,
+                  )
+                },
+              },
+            )
+          : null
       case 'tokenAnalysis':
-        return sectionVisibility.tokenAnalysis ? (
-          <div id="token-analysis">
-            <SectionHeader
-              title={t('dashboard.tokenAnalysis.title')}
-              description={t('dashboard.tokenAnalysis.description')}
-              info={SECTION_HELP.tokenAnalysis}
-            />
-            <FadeIn delay={0.13}>
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
-                {renderLazySection(
-                  <TokensOverTime data={tokenChartData} onClickDay={onDrillDownDateChange} />,
-                  'h-[320px]',
-                )}
-                {renderLazySection(<TokenTypes data={tokenPieData} />, 'h-[320px]')}
-              </div>
-            </FadeIn>
-          </div>
-        ) : null
+        return sectionVisibility.tokenAnalysis
+          ? renderAnimatedSection(
+              'tokenAnalysis',
+              <>
+                <SectionHeader
+                  title={t('dashboard.tokenAnalysis.title')}
+                  description={t('dashboard.tokenAnalysis.description')}
+                  info={SECTION_HELP.tokenAnalysis}
+                />
+                <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+                  {renderLazySection(
+                    <TokensOverTime data={tokenChartData} onClickDay={onDrillDownDateChange} />,
+                    'h-[320px]',
+                  )}
+                  {renderLazySection(<TokenTypes data={tokenPieData} />, 'h-[320px]')}
+                </div>
+              </>,
+              {
+                onPreload: () => {
+                  return preloadComponents(TokensOverTime, TokenTypes)
+                },
+              },
+            )
+          : null
       case 'requestAnalysis':
-        return sectionVisibility.requestAnalysis && metrics.hasRequestData ? (
-          <div id="request-analysis">
-            <SectionHeader
-              title={t('dashboard.requestAnalysis.title')}
-              description={t('dashboard.requestAnalysis.description')}
-              info={SECTION_HELP.requestAnalysis}
-            />
-            <FadeIn delay={0.14}>
-              {renderLazySection(
-                <RequestsOverTime
-                  data={requestChartData}
-                  viewMode={viewMode}
-                  onClickDay={onDrillDownDateChange}
-                />,
-                'h-[320px]',
-              )}
-            </FadeIn>
-            <FadeIn delay={0.15}>
-              <div className="mt-4">
+        return sectionVisibility.requestAnalysis && metrics.hasRequestData
+          ? renderAnimatedSection(
+              'requestAnalysis',
+              <>
+                <SectionHeader
+                  title={t('dashboard.requestAnalysis.title')}
+                  description={t('dashboard.requestAnalysis.description')}
+                  info={SECTION_HELP.requestAnalysis}
+                />
                 {renderLazySection(
-                  <RequestCacheHitRateByModel
-                    timelineData={filteredData}
-                    summaryData={filteredDailyData}
+                  <RequestsOverTime
+                    data={requestChartData}
                     viewMode={viewMode}
+                    onClickDay={onDrillDownDateChange}
                   />,
                   'h-[320px]',
                 )}
-              </div>
-            </FadeIn>
-            <FadeIn delay={0.16}>
-              <div className="mt-4">
-                {renderLazySection(
-                  <RequestQuality metrics={metrics} viewMode={viewMode} />,
-                  'h-[280px]',
-                )}
-              </div>
-            </FadeIn>
-          </div>
-        ) : null
+                <div className="mt-4">
+                  {renderLazySection(
+                    <RequestCacheHitRateByModel
+                      timelineData={filteredData}
+                      summaryData={filteredDailyData}
+                      viewMode={viewMode}
+                    />,
+                    'h-[320px]',
+                  )}
+                </div>
+                <div className="mt-4">
+                  {renderLazySection(
+                    <RequestQuality metrics={metrics} viewMode={viewMode} />,
+                    'h-[280px]',
+                  )}
+                </div>
+              </>,
+              {
+                onPreload: () => {
+                  return preloadComponents(
+                    RequestsOverTime,
+                    RequestCacheHitRateByModel,
+                    RequestQuality,
+                  )
+                },
+              },
+            )
+          : null
       case 'advancedAnalysis':
-        return sectionVisibility.advancedAnalysis ? (
-          <div id="advanced-analysis">
-            <SectionHeader
-              title={t('dashboard.advancedAnalysis.title')}
-              description={t('dashboard.advancedAnalysis.description')}
-              info={SECTION_HELP.advancedAnalysis}
-            />
-            <FadeIn delay={0.145}>
-              <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
-                {renderLazySection(
-                  <DistributionAnalysis data={filteredData} viewMode={viewMode} />,
-                  'h-[320px]',
-                )}
-                <ConcentrationRisk
-                  topModelShare={metrics.topModelShare}
-                  topProviderShare={metrics.topProvider?.share ?? 0}
-                  modelConcentrationIndex={metrics.modelConcentrationIndex}
-                  providerConcentrationIndex={metrics.providerConcentrationIndex}
+        return sectionVisibility.advancedAnalysis
+          ? renderAnimatedSection(
+              'advancedAnalysis',
+              <>
+                <SectionHeader
+                  title={t('dashboard.advancedAnalysis.title')}
+                  description={t('dashboard.advancedAnalysis.description')}
+                  info={SECTION_HELP.advancedAnalysis}
                 />
-              </div>
-            </FadeIn>
-            <FadeIn delay={0.155}>
-              <div className="mt-4">
-                {renderLazySection(<CorrelationAnalysis data={filteredData} />, 'h-[320px]')}
-              </div>
-            </FadeIn>
-          </div>
-        ) : null
+                <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
+                  {renderLazySection(
+                    <DistributionAnalysis data={filteredData} viewMode={viewMode} />,
+                    'h-[320px]',
+                  )}
+                  <ConcentrationRisk
+                    topModelShare={metrics.topModelShare}
+                    topProviderShare={metrics.topProvider?.share ?? 0}
+                    modelConcentrationIndex={metrics.modelConcentrationIndex}
+                    providerConcentrationIndex={metrics.providerConcentrationIndex}
+                  />
+                </div>
+                <div className="mt-4">
+                  {renderLazySection(<CorrelationAnalysis data={filteredData} />, 'h-[320px]')}
+                </div>
+              </>,
+              {
+                onPreload: () => {
+                  return preloadComponents(DistributionAnalysis, CorrelationAnalysis)
+                },
+              },
+            )
+          : null
       case 'comparisons':
-        return sectionVisibility.comparisons ? (
-          <div id="comparisons">
-            <SectionHeader
-              title={t('dashboard.comparisons.title')}
-              description={t('dashboard.comparisons.description')}
-              info={SECTION_HELP.comparisons}
-            />
-            <FadeIn delay={0.165}>
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-                {renderLazySection(
-                  <ExpandableCard
-                    title={t('dashboard.cards.periodComparison')}
-                    stats={[
-                      {
-                        label: t('dashboard.stats.dataPoints'),
-                        value: String(filteredData.length),
-                      },
-                      {
-                        label: t('dashboard.stats.avgCostPerUnit', { unit: periodUnit(viewMode) }),
-                        value: formatCurrency(metrics.avgDailyCost),
-                      },
-                    ]}
-                  >
-                    <PeriodComparison data={comparisonData} />
-                  </ExpandableCard>,
-                  'h-[360px]',
-                )}
-                {renderLazySection(
-                  <ExpandableCard
-                    title={t('dashboard.cards.anomalyDetection')}
-                    stats={[
-                      {
-                        label: t('dashboard.stats.total'),
-                        value: formatCurrency(metrics.totalCost),
-                      },
-                      {
-                        label: t('dashboard.stats.avgPerUnit', { unit: periodUnit(viewMode) }),
-                        value: formatCurrency(metrics.avgDailyCost),
-                      },
-                    ]}
-                  >
-                    <AnomalyDetection
-                      data={filteredData}
-                      onClickDay={onDrillDownDateChange}
-                      viewMode={viewMode}
-                    />
-                  </ExpandableCard>,
-                  'h-[360px]',
-                )}
-              </div>
-            </FadeIn>
-          </div>
-        ) : null
+        return sectionVisibility.comparisons
+          ? renderAnimatedSection(
+              'comparisons',
+              <>
+                <SectionHeader
+                  title={t('dashboard.comparisons.title')}
+                  description={t('dashboard.comparisons.description')}
+                  info={SECTION_HELP.comparisons}
+                />
+                <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+                  {renderLazySection(
+                    <ExpandableCard
+                      title={t('dashboard.cards.periodComparison')}
+                      stats={[
+                        {
+                          label: t('dashboard.stats.dataPoints'),
+                          value: String(filteredData.length),
+                        },
+                        {
+                          label: t('dashboard.stats.avgCostPerUnit', {
+                            unit: periodUnit(viewMode),
+                          }),
+                          value: formatCurrency(metrics.avgDailyCost),
+                        },
+                      ]}
+                    >
+                      <PeriodComparison data={comparisonData} />
+                    </ExpandableCard>,
+                    'h-[360px]',
+                  )}
+                  {renderLazySection(
+                    <ExpandableCard
+                      title={t('dashboard.cards.anomalyDetection')}
+                      stats={[
+                        {
+                          label: t('dashboard.stats.total'),
+                          value: formatCurrency(metrics.totalCost),
+                        },
+                        {
+                          label: t('dashboard.stats.avgPerUnit', { unit: periodUnit(viewMode) }),
+                          value: formatCurrency(metrics.avgDailyCost),
+                        },
+                      ]}
+                    >
+                      <AnomalyDetection
+                        data={filteredData}
+                        onClickDay={onDrillDownDateChange}
+                        viewMode={viewMode}
+                      />
+                    </ExpandableCard>,
+                    'h-[360px]',
+                  )}
+                </div>
+              </>,
+              {
+                onPreload: () => {
+                  return preloadComponents(PeriodComparison, AnomalyDetection)
+                },
+              },
+            )
+          : null
       case 'tables':
-        return sectionVisibility.tables ? (
-          <div id="tables">
-            <SectionHeader
-              title={t('dashboard.tables.title')}
-              description={t('dashboard.tables.description')}
-              info={SECTION_HELP.tables}
-            />
-            <FadeIn delay={0.17}>
-              {renderLazySection(
-                <ModelEfficiency
-                  modelCosts={modelCosts}
-                  totalCost={metrics.totalCost}
-                  viewMode={viewMode}
-                />,
-                'h-[320px]',
-              )}
-            </FadeIn>
-            <FadeIn delay={0.18}>
-              <div className="mt-4">
+        return sectionVisibility.tables
+          ? renderAnimatedSection(
+              'tables',
+              <>
+                <SectionHeader
+                  title={t('dashboard.tables.title')}
+                  description={t('dashboard.tables.description')}
+                  info={SECTION_HELP.tables}
+                />
                 {renderLazySection(
-                  <ProviderEfficiency
-                    providerMetrics={providerMetrics}
+                  <ModelEfficiency
+                    modelCosts={modelCosts}
                     totalCost={metrics.totalCost}
                     viewMode={viewMode}
                   />,
                   'h-[320px]',
                 )}
-              </div>
-            </FadeIn>
-            <FadeIn delay={0.19}>
-              <div className="mt-4">
-                {renderLazySection(
-                  <RecentDays
-                    data={filteredData}
-                    onClickDay={onDrillDownDateChange}
-                    viewMode={viewMode}
-                  />,
-                  'h-[360px]',
-                )}
-              </div>
-            </FadeIn>
-          </div>
-        ) : null
+                <div className="mt-4">
+                  {renderLazySection(
+                    <ProviderEfficiency
+                      providerMetrics={providerMetrics}
+                      totalCost={metrics.totalCost}
+                      viewMode={viewMode}
+                    />,
+                    'h-[320px]',
+                  )}
+                </div>
+                <div className="mt-4">
+                  {renderLazySection(
+                    <RecentDays
+                      data={filteredData}
+                      onClickDay={onDrillDownDateChange}
+                      viewMode={viewMode}
+                    />,
+                    'h-[360px]',
+                  )}
+                </div>
+              </>,
+              {
+                onPreload: () => {
+                  return preloadComponents(ModelEfficiency, ProviderEfficiency, RecentDays)
+                },
+              },
+            )
+          : null
       default:
         return null
     }
diff --git a/src/components/features/animations/AnimatedBarFill.tsx b/src/components/features/animations/AnimatedBarFill.tsx
new file mode 100644
index 0000000..9098743
--- /dev/null
+++ b/src/components/features/animations/AnimatedBarFill.tsx
@@ -0,0 +1,67 @@
+import { motion, type MotionStyle } from 'framer-motion'
+import { useRef } from 'react'
+import type { CSSProperties } from 'react'
+import { DASHBOARD_MOTION, useDashboardElementMotion } from '@/components/dashboard/DashboardMotion'
+import { cn } from '@/lib/cn'
+import { useShouldReduceMotion } from '@/lib/motion'
+
+interface AnimatedBarFillProps {
+  width: string
+  className?: string
+  style?: CSSProperties
+  active?: boolean
+  order?: number
+  delayMs?: number
+  durationMs?: number
+}
+
+/** Animates one horizontal dashboard bar fill while respecting reduced motion. */
+export function AnimatedBarFill({
+  width,
+  className,
+  style,
+  active,
+  order = 0,
+  delayMs,
+  durationMs,
+}: AnimatedBarFillProps) {
+  const fillRef = useRef<HTMLDivElement | null>(null)
+  const elementMotion = useDashboardElementMotion(fillRef, {
+    kind: 'meter',
+    amount: 0.2,
+    order,
+    ...(delayMs !== undefined ? { delayMs } : {}),
+  })
+  const shouldReduceMotion = useShouldReduceMotion()
+  const isActive = active ?? elementMotion.active
+  const resolvedDelayMs = delayMs ?? elementMotion.delayMs
+  const resolvedDurationMs = durationMs ?? DASHBOARD_MOTION.meterDurationMs
+
+  if (shouldReduceMotion) {
+    return (
+      <div
+        ref={fillRef}
+        className={cn(className)}
+        style={{
+          ...style,
+          width: isActive ? width : '0%',
+        }}
+      />
+    )
+  }
+
+  return (
+    <motion.div
+      ref={fillRef}
+      className={cn(className)}
+      {...(style ? { style: style as unknown as MotionStyle } : {})}
+      initial={false}
+      animate={{ width: isActive ? width : '0%' }}
+      transition={{
+        duration: resolvedDurationMs / 1000,
+        delay: isActive ? resolvedDelayMs / 1000 : 0,
+        ease: [0.22, 1, 0.36, 1],
+      }}
+    />
+  )
+}
diff --git a/src/components/features/cache-roi/CacheROI.tsx b/src/components/features/cache-roi/CacheROI.tsx
index 7d1939a..c6557f7 100644
--- a/src/components/features/cache-roi/CacheROI.tsx
+++ b/src/components/features/cache-roi/CacheROI.tsx
@@ -6,6 +6,7 @@ import { normalizeModelName } from '@/lib/model-utils'
 import { MODEL_PRICES } from '@/lib/constants'
 import { Zap } from 'lucide-react'
 import { FormattedValue } from '@/components/ui/formatted-value'
+import { AnimatedBarFill } from '@/components/features/animations/AnimatedBarFill'
 import { InfoHeading } from '@/components/features/help/InfoHeading'
 import { CHART_HELP } from '@/lib/help-content'
 import type { DailyUsage, ViewMode } from '@/types'
@@ -80,6 +81,7 @@ export function CacheROI({ data, viewMode = 'daily' }: CacheROIProps) {
     0,
     Math.min(100, hypotheticalCost > 0 ? (actualCost / hypotheticalCost) * 100 : 100),
   )
+  const savedWidth = Math.max(0, 100 - barWidth)
   const withoutCacheTextClass = 'text-rose-700 dark:text-rose-300'
   const withCacheTextClass =
     savingsSign < 0 ? 'text-rose-700 dark:text-rose-300' : 'text-emerald-700 dark:text-emerald-300'
@@ -148,22 +150,31 @@ export function CacheROI({ data, viewMode = 'daily' }: CacheROIProps) {
           <div className="flex items-center gap-2 text-xs">
             <span className="w-24 text-muted-foreground">{t('cacheRoi.withoutCache')}</span>
             <div className={`h-6 flex-1 overflow-hidden rounded-md ${barTrackDangerClass}`}>
-              <div
+              <AnimatedBarFill
                 className={`h-full rounded-md ${barFillDangerClass}`}
-                style={{ width: '100%' }}
+                width="100%"
+                order={0}
               />
             </div>
           </div>
           <div className="flex items-center gap-2 text-xs">
             <span className="w-24 text-muted-foreground">{t('cacheRoi.withCache')}</span>
-            <div className="flex h-6 flex-1 overflow-hidden rounded-md bg-muted/20">
-              <div
-                className={`h-full rounded-l-md ${hasPositiveSavings ? barFillSuccessClass : barFillDangerClass} transition-all duration-1000 motion-reduce:transition-none`}
-                style={{ width: `${barWidth}%` }}
-              />
-              <div
-                className={`h-full flex-1 rounded-r-md ${hasPositiveSavings ? barSavedSegmentClass : 'bg-muted/10'}`}
+            <div className="relative h-6 flex-1 overflow-hidden rounded-md bg-muted/20">
+              <AnimatedBarFill
+                className={`absolute inset-y-0 left-0 rounded-l-md ${hasPositiveSavings ? barFillSuccessClass : barFillDangerClass}`}
+                width={`${barWidth}%`}
+                order={0}
               />
+              {hasPositiveSavings && savedWidth > 0 ? (
+                <AnimatedBarFill
+                  className={`absolute inset-y-0 rounded-r-md ${barSavedSegmentClass}`}
+                  style={{ left: `${barWidth}%` }}
+                  width={`${savedWidth}%`}
+                  order={1}
+                />
+              ) : (
+                <div className="absolute inset-y-0 right-0 left-0 bg-muted/10" />
+              )}
             </div>
           </div>
           <div className="flex items-center justify-end gap-2 text-[10px] text-muted-foreground">
diff --git a/src/components/features/forecast/CostForecast.tsx b/src/components/features/forecast/CostForecast.tsx
index a80298c..e2879b1 100644
--- a/src/components/features/forecast/CostForecast.tsx
+++ b/src/components/features/forecast/CostForecast.tsx
@@ -14,7 +14,12 @@ import {
 import { ChartCard, ChartAnimationAware, ChartReveal } from '@/components/charts/ChartCard'
 import { ChartLegend } from '@/components/charts/ChartLegend'
 import { CustomTooltip } from '@/components/charts/CustomTooltip'
-import { CHART_COLORS, CHART_MARGIN, CHART_ANIMATION } from '@/components/charts/chart-theme'
+import {
+  CHART_COLORS,
+  CHART_MARGIN,
+  getAreaAnimationProps,
+  getLineAnimationProps,
+} from '@/components/charts/chart-theme'
 import { coerceNumber, formatCurrency, formatDateAxis } from '@/lib/formatters'
 import { computeCurrentMonthForecast } from '@/lib/calculations'
 import { MetricCard } from '@/components/cards/MetricCard'
@@ -250,9 +255,7 @@ export function CostForecast({ data, viewMode = 'daily' }: CostForecastProps) {
                     fill={CHART_COLORS.cumulative}
                     fillOpacity={0.12}
                     name={t('forecast.uncertaintyBand')}
-                    isAnimationActive={animate}
-                    animationBegin={CHART_ANIMATION.stagger}
-                    animationDuration={CHART_ANIMATION.duration}
+                    {...getAreaAnimationProps(animate, { role: 'stacked' })}
                   />
                   <Area
                     type="monotone"
@@ -263,10 +266,7 @@ export function CostForecast({ data, viewMode = 'daily' }: CostForecastProps) {
                     strokeWidth={2}
                     dot={false}
                     connectNulls
-                    isAnimationActive={animate}
-                    animationBegin={0}
-                    animationDuration={CHART_ANIMATION.duration}
-                    animationEasing={CHART_ANIMATION.easing}
+                    {...getAreaAnimationProps(animate)}
                   />
                   <Line
                     type="monotone"
@@ -277,9 +277,7 @@ export function CostForecast({ data, viewMode = 'daily' }: CostForecastProps) {
                     strokeWidth={2}
                     strokeDasharray="6 3"
                     connectNulls
-                    isAnimationActive={animate}
-                    animationBegin={CHART_ANIMATION.stagger * 2}
-                    animationDuration={CHART_ANIMATION.slowDuration}
+                    {...getLineAnimationProps(animate, { role: 'secondary' })}
                   />
                 </ComposedChart>
               </ResponsiveContainer>
diff --git a/src/components/features/heatmap/HeatmapCalendar.tsx b/src/components/features/heatmap/HeatmapCalendar.tsx
index dda7c97..e792c34 100644
--- a/src/components/features/heatmap/HeatmapCalendar.tsx
+++ b/src/components/features/heatmap/HeatmapCalendar.tsx
@@ -6,8 +6,10 @@ import {
   useState,
   type KeyboardEvent as ReactKeyboardEvent,
 } from 'react'
+import { motion } from 'framer-motion'
 import { useTranslation } from 'react-i18next'
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { DASHBOARD_MOTION, useDashboardElementMotion } from '@/components/dashboard/DashboardMotion'
 import { InfoHeading } from '@/components/features/help/InfoHeading'
 import { CHART_HELP } from '@/lib/help-content'
 import {
@@ -32,6 +34,9 @@ const CELL_GAP = 2
 const TOTAL = CELL_SIZE + CELL_GAP
 const LEFT_GUTTER = 30
 const TOP_GUTTER = 26
+const CELL_STAGGER_WEEK_OFFSET_MS = 12
+const CELL_STAGGER_DAY_OFFSET_MS = 6
+const TODAY_OUTLINE_EXTRA_DELAY_MS = 90
 
 function resolveHeatmapLightness(intensity: number, isDarkTheme: boolean) {
   if (intensity < 0.15) return isDarkTheme ? 28 : 88
@@ -60,6 +65,7 @@ export function HeatmapCalendar({
 }: HeatmapCalendarProps) {
   const { t } = useTranslation()
   const locale = getCurrentLocale()
+  const cardRef = useRef<HTMLDivElement | null>(null)
   const dayButtonRefs = useRef(new Map<string, SVGRectElement>())
   const [tooltip, setTooltip] = useState<{
     x: number
@@ -68,6 +74,10 @@ export function HeatmapCalendar({
     value: number
   } | null>(null)
   const overlayRef = useRef<HTMLDivElement>(null)
+  const heatmapMotion = useDashboardElementMotion(cardRef, {
+    kind: 'chart',
+    amount: 0.32,
+  })
   const dayLabels = useMemo(
     () =>
       Array.from({ length: 7 }, (_, index) => index).map((index) =>
@@ -175,6 +185,9 @@ export function HeatmapCalendar({
   }, [config, data, locale])
 
   const todayStr = localToday()
+  const shouldReduceMotion = heatmapMotion.shouldReduceMotion
+  const animateCells = !shouldReduceMotion && heatmapMotion.active
+  const cellAnimationDelayMs = heatmapMotion.delayMs
   const axisColor = 'hsl(var(--muted-foreground))'
   const todayOutlineColor = 'hsl(var(--primary))'
   const [focusedDate, setFocusedDate] = useState<string | null>(null)
@@ -301,7 +314,7 @@ export function HeatmapCalendar({
   const svgHeight = 7 * TOTAL + TOP_GUTTER + 8
 
   return (
-    <Card className="overflow-visible">
+    <Card ref={cardRef} className="overflow-visible">
       <CardHeader className="pb-2">
         <InfoHeading info={infoText}>
           <CardTitle className="text-sm font-medium text-muted-foreground">
@@ -364,10 +377,49 @@ export function HeatmapCalendar({
                       date: formattedDate,
                       value: config.formatter(cell.value),
                     })
+                    const cellMotionProps = shouldReduceMotion
+                      ? {}
+                      : {
+                          initial: { opacity: 0, fillOpacity: 0, scale: 0.96 },
+                          animate: {
+                            opacity: animateCells ? 1 : 0,
+                            fillOpacity: animateCells ? 1 : 0,
+                            scale: animateCells ? 1 : 0.96,
+                          },
+                          transition: {
+                            duration: 0.28,
+                            delay:
+                              (animateCells
+                                ? cellAnimationDelayMs +
+                                  cell.week *
+                                    (DASHBOARD_MOTION.itemStaggerMs + CELL_STAGGER_WEEK_OFFSET_MS) +
+                                  cell.day * CELL_STAGGER_DAY_OFFSET_MS
+                                : 0) / 1000,
+                            ease: [0.22, 1, 0.36, 1] as const,
+                          },
+                        }
+                    const todayOutlineMotionProps = shouldReduceMotion
+                      ? {}
+                      : {
+                          initial: { opacity: 0 },
+                          animate: { opacity: animateCells ? 1 : 0 },
+                          transition: {
+                            duration: 0.2,
+                            delay:
+                              (animateCells
+                                ? cellAnimationDelayMs +
+                                  cell.week *
+                                    (DASHBOARD_MOTION.itemStaggerMs + CELL_STAGGER_WEEK_OFFSET_MS) +
+                                  cell.day * CELL_STAGGER_DAY_OFFSET_MS +
+                                  TODAY_OUTLINE_EXTRA_DELAY_MS
+                                : 0) / 1000,
+                            ease: [0.22, 1, 0.36, 1] as const,
+                          },
+                        }
 
                     return (
                       <g key={cell.date}>
-                        <rect
+                        <motion.rect
                           ref={(node) => {
                             if (node) dayButtonRefs.current.set(cell.date, node)
                             else dayButtonRefs.current.delete(cell.date)
@@ -410,11 +462,12 @@ export function HeatmapCalendar({
                           }}
                           onBlur={() => setTooltip(null)}
                           onMouseLeave={() => setTooltip(null)}
+                          {...cellMotionProps}
                         >
                           <title>{accessibleLabel}</title>
-                        </rect>
+                        </motion.rect>
                         {isToday && (
-                          <rect
+                          <motion.rect
                             x={LEFT_GUTTER + cell.week * TOTAL - 1}
                             y={TOP_GUTTER + cell.day * TOTAL - 1}
                             width={CELL_SIZE + 2}
@@ -423,6 +476,7 @@ export function HeatmapCalendar({
                             fill="none"
                             stroke={todayOutlineColor}
                             strokeWidth={1.5}
+                            {...todayOutlineMotionProps}
                           />
                         )}
                       </g>
diff --git a/src/components/features/insights/UsageInsights.tsx b/src/components/features/insights/UsageInsights.tsx
index bd58dec..5e04149 100644
--- a/src/components/features/insights/UsageInsights.tsx
+++ b/src/components/features/insights/UsageInsights.tsx
@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Activity, Building2, Layers3, Sparkles, TrendingUp } from 'lucide-react'
+import { DashboardMotionItem } from '@/components/dashboard/DashboardMotion'
 import { Card } from '@/components/ui/card'
 import { SectionHeader } from '@/components/ui/section-header'
-import { FadeIn } from '@/components/features/animations/FadeIn'
 import { FormattedValue } from '@/components/ui/formatted-value'
 import { SECTION_HELP } from '@/lib/help-content'
 import {
@@ -28,11 +28,21 @@ interface InsightCardProps {
   value: ReactNode
   summary: string
   details: { label: string; value: ReactNode }[]
+  className?: string
+  testId?: string
 }
 
-function InsightCard({ title, icon, value, summary, details }: InsightCardProps) {
+function InsightCard({
+  title,
+  icon,
+  value,
+  summary,
+  details,
+  className,
+  testId,
+}: InsightCardProps) {
   return (
-    <Card className="overflow-hidden p-5">
+    <Card className={`h-full overflow-hidden p-5 ${className ?? ''}`.trim()} data-testid={testId}>
       <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
       <div className="flex items-start justify-between gap-3">
         <div>
@@ -92,9 +102,13 @@ export function UsageInsights({ metrics, viewMode, totalCalendarDays }: UsageIns
         description={t('dashboard.insights.description')}
         info={SECTION_HELP.insights}
       />
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-4">
-        <FadeIn delay={0.03}>
+      <div
+        className="grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-4"
+        data-testid="usage-insights-grid"
+      >
+        <DashboardMotionItem order={0} className="h-full" data-testid="usage-insight-motion-item">
           <InsightCard
+            testId="usage-insight-card"
             title={t('insights.concentration.title')}
             icon={<Building2 className="h-5 w-5" />}
             value={metrics.topProvider ? formatPercent(metrics.topProvider.share, 0) : '–'}
@@ -122,10 +136,11 @@ export function UsageInsights({ metrics, viewMode, totalCalendarDays }: UsageIns
               },
             ]}
           />
-        </FadeIn>
+        </DashboardMotionItem>
 
-        <FadeIn delay={0.08}>
+        <DashboardMotionItem order={1} className="h-full" data-testid="usage-insight-motion-item">
           <InsightCard
+            testId="usage-insight-card"
             title={t('insights.requestEconomy.title')}
             icon={<Activity className="h-5 w-5" />}
             value={
@@ -178,10 +193,11 @@ export function UsageInsights({ metrics, viewMode, totalCalendarDays }: UsageIns
               },
             ]}
           />
-        </FadeIn>
+        </DashboardMotionItem>
 
-        <FadeIn delay={0.13}>
+        <DashboardMotionItem order={2} className="h-full" data-testid="usage-insight-motion-item">
           <InsightCard
+            testId="usage-insight-card"
             title={t('insights.usagePatterns.title')}
             icon={<Layers3 className="h-5 w-5" />}
             value={
@@ -226,10 +242,11 @@ export function UsageInsights({ metrics, viewMode, totalCalendarDays }: UsageIns
               },
             ]}
           />
-        </FadeIn>
+        </DashboardMotionItem>
 
-        <FadeIn delay={0.18}>
+        <DashboardMotionItem order={3} className="h-full" data-testid="usage-insight-motion-item">
           <InsightCard
+            testId="usage-insight-card"
             title={t('insights.peakWindow.title')}
             icon={<TrendingUp className="h-5 w-5" />}
             value={
@@ -263,10 +280,10 @@ export function UsageInsights({ metrics, viewMode, totalCalendarDays }: UsageIns
               { label: t('insights.peakWindow.signal'), value: peakSignal },
             ]}
           />
-        </FadeIn>
+        </DashboardMotionItem>
       </div>
 
-      <FadeIn delay={0.22}>
+      <DashboardMotionItem order={4}>
         <div className="mt-4 rounded-2xl border border-border/60 bg-gradient-to-r from-primary/[0.08] via-transparent to-chart-3/[0.08] px-4 py-3 text-sm text-muted-foreground">
           <span className="inline-flex items-center gap-2 font-medium text-foreground">
             <Sparkles className="h-4 w-4 text-primary" />
@@ -289,7 +306,7 @@ export function UsageInsights({ metrics, viewMode, totalCalendarDays }: UsageIns
               : t('insights.quickRead.fallback')}
           </span>
         </div>
-      </FadeIn>
+      </DashboardMotionItem>
     </div>
   )
 }
diff --git a/src/components/features/limits/ProviderLimitsSection.tsx b/src/components/features/limits/ProviderLimitsSection.tsx
index 68fd470..5ce716b 100644
--- a/src/components/features/limits/ProviderLimitsSection.tsx
+++ b/src/components/features/limits/ProviderLimitsSection.tsx
@@ -1,6 +1,5 @@
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { motion, useInView } from 'framer-motion'
 import {
   Area,
   CartesianGrid,
@@ -17,9 +16,16 @@ import {
 import { AlertTriangle, CreditCard, ShieldCheck, TrendingUp } from 'lucide-react'
 import { Card, CardContent } from '@/components/ui/card'
 import { SectionHeader } from '@/components/ui/section-header'
+import { DashboardMotionItem } from '@/components/dashboard/DashboardMotion'
+import { AnimatedBarFill } from '@/components/features/animations/AnimatedBarFill'
 import { ChartAnimationAware, ChartCard, ChartReveal } from '@/components/charts/ChartCard'
 import { ChartLegend } from '@/components/charts/ChartLegend'
-import { CHART_ANIMATION, CHART_COLORS, CHART_MARGIN } from '@/components/charts/chart-theme'
+import {
+  CHART_COLORS,
+  CHART_MARGIN,
+  getAreaAnimationProps,
+  getLineAnimationProps,
+} from '@/components/charts/chart-theme'
 import { buildProviderMonthlyCosts, getLatestMonth } from '@/lib/provider-limits'
 import i18n from '@/lib/i18n'
 import { CHART_HELP, SECTION_HELP } from '@/lib/help-content'
@@ -96,8 +102,6 @@ export function ProviderLimitsSection({
   selectedMonth,
 }: ProviderLimitsSectionProps) {
   const { t } = useTranslation()
-  const sectionRef = useRef<HTMLDivElement | null>(null)
-  const inView = useInView(sectionRef, { once: true, amount: 0.2 })
 
   const {
     rows,
@@ -220,7 +224,7 @@ export function ProviderLimitsSection({
   if (providers.length === 0) return null
 
   return (
-    <div id="limits" ref={sectionRef}>
+    <div>
       <SectionHeader
         title={t('limits.sectionTitle')}
         badge={t('limits.providersBadge', { count: providers.length })}
@@ -229,17 +233,12 @@ export function ProviderLimitsSection({
       />
 
       {atLimitCount > 0 && (
-        <motion.div
-          initial={{ opacity: 0, y: 12 }}
-          animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 12 }}
-          transition={{ duration: 0.35 }}
-          className="mb-4 rounded-2xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-100"
-        >
+        <DashboardMotionItem className="mb-4 rounded-2xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-100">
           <div className="flex items-center gap-2 font-medium">
             <AlertTriangle className="h-4 w-4" />
             {t('limits.warningBanner', { count: atLimitCount })}
           </div>
-        </motion.div>
+        </DashboardMotionItem>
       )}
 
       <div className="grid grid-cols-1 gap-4 lg:grid-cols-4">
@@ -269,12 +268,7 @@ export function ProviderLimitsSection({
             icon: <TrendingUp className="h-4 w-4" />,
           },
         ].map((item, index) => (
-          <motion.div
-            key={item.label}
-            initial={{ opacity: 0, y: 12 }}
-            animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 12 }}
-            transition={{ duration: 0.35, delay: 0.04 * index }}
-          >
+          <DashboardMotionItem key={item.label} order={index}>
             <Card className="h-full">
               <CardContent className="p-4">
                 <div className="flex items-start justify-between gap-3">
@@ -291,7 +285,7 @@ export function ProviderLimitsSection({
                 </div>
               </CardContent>
             </Card>
-          </motion.div>
+          </DashboardMotionItem>
         ))}
       </div>
 
@@ -307,12 +301,7 @@ export function ProviderLimitsSection({
           const subscriptionProgressWidth = Math.min(subscriptionProgress, 100)
 
           return (
-            <motion.div
-              key={row.provider}
-              initial={{ opacity: 0, y: 12 }}
-              animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 12 }}
-              transition={{ duration: 0.35, delay: 0.05 + index * 0.03 }}
-            >
+            <DashboardMotionItem key={row.provider} delayMs={80 + index * 35}>
               <Card
                 className={
                   row.riskStatus === 'limit'
@@ -375,7 +364,7 @@ export function ProviderLimitsSection({
                       </div>
                       <div className="h-2 overflow-hidden rounded-full bg-muted/30">
                         {row.monthlyLimit > 0 ? (
-                          <motion.div
+                          <AnimatedBarFill
                             className={
                               row.riskStatus === 'limit'
                                 ? 'h-full bg-red-400'
@@ -383,13 +372,8 @@ export function ProviderLimitsSection({
                                   ? 'h-full bg-amber-400'
                                   : 'h-full'
                             }
-                            initial={{ width: 0 }}
-                            animate={inView ? { width: `${riskProgress}%` } : { width: 0 }}
-                            transition={{
-                              duration: 0.8,
-                              delay: 0.08 + index * 0.04,
-                              ease: 'easeOut',
-                            }}
+                            width={`${riskProgress}%`}
+                            order={index * 2}
                             {...(row.riskStatus === 'limit' || row.riskStatus === 'warning'
                               ? {}
                               : { style: { backgroundColor: providerStyle.color } })}
@@ -421,23 +405,14 @@ export function ProviderLimitsSection({
                       </div>
                       <div className="h-2 overflow-hidden rounded-full bg-muted/30">
                         {row.hasSubscription ? (
-                          <motion.div
+                          <AnimatedBarFill
                             className={
                               row.subscriptionStatus === 'gain'
                                 ? 'h-full bg-emerald-400'
                                 : 'h-full bg-amber-300'
                             }
-                            initial={{ width: 0 }}
-                            animate={
-                              inView
-                                ? { width: `${Math.max(8, subscriptionProgressWidth)}%` }
-                                : { width: 0 }
-                            }
-                            transition={{
-                              duration: 0.8,
-                              delay: 0.12 + index * 0.04,
-                              ease: 'easeOut',
-                            }}
+                            width={`${subscriptionProgressWidth}%`}
+                            order={index * 2 + 1}
                           />
                         ) : (
                           <div className="h-full w-full bg-muted/20" />
@@ -447,7 +422,7 @@ export function ProviderLimitsSection({
                   </div>
                 </CardContent>
               </Card>
-            </motion.div>
+            </DashboardMotionItem>
           )
         })}
       </div>
@@ -483,11 +458,9 @@ export function ProviderLimitsSection({
                   : '0%'
 
               return (
-                <motion.div
+                <DashboardMotionItem
                   key={row.provider}
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
-                  transition={{ duration: 0.35, delay: 0.04 + index * 0.04 }}
+                  delayMs={90 + index * 40}
                   className="rounded-xl border border-border/50 bg-muted/10 p-4"
                 >
                   <div className="flex flex-wrap items-start justify-between gap-3">
@@ -531,32 +504,22 @@ export function ProviderLimitsSection({
                             style={{ left: limitPosition, width: `calc(100% - ${limitPosition})` }}
                           />
 
-                          <motion.div
+                          <AnimatedBarFill
                             className={
                               row.riskStatus === 'warning'
                                 ? 'absolute top-5 left-0 h-4 rounded-full bg-amber-400'
                                 : 'absolute top-5 left-0 h-4 rounded-full bg-sky-400'
                             }
-                            initial={{ width: 0 }}
-                            animate={inView ? { width: withinLimitWidth } : { width: 0 }}
-                            transition={{
-                              duration: 0.75,
-                              delay: 0.08 + index * 0.04,
-                              ease: 'easeOut',
-                            }}
+                            width={withinLimitWidth}
+                            order={index * 2}
                           />
 
                           {row.overrun > 0 && (
-                            <motion.div
+                            <AnimatedBarFill
                               className="absolute top-5 h-4 rounded-r-full bg-red-400"
                               style={{ left: limitPosition }}
-                              initial={{ width: 0 }}
-                              animate={inView ? { width: overLimitWidth } : { width: 0 }}
-                              transition={{
-                                duration: 0.75,
-                                delay: 0.14 + index * 0.04,
-                                ease: 'easeOut',
-                              }}
+                              width={overLimitWidth}
+                              order={index * 2 + 1}
                             />
                           )}
 
@@ -572,15 +535,10 @@ export function ProviderLimitsSection({
                           </div>
                         </>
                       ) : (
-                        <motion.div
+                        <AnimatedBarFill
                           className="absolute top-5 left-0 h-4 rounded-full bg-muted-foreground/40"
-                          initial={{ width: 0 }}
-                          animate={inView ? { width: costWidth } : { width: 0 }}
-                          transition={{
-                            duration: 0.75,
-                            delay: 0.08 + index * 0.04,
-                            ease: 'easeOut',
-                          }}
+                          width={costWidth}
+                          order={index * 2}
                         />
                       )}
 
@@ -639,7 +597,7 @@ export function ProviderLimitsSection({
                       </div>
                     </div>
                   </div>
-                </motion.div>
+                </DashboardMotionItem>
               )
             })}
           </div>
@@ -676,11 +634,9 @@ export function ProviderLimitsSection({
                   : '0%'
 
               return (
-                <motion.div
+                <DashboardMotionItem
                   key={row.provider}
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
-                  transition={{ duration: 0.35, delay: 0.04 + index * 0.04 }}
+                  delayMs={90 + index * 40}
                   className="rounded-xl border border-border/50 bg-muted/10 p-4"
                 >
                   <div className="flex flex-wrap items-start justify-between gap-3">
@@ -724,28 +680,18 @@ export function ProviderLimitsSection({
                             style={{ left: subPosition, width: `calc(100% - ${subPosition})` }}
                           />
 
-                          <motion.div
+                          <AnimatedBarFill
                             className="absolute top-5 left-0 h-4 rounded-full bg-amber-300"
-                            initial={{ width: 0 }}
-                            animate={inView ? { width: withinSubscriptionWidth } : { width: 0 }}
-                            transition={{
-                              duration: 0.75,
-                              delay: 0.08 + index * 0.04,
-                              ease: 'easeOut',
-                            }}
+                            width={withinSubscriptionWidth}
+                            order={index * 2}
                           />
 
                           {row.subscriptionGain > 0 && (
-                            <motion.div
+                            <AnimatedBarFill
                               className="absolute top-5 h-4 rounded-r-full bg-emerald-400"
                               style={{ left: subPosition }}
-                              initial={{ width: 0 }}
-                              animate={inView ? { width: overSubscriptionWidth } : { width: 0 }}
-                              transition={{
-                                duration: 0.75,
-                                delay: 0.14 + index * 0.04,
-                                ease: 'easeOut',
-                              }}
+                              width={overSubscriptionWidth}
+                              order={index * 2 + 1}
                             />
                           )}
 
@@ -761,15 +707,10 @@ export function ProviderLimitsSection({
                           </div>
                         </>
                       ) : (
-                        <motion.div
+                        <AnimatedBarFill
                           className="absolute top-5 left-0 h-4 rounded-full bg-muted-foreground/40"
-                          initial={{ width: 0 }}
-                          animate={inView ? { width: costWidth } : { width: 0 }}
-                          transition={{
-                            duration: 0.75,
-                            delay: 0.08 + index * 0.04,
-                            ease: 'easeOut',
-                          }}
+                          width={costWidth}
+                          order={index * 2}
                         />
                       )}
 
@@ -828,7 +769,7 @@ export function ProviderLimitsSection({
                       </div>
                     </div>
                   </div>
-                </motion.div>
+                </DashboardMotionItem>
               )
             })}
           </div>
@@ -902,9 +843,7 @@ export function ProviderLimitsSection({
                       stroke="rgb(74 222 128)"
                       fill="url(#limits-gain-area)"
                       strokeWidth={2}
-                      isAnimationActive={animate}
-                      animationBegin={0}
-                      animationDuration={CHART_ANIMATION.duration}
+                      {...getAreaAnimationProps(animate)}
                     />
                     <Area
                       type="monotone"
@@ -913,9 +852,7 @@ export function ProviderLimitsSection({
                       stroke="rgb(248 113 113)"
                       fill="url(#limits-risk-area)"
                       strokeWidth={2}
-                      isAnimationActive={animate}
-                      animationBegin={CHART_ANIMATION.stagger * 1.2}
-                      animationDuration={CHART_ANIMATION.duration}
+                      {...getAreaAnimationProps(animate, { order: 1, role: 'stacked' })}
                     />
                     <Line
                       type="monotone"
@@ -924,9 +861,7 @@ export function ProviderLimitsSection({
                       stroke={CHART_COLORS.cost}
                       strokeWidth={2}
                       dot={false}
-                      isAnimationActive={animate}
-                      animationBegin={CHART_ANIMATION.stagger * 1.6}
-                      animationDuration={CHART_ANIMATION.slowDuration}
+                      {...getLineAnimationProps(animate, { role: 'secondary' })}
                     />
                     <Line
                       type="monotone"
@@ -937,9 +872,7 @@ export function ProviderLimitsSection({
                       strokeWidth={2}
                       dot={false}
                       connectNulls
-                      isAnimationActive={animate}
-                      animationBegin={CHART_ANIMATION.stagger * 2}
-                      animationDuration={CHART_ANIMATION.slowDuration}
+                      {...getLineAnimationProps(animate, { order: 1, role: 'secondary' })}
                     />
                     <Line
                       type="monotone"
@@ -950,9 +883,7 @@ export function ProviderLimitsSection({
                       strokeWidth={2}
                       dot={false}
                       connectNulls
-                      isAnimationActive={animate}
-                      animationBegin={CHART_ANIMATION.stagger * 2.3}
-                      animationDuration={CHART_ANIMATION.slowDuration}
+                      {...getLineAnimationProps(animate, { order: 2, role: 'secondary' })}
                     />
                   </ComposedChart>
                 </ResponsiveContainer>
diff --git a/src/components/features/request-quality/RequestQuality.tsx b/src/components/features/request-quality/RequestQuality.tsx
index a13c40b..8826b85 100644
--- a/src/components/features/request-quality/RequestQuality.tsx
+++ b/src/components/features/request-quality/RequestQuality.tsx
@@ -1,11 +1,9 @@
-import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useInView } from 'framer-motion'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { InfoHeading } from '@/components/features/help/InfoHeading'
+import { AnimatedBarFill } from '@/components/features/animations/AnimatedBarFill'
 import { FEATURE_HELP } from '@/lib/help-content'
 import { formatCurrency, formatNumber, formatPercent, formatTokens } from '@/lib/formatters'
-import { useShouldReduceMotion } from '@/lib/motion'
 import type { DashboardMetrics, ViewMode } from '@/types'
 
 interface RequestQualityProps {
@@ -16,9 +14,6 @@ interface RequestQualityProps {
 /** Renders request-efficiency summary cards for the current slice. */
 export function RequestQuality({ metrics, viewMode }: RequestQualityProps) {
   const { t } = useTranslation()
-  const sectionRef = useRef<HTMLDivElement | null>(null)
-  const inView = useInView(sectionRef, { once: true, amount: 0.25 })
-  const shouldReduceMotion = useShouldReduceMotion()
   const cachePerRequest =
     metrics.totalRequests > 0 ? metrics.totalCacheRead / metrics.totalRequests : 0
   const thinkingPerRequest =
@@ -62,7 +57,7 @@ export function RequestQuality({ metrics, viewMode }: RequestQualityProps) {
   ]
 
   return (
-    <Card ref={sectionRef} className="overflow-visible">
+    <Card className="overflow-visible">
       <CardHeader>
         <InfoHeading info={FEATURE_HELP.requestQuality}>
           <CardTitle className="text-sm font-medium text-muted-foreground">
@@ -72,7 +67,7 @@ export function RequestQuality({ metrics, viewMode }: RequestQualityProps) {
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="grid grid-cols-2 gap-3 xl:grid-cols-4">
-          {qualityMetrics.map((item) => (
+          {qualityMetrics.map((item, index) => (
             <div key={item.label} className="rounded-xl border border-border/50 bg-muted/15 p-3">
               <div className="text-[10px] tracking-[0.14em] text-muted-foreground uppercase">
                 {item.label}
@@ -80,17 +75,19 @@ export function RequestQuality({ metrics, viewMode }: RequestQualityProps) {
               <div className="mt-1 text-lg font-semibold tabular-nums">{item.value}</div>
               <div className="mt-1 text-xs text-muted-foreground">{item.hint}</div>
               <div className="mt-3 h-1.5 overflow-hidden rounded-full bg-muted/40">
-                <div
-                  className="h-full rounded-full transition-[width] duration-700 ease-out motion-reduce:transition-none"
+                <AnimatedBarFill
+                  className="h-full rounded-full"
+                  order={index}
                   style={{
                     backgroundColor: `hsl(${item.accent})`,
-                    width:
-                      (inView || shouldReduceMotion) && metrics.hasRequestData
-                        ? item.progress > 0
-                          ? `${Math.max(item.progress * 100, 6)}%`
-                          : '0%'
-                        : '0%',
                   }}
+                  width={
+                    metrics.hasRequestData
+                      ? item.progress > 0
+                        ? `${Math.max(item.progress * 100, 6)}%`
+                        : '0%'
+                      : '0%'
+                  }
                 />
               </div>
             </div>
diff --git a/src/components/features/risk/ConcentrationRisk.tsx b/src/components/features/risk/ConcentrationRisk.tsx
index fabb75e..4fe05e3 100644
--- a/src/components/features/risk/ConcentrationRisk.tsx
+++ b/src/components/features/risk/ConcentrationRisk.tsx
@@ -1,4 +1,5 @@
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { AnimatedBarFill } from '@/components/features/animations/AnimatedBarFill'
 import { useTranslation } from 'react-i18next'
 import { InfoHeading } from '@/components/features/help/InfoHeading'
 import { FEATURE_HELP } from '@/lib/help-content'
@@ -55,9 +56,9 @@ export function ConcentrationRisk({
               </span>
             </div>
             <div className="mt-3 h-2 overflow-hidden rounded-full bg-muted/40">
-              <div
+              <AnimatedBarFill
                 className="h-full rounded-full bg-primary"
-                style={{ width: `${Math.min(topModelShare, 100)}%` }}
+                width={`${Math.min(topModelShare, 100)}%`}
               />
             </div>
             <div className="mt-2 text-xs text-muted-foreground">
@@ -81,9 +82,9 @@ export function ConcentrationRisk({
               </span>
             </div>
             <div className="mt-3 h-2 overflow-hidden rounded-full bg-muted/40">
-              <div
+              <AnimatedBarFill
                 className="h-full rounded-full bg-chart-3"
-                style={{ width: `${Math.min(topProviderShare, 100)}%` }}
+                width={`${Math.min(topProviderShare, 100)}%`}
               />
             </div>
             <div className="mt-2 text-xs text-muted-foreground">
diff --git a/src/components/tables/RecentDays.tsx b/src/components/tables/RecentDays.tsx
index 228dd84..c88496d 100644
--- a/src/components/tables/RecentDays.tsx
+++ b/src/components/tables/RecentDays.tsx
@@ -13,6 +13,7 @@ import { useTranslation } from 'react-i18next'
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { FormattedValue } from '@/components/ui/formatted-value'
+import { AnimatedBarFill } from '@/components/features/animations/AnimatedBarFill'
 import { InfoHeading } from '@/components/features/help/InfoHeading'
 import { FEATURE_HELP } from '@/lib/help-content'
 import {
@@ -567,9 +568,11 @@ export function RecentDays({ data, onClickDay, viewMode = 'daily' }: RecentDaysP
                       {formatDate(day.date, 'long')}
                     </td>
                     <td className="relative px-2 py-2.5 text-right font-mono tabular-nums">
-                      <div
-                        className="absolute inset-y-1 left-0 rounded-sm bg-primary/8 transition-all duration-300"
-                        style={{ width: `${maxCost > 0 ? (day.totalCost / maxCost) * 100 : 0}%` }}
+                      <AnimatedBarFill
+                        className="absolute inset-y-1 left-0 rounded-sm bg-primary/8"
+                        width={`${maxCost > 0 ? (day.totalCost / maxCost) * 100 : 0}%`}
+                        delayMs={140}
+                        durationMs={520}
                       />
                       <span className="relative">
                         <FormattedValue value={day.totalCost} type="currency" />
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index fc63819..5dfca21 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { motion } from 'framer-motion'
+import { useDashboardSectionMotion } from '@/components/dashboard/DashboardMotion'
 import { cn } from '@/lib/cn'
 import { useShouldReduceMotion } from '@/lib/motion'
 
@@ -7,18 +8,21 @@ type CardProps = React.ComponentPropsWithoutRef<typeof motion.div>
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
   const shouldReduceMotion = useShouldReduceMotion()
-  const motionProps = shouldReduceMotion
-    ? {
-        initial: false as const,
-        animate: { opacity: 1, y: 0 },
-        transition: { duration: 0 },
-      }
-    : {
-        initial: { opacity: 0, y: 14 },
-        whileInView: { opacity: 1, y: 0 },
-        viewport: { once: true, amount: 0.15 },
-        transition: { duration: 0.35, ease: 'easeOut' as const },
-      }
+  const dashboardSectionMotion = useDashboardSectionMotion()
+  const staticMotion = {
+    initial: false as const,
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0 },
+  }
+  const motionProps =
+    shouldReduceMotion || dashboardSectionMotion
+      ? staticMotion
+      : {
+          initial: { opacity: 0, y: 14 },
+          whileInView: { opacity: 1, y: 0 },
+          viewport: { once: true, amount: 0.15 },
+          transition: { duration: 0.35, ease: 'easeOut' as const },
+        }
 
   return (
     <motion.div
diff --git a/src/lib/help-content.ts b/src/lib/help-content.ts
index f60a761..69c46be 100644
--- a/src/lib/help-content.ts
+++ b/src/lib/help-content.ts
@@ -20,9 +20,17 @@ const HELP_CONTENT = {
         'Zeigt die durchschnittlichen Kosten pro 1 Million verarbeiteter Tokens. Niedrigere Werte sprechen für effizientere Nutzung.',
       mostExpensiveDay:
         'Zeigt den Zeitraumspunkt mit den höchsten API-Kosten im aktuellen Ausschnitt.',
+      mostExpensiveMonth: 'Zeigt den Monat mit den höchsten API-Kosten im aktuellen Ausschnitt.',
+      mostExpensiveYear: 'Zeigt das Jahr mit den höchsten API-Kosten im aktuellen Ausschnitt.',
       cheapestDay:
         'Zeigt den Zeitraumspunkt mit den niedrigsten API-Kosten im aktuellen Ausschnitt.',
       avgCostPerDay: 'Zeigt die durchschnittlichen Kosten pro aktivem Zeitraumspunkt.',
+      peak7Days:
+        'Zeigt das teuerste rollierende 7-Tage-Fenster im aktuellen Ausschnitt und macht kurzfristige Lastspitzen sichtbar.',
+      avgCostPerMonth:
+        'Zeigt die durchschnittlichen Kosten pro aktivem Monat im aktuellen Ausschnitt.',
+      avgCostPerYear:
+        'Zeigt die durchschnittlichen Kosten pro aktivem Jahr im aktuellen Ausschnitt.',
       outputTokens:
         'Zeigt die Menge der generierten Output-Tokens. Diese sind meist teurer als reine Input-Tokens.',
     },
@@ -134,8 +142,14 @@ const HELP_CONTENT = {
       costPerMillion:
         'Shows average cost per 1 million processed tokens. Lower values indicate more efficient usage.',
       mostExpensiveDay: 'Shows the period point with the highest API cost in the current slice.',
+      mostExpensiveMonth: 'Shows the month with the highest API cost in the current slice.',
+      mostExpensiveYear: 'Shows the year with the highest API cost in the current slice.',
       cheapestDay: 'Shows the period point with the lowest API cost in the current slice.',
       avgCostPerDay: 'Shows the average cost per active period point.',
+      peak7Days:
+        'Shows the highest-cost rolling 7-day window in the current slice to highlight short-term peaks.',
+      avgCostPerMonth: 'Shows the average cost per active month in the current slice.',
+      avgCostPerYear: 'Shows the average cost per active year in the current slice.',
       outputTokens:
         'Shows the volume of generated output tokens. These are usually more expensive than pure input tokens.',
     },
diff --git a/src/locales/de/common.json b/src/locales/de/common.json
index ff700f4..8fccac8 100644
--- a/src/locales/de/common.json
+++ b/src/locales/de/common.json
@@ -239,6 +239,7 @@
       "vsAverage": "{{direction}}{{value}}% vs. Ø",
       "vsAverageWithVolatility": "{{direction}}{{value}}% vs. Ø · σ Anf. {{volatility}}",
       "medianInfo": "Der Median zeigt den typischen Wert und ist weniger anfällig für Ausreisser als der Durchschnitt.",
+      "dominantProviderInfo": "Zeigt den Anbieter mit dem grössten Kostenanteil im aktuellen Ausschnitt zusammen mit dessen Gewichtung und Kostenbeitrag.",
       "requestLeader": "{{model}} · {{requests}} Anfragen",
       "dominantProviderSubtitle": "{{share}} Anteil · {{cost}}{{requestLeader}}"
     },
diff --git a/src/locales/en/common.json b/src/locales/en/common.json
index fde20b9..ef27389 100644
--- a/src/locales/en/common.json
+++ b/src/locales/en/common.json
@@ -239,6 +239,7 @@
       "vsAverage": "{{direction}}{{value}}% vs avg",
       "vsAverageWithVolatility": "{{direction}}{{value}}% vs avg · σ Req {{volatility}}",
       "medianInfo": "The median shows the typical value and is less sensitive to outliers than the average.",
+      "dominantProviderInfo": "Shows the provider with the largest share of cost in the current slice, together with its relative weight and cost contribution.",
       "requestLeader": "{{model}} · {{requests}} req",
       "dominantProviderSubtitle": "{{share}} share · {{cost}}{{requestLeader}}"
     },
diff --git a/tests/frontend/cache-roi.test.tsx b/tests/frontend/cache-roi.test.tsx
index 428b2c1..805b3b4 100644
--- a/tests/frontend/cache-roi.test.tsx
+++ b/tests/frontend/cache-roi.test.tsx
@@ -7,6 +7,34 @@ import { TooltipProvider } from '@/components/ui/tooltip'
 import { initI18n } from '@/lib/i18n'
 import type { DailyUsage } from '@/types'
 
+vi.mock('@/components/features/animations/AnimatedBarFill', () => ({
+  AnimatedBarFill: ({
+    width,
+    className,
+    order,
+    delayMs,
+    durationMs,
+    style,
+  }: {
+    width: string
+    className?: string
+    order?: number
+    delayMs?: number
+    durationMs?: number
+    style?: React.CSSProperties
+  }) => (
+    <div
+      data-testid="animated-bar-fill"
+      data-width={width}
+      data-order={order === undefined ? '' : String(order)}
+      data-delay-ms={delayMs === undefined ? '' : String(delayMs)}
+      data-duration-ms={durationMs === undefined ? '' : String(durationMs)}
+      className={className}
+      style={style}
+    />
+  ),
+}))
+
 describe('CacheROI', () => {
   beforeEach(async () => {
     vi.stubGlobal(
@@ -62,9 +90,56 @@ describe('CacheROI', () => {
     expect(savingsValue).toHaveClass('text-rose-700')
 
     const withCacheRow = screen.getByText('With cache').parentElement
-    const withCacheBar = withCacheRow?.querySelector('[style*="width: 100%"]') as HTMLElement | null
+    const withCacheBar = withCacheRow?.querySelector('.bg-rose-500\\/60') as HTMLElement | null
     expect(withCacheBar).not.toBeNull()
     expect(withCacheBar?.className).toContain('bg-rose-500/60')
     expect(container.querySelector('[style*="width: 120%"]')).toBeNull()
   })
+
+  it('animates both the paid and saved comparison segments through AnimatedBarFill', () => {
+    const data: DailyUsage[] = [
+      {
+        date: '2026-04-07',
+        inputTokens: 100,
+        outputTokens: 0,
+        cacheCreationTokens: 0,
+        cacheReadTokens: 1_000_000,
+        thinkingTokens: 0,
+        totalTokens: 1_000_100,
+        totalCost: 2,
+        requestCount: 2,
+        modelsUsed: ['mystery-model'],
+        modelBreakdowns: [
+          {
+            modelName: 'mystery-model',
+            inputTokens: 100,
+            outputTokens: 0,
+            cacheCreationTokens: 0,
+            cacheReadTokens: 1_000_000,
+            thinkingTokens: 0,
+            cost: 2,
+            requestCount: 2,
+          },
+        ],
+      },
+    ]
+
+    render(
+      <TooltipProvider>
+        <CacheROI data={data} />
+      </TooltipProvider>,
+    )
+
+    const fills = screen.getAllByTestId('animated-bar-fill')
+    expect(fills).toHaveLength(3)
+    expect(fills[0]).toHaveAttribute('data-width', '100%')
+    expect(fills[0]).toHaveAttribute('data-order', '0')
+    const paidWidth = Number.parseFloat(fills[1].getAttribute('data-width') ?? '0')
+    const savedWidth = Number.parseFloat(fills[2].getAttribute('data-width') ?? '0')
+    expect(paidWidth).toBeGreaterThan(0)
+    expect(fills[1]).toHaveAttribute('data-order', '0')
+    expect(savedWidth).toBeGreaterThan(0)
+    expect(fills[2]).toHaveAttribute('data-order', '1')
+    expect(paidWidth + savedWidth).toBeCloseTo(100, 5)
+  })
 })
diff --git a/tests/frontend/chart-legend-integration.test.tsx b/tests/frontend/chart-legend-integration.test.tsx
new file mode 100644
index 0000000..a0f80d2
--- /dev/null
+++ b/tests/frontend/chart-legend-integration.test.tsx
@@ -0,0 +1,110 @@
+// @vitest-environment jsdom
+
+import { cloneElement, type ReactElement, type ReactNode } from 'react'
+import { render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { CostByModel } from '@/components/charts/CostByModel'
+import { RequestsOverTime } from '@/components/charts/RequestsOverTime'
+import { TokenTypes } from '@/components/charts/TokenTypes'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { initI18n } from '@/lib/i18n'
+
+let lastLegendPayload: Array<{ value: string; color: string }> = []
+
+vi.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: { children: ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  PieChart: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  ComposedChart: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Pie: ({ children, data = [] }: { children: ReactNode; data?: Array<{ name: string }> }) => {
+    lastLegendPayload = data.map((entry, index) => ({
+      value: entry.name,
+      color: `hsl(${(index + 1) * 40} 70% 50%)`,
+    }))
+    return <div>{children}</div>
+  },
+  Legend: ({ content }: { content?: ReactElement }) =>
+    content ? <div>{cloneElement(content, { payload: lastLegendPayload })}</div> : null,
+  Tooltip: () => null,
+  Cell: () => null,
+  Area: () => null,
+  Line: () => null,
+  XAxis: () => null,
+  YAxis: () => null,
+  CartesianGrid: () => null,
+}))
+
+describe('Chart legend integrations', () => {
+  beforeEach(async () => {
+    lastLegendPayload = []
+    vi.stubGlobal(
+      'IntersectionObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      },
+    )
+    await initI18n('en')
+  })
+
+  it('wraps CostByModel legend labels instead of relying on horizontal scroll', () => {
+    const { container } = render(
+      <TooltipProvider>
+        <CostByModel
+          data={[
+            { name: 'GPT-5.4', value: 60 },
+            { name: 'Claude Sonnet 4.5', value: 25 },
+          ]}
+        />
+      </TooltipProvider>,
+    )
+
+    expect(screen.getByText(/GPT-5\.4 \(\$60(?:\.0+)?\)/)).toBeInTheDocument()
+    expect(screen.getByText(/Claude Sonnet 4\.5 \(\$25(?:\.0+)?\)/)).toBeInTheDocument()
+    expect(container.querySelector('.overflow-x-auto')).toBeNull()
+    expect(container.querySelector('.flex-wrap')).not.toBeNull()
+  })
+
+  it('wraps TokenTypes legend labels instead of relying on horizontal scroll', () => {
+    const { container } = render(
+      <TooltipProvider>
+        <TokenTypes
+          data={[
+            { name: 'Cache Write', value: 1200 },
+            { name: 'Cache Read', value: 950 },
+          ]}
+        />
+      </TooltipProvider>,
+    )
+
+    expect(screen.getByText('Cache Write (1.2k)')).toBeInTheDocument()
+    expect(screen.getByText('Cache Read (950)')).toBeInTheDocument()
+    expect(container.querySelector('.overflow-x-auto')).toBeNull()
+    expect(container.querySelector('.flex-wrap')).not.toBeNull()
+  })
+
+  it('wraps RequestsOverTime donut legend labels instead of relying on horizontal scroll', () => {
+    const { container } = render(
+      <TooltipProvider>
+        <RequestsOverTime
+          data={[
+            {
+              date: '2026-04-01',
+              totalRequests: 120,
+              totalRequestsMA7: 110,
+              'GPT-5.4': 80,
+              'Claude Sonnet 4.5': 40,
+            },
+          ]}
+        />
+      </TooltipProvider>,
+    )
+
+    expect(screen.getByText('GPT-5.4 (80)')).toBeInTheDocument()
+    expect(screen.getByText('Claude Sonnet 4.5 (40)')).toBeInTheDocument()
+    expect(container.querySelector('.overflow-x-auto')).toBeNull()
+    expect(container.querySelector('.flex-wrap')).not.toBeNull()
+  })
+})
diff --git a/tests/frontend/correlation-analysis.test.tsx b/tests/frontend/correlation-analysis.test.tsx
new file mode 100644
index 0000000..24cdb9d
--- /dev/null
+++ b/tests/frontend/correlation-analysis.test.tsx
@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { CorrelationAnalysis } from '@/components/charts/CorrelationAnalysis'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { initI18n } from '@/lib/i18n'
+import type { DailyUsage } from '@/types'
+
+vi.mock('@/lib/motion', async (importOriginal) => {
+  const actual = await importOriginal()
+  return {
+    ...actual,
+    useShouldReduceMotion: () => true,
+  }
+})
+
+vi.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: { children: ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  ScatterChart: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Scatter: ({
+    data,
+    isAnimationActive,
+  }: {
+    data?: Array<unknown>
+    isAnimationActive?: boolean
+  }) => (
+    <div
+      data-testid="scatter-series"
+      data-points={String(data?.length ?? 0)}
+      data-animate={String(Boolean(isAnimationActive))}
+    />
+  ),
+  XAxis: () => null,
+  YAxis: () => null,
+  CartesianGrid: () => null,
+  Tooltip: () => null,
+  ZAxis: () => null,
+}))
+
+class MockIntersectionObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+function buildDay(overrides: Partial<DailyUsage>): DailyUsage {
+  return {
+    date: '2026-04-01',
+    inputTokens: 100,
+    outputTokens: 40,
+    cacheCreationTokens: 10,
+    cacheReadTokens: 20,
+    thinkingTokens: 5,
+    totalTokens: 175,
+    totalCost: 12,
+    requestCount: 4,
+    modelsUsed: ['gpt-5.4'],
+    modelBreakdowns: [
+      {
+        modelName: 'gpt-5.4',
+        inputTokens: 100,
+        outputTokens: 40,
+        cacheCreationTokens: 10,
+        cacheReadTokens: 20,
+        thinkingTokens: 5,
+        cost: 12,
+        requestCount: 4,
+      },
+    ],
+    ...overrides,
+  }
+}
+
+describe('CorrelationAnalysis', () => {
+  beforeEach(async () => {
+    vi.stubGlobal('IntersectionObserver', MockIntersectionObserver)
+    await initI18n('en')
+  })
+
+  it('renders scatter points statically when reduced motion is enabled', () => {
+    render(
+      <TooltipProvider>
+        <CorrelationAnalysis
+          data={[
+            buildDay({ date: '2026-04-01' }),
+            buildDay({ date: '2026-04-02', totalCost: 20, requestCount: 6, cacheReadTokens: 35 }),
+          ]}
+        />
+      </TooltipProvider>,
+    )
+
+    const series = screen.getAllByTestId('scatter-series')
+    expect(series[0]).toHaveAttribute('data-points', '2')
+    expect(series[1]).toHaveAttribute('data-points', '2')
+    expect(series[0]).toHaveAttribute('data-animate', 'false')
+    expect(series[1]).toHaveAttribute('data-animate', 'false')
+  })
+})
diff --git a/tests/frontend/cost-over-time.test.tsx b/tests/frontend/cost-over-time.test.tsx
index 787e420..5c92e1e 100644
--- a/tests/frontend/cost-over-time.test.tsx
+++ b/tests/frontend/cost-over-time.test.tsx
@@ -38,16 +38,31 @@ describe('CostOverTime', () => {
   })
 
   it('renders legend entries in a horizontally readable list', () => {
-    render(
+    const { container } = render(
       <ChartLegend
         payload={[
           { value: 'Cost', color: '#3b82f6' },
-          { value: '7-day avg', color: '#8b5cf6' },
+          { value: '7-day average with a much longer label', color: '#8b5cf6' },
         ]}
       />,
     )
 
     expect(screen.getByText('Cost')).toBeInTheDocument()
-    expect(screen.getByText('7-day avg')).toBeInTheDocument()
+    expect(screen.getByText('7-day average with a much longer label')).toBeInTheDocument()
+    expect(container.querySelector('.overflow-x-auto')).toBeNull()
+    expect(container.querySelector('.flex-wrap')).not.toBeNull()
+  })
+
+  it('supports custom legend labels while keeping the wrap layout', () => {
+    const { container } = render(
+      <ChartLegend
+        payload={[{ value: 'GPT-5.4', color: '#3b82f6' }]}
+        renderLabel={(entry) => `${entry.value} ($42.00)`}
+      />,
+    )
+
+    expect(screen.getByText('GPT-5.4 ($42.00)')).toBeInTheDocument()
+    expect(container.querySelector('.overflow-x-auto')).toBeNull()
+    expect(container.querySelector('.flex-wrap')).not.toBeNull()
   })
 })
diff --git a/tests/frontend/dashboard-motion.test.tsx b/tests/frontend/dashboard-motion.test.tsx
new file mode 100644
index 0000000..a3df6d9
--- /dev/null
+++ b/tests/frontend/dashboard-motion.test.tsx
@@ -0,0 +1,252 @@
+// @vitest-environment jsdom
+
+import { useRef } from 'react'
+import { act, render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { ChartCard, useChartAnimationState } from '@/components/charts/ChartCard'
+import {
+  AnimatedDashboardSection,
+  DashboardMotionItem,
+  useDashboardElementMotion,
+  useDashboardSectionMotion,
+} from '@/components/dashboard/DashboardMotion'
+import { initI18n } from '@/lib/i18n'
+
+class MockIntersectionObserver {
+  static instances: MockIntersectionObserver[] = []
+
+  callback: IntersectionObserverCallback
+  options?: IntersectionObserverInit
+  observedTargets = new Set<Element>()
+
+  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+    this.callback = callback
+    this.options = options
+    MockIntersectionObserver.instances.push(this)
+  }
+
+  observe(target: Element) {
+    this.observedTargets.add(target)
+  }
+
+  unobserve() {}
+
+  disconnect() {}
+
+  trigger(isIntersecting: boolean) {
+    this.callback(
+      [
+        {
+          isIntersecting,
+          target: document.createElement('div'),
+        } as IntersectionObserverEntry,
+      ],
+      this as unknown as IntersectionObserver,
+    )
+  }
+}
+
+function getObserver(predicate: (observer: MockIntersectionObserver) => boolean) {
+  const observer = MockIntersectionObserver.instances.find(predicate)
+  expect(observer).toBeDefined()
+  return observer!
+}
+
+function getObservers(predicate: (observer: MockIntersectionObserver) => boolean) {
+  return MockIntersectionObserver.instances.filter(predicate)
+}
+
+function MotionProbe() {
+  const motion = useDashboardSectionMotion()
+  const chartMotion = useChartAnimationState()
+
+  return (
+    <>
+      <div data-testid="section-visible">{String(motion?.sectionVisible)}</div>
+      <div data-testid="chart-delay">{String(motion?.chartStartDelayMs)}</div>
+      <div data-testid="chart-active">{String(chartMotion.active)}</div>
+    </>
+  )
+}
+
+function ItemMotionProbe() {
+  const itemRef = useRef<HTMLDivElement | null>(null)
+  const itemMotion = useDashboardElementMotion(itemRef)
+
+  return (
+    <div ref={itemRef} data-testid="item-active">
+      {String(itemMotion.active)}
+    </div>
+  )
+}
+
+describe('AnimatedDashboardSection', () => {
+  beforeEach(async () => {
+    MockIntersectionObserver.instances = []
+    vi.stubGlobal('IntersectionObserver', MockIntersectionObserver)
+    await initI18n('en')
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('preloads before reveal and only activates chart animation once visible', async () => {
+    let resolvePreload: (() => void) | null = null
+    const preloadPromise = new Promise<void>((resolve) => {
+      resolvePreload = resolve
+    })
+    const handlePreload = vi.fn(() => preloadPromise)
+
+    render(
+      <AnimatedDashboardSection
+        id="demo"
+        placeholderClassName="min-h-[120px]"
+        onPreload={handlePreload}
+      >
+        <ChartCard title="Demo chart">
+          <MotionProbe />
+        </ChartCard>
+      </AnimatedDashboardSection>,
+    )
+
+    expect(screen.queryByTestId('section-visible')).not.toBeInTheDocument()
+
+    act(() => {
+      getObserver((observer) => observer.options?.rootMargin === '0px 0px 45% 0px').trigger(true)
+    })
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    expect(handlePreload).toHaveBeenCalledTimes(1)
+    expect(screen.queryByTestId('section-visible')).not.toBeInTheDocument()
+
+    act(() => {
+      getObserver((observer) => observer.options?.threshold === 0.14).trigger(true)
+    })
+
+    expect(screen.queryByTestId('section-visible')).not.toBeInTheDocument()
+
+    await act(async () => {
+      resolvePreload?.()
+      await preloadPromise
+    })
+
+    expect(screen.getByTestId('section-visible')).toHaveTextContent('true')
+    expect(screen.getByTestId('chart-active')).toHaveTextContent('false')
+
+    act(() => {
+      getObservers(
+        (observer) =>
+          observer.options?.rootMargin !== '0px 0px 45% 0px' &&
+          observer.options?.threshold !== 0.14,
+      ).forEach((observer) => observer.trigger(true))
+    })
+
+    expect(screen.getByTestId('section-visible')).toHaveTextContent('true')
+    expect(screen.getByTestId('chart-active')).toHaveTextContent('true')
+    expect(screen.getByTestId('chart-delay')).toHaveTextContent('285')
+  })
+
+  it('keeps preloaded hidden content inert until the section is revealed', async () => {
+    render(
+      <AnimatedDashboardSection
+        id="demo"
+        placeholderClassName="min-h-[120px]"
+        onPreload={() => Promise.resolve()}
+      >
+        <ChartCard title="Demo chart">
+          <div>Chart body</div>
+        </ChartCard>
+      </AnimatedDashboardSection>,
+    )
+
+    act(() => {
+      getObserver((observer) => observer.options?.rootMargin === '0px 0px 45% 0px').trigger(true)
+    })
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    const inertContainer = document.querySelector('[inert]')
+    const button = screen.getByRole('button', { name: 'Demo chart expand' })
+
+    expect(inertContainer).toHaveAttribute('inert')
+    expect(button).toHaveAttribute('tabindex', '-1')
+
+    act(() => {
+      getObserver((observer) => observer.options?.threshold === 0.14).trigger(true)
+    })
+
+    expect(document.querySelector('[data-section-visible="true"]')).toBeInTheDocument()
+    expect(button).not.toHaveAttribute('tabindex', '-1')
+  })
+
+  it('still prepares and reveals content when onPreload throws synchronously', async () => {
+    render(
+      <AnimatedDashboardSection
+        id="demo"
+        onPreload={() => {
+          throw new Error('sync preload failure')
+        }}
+      >
+        <ChartCard title="Demo chart">
+          <MotionProbe />
+        </ChartCard>
+      </AnimatedDashboardSection>,
+    )
+
+    act(() => {
+      getObserver((observer) => observer.options?.rootMargin === '0px 0px 45% 0px').trigger(true)
+      getObserver((observer) => observer.options?.threshold === 0.14).trigger(true)
+    })
+
+    await act(async () => {
+      await Promise.resolve()
+    })
+
+    expect(screen.getByTestId('section-visible')).toHaveTextContent('true')
+  })
+
+  it('treats item motion as active when IntersectionObserver is unavailable', async () => {
+    vi.unstubAllGlobals()
+
+    render(
+      <AnimatedDashboardSection id="demo" eager>
+        <ItemMotionProbe />
+      </AnimatedDashboardSection>,
+    )
+
+    expect(screen.getByTestId('item-active')).toHaveTextContent('true')
+  })
+
+  it('keeps hidden dashboard items non-interactive until they reveal', () => {
+    render(
+      <AnimatedDashboardSection id="demo" eager>
+        <DashboardMotionItem data-testid="item-wrapper">
+          <button type="button">Item action</button>
+        </DashboardMotionItem>
+      </AnimatedDashboardSection>,
+    )
+
+    const wrapper = screen.getByTestId('item-wrapper')
+    const button = screen.getByRole('button', { name: 'Item action', hidden: true })
+
+    expect(wrapper).toHaveAttribute('aria-hidden', 'true')
+    expect(wrapper).toHaveStyle({ pointerEvents: 'none' })
+    expect(button).toHaveAttribute('tabindex', '-1')
+
+    act(() => {
+      getObservers((observer) => observer.options?.threshold === 0.24).forEach((observer) =>
+        observer.trigger(true),
+      )
+    })
+
+    expect(wrapper).toHaveAttribute('aria-hidden', 'false')
+    expect(wrapper).not.toHaveStyle({ pointerEvents: 'none' })
+    expect(button).not.toHaveAttribute('tabindex', '-1')
+  })
+})
diff --git a/tests/frontend/distribution-analysis.test.tsx b/tests/frontend/distribution-analysis.test.tsx
new file mode 100644
index 0000000..d1f7329
--- /dev/null
+++ b/tests/frontend/distribution-analysis.test.tsx
@@ -0,0 +1,125 @@
+// @vitest-environment jsdom
+
+import { act, render, screen } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { DistributionAnalysis } from '@/components/charts/DistributionAnalysis'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { initI18n } from '@/lib/i18n'
+import type { DailyUsage } from '@/types'
+
+vi.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: { children: ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  BarChart: ({ children }: { children: ReactNode }) => (
+    <div data-testid="distribution-bar-chart">{children}</div>
+  ),
+  Bar: ({
+    children,
+    dataKey,
+    isAnimationActive,
+  }: {
+    children?: ReactNode
+    dataKey: string
+    isAnimationActive?: boolean
+  }) => (
+    <div
+      data-testid={`distribution-bar-${dataKey}`}
+      data-animate={String(Boolean(isAnimationActive))}
+    >
+      {children}
+    </div>
+  ),
+  XAxis: () => null,
+  YAxis: () => null,
+  CartesianGrid: () => null,
+  Tooltip: () => null,
+  Cell: () => null,
+}))
+
+class MockIntersectionObserver {
+  static instances: MockIntersectionObserver[] = []
+
+  callback: IntersectionObserverCallback
+
+  constructor(callback: IntersectionObserverCallback) {
+    this.callback = callback
+    MockIntersectionObserver.instances.push(this)
+  }
+
+  observe() {}
+
+  unobserve() {}
+
+  disconnect() {}
+
+  trigger(isIntersecting: boolean) {
+    this.callback(
+      [
+        {
+          isIntersecting,
+          target: document.createElement('div'),
+        } as IntersectionObserverEntry,
+      ],
+      this as unknown as IntersectionObserver,
+    )
+  }
+}
+
+function buildDay(overrides: Partial<DailyUsage>): DailyUsage {
+  return {
+    date: '2026-04-01',
+    inputTokens: 100,
+    outputTokens: 40,
+    cacheCreationTokens: 10,
+    cacheReadTokens: 20,
+    thinkingTokens: 5,
+    totalTokens: 175,
+    totalCost: 12,
+    requestCount: 4,
+    modelsUsed: ['gpt-5.4'],
+    modelBreakdowns: [],
+    ...overrides,
+  }
+}
+
+describe('DistributionAnalysis', () => {
+  beforeEach(async () => {
+    MockIntersectionObserver.instances = []
+    vi.stubGlobal('IntersectionObserver', MockIntersectionObserver)
+    await initI18n('en')
+  })
+
+  it('keeps histogram bars inactive until the chart card becomes visible', () => {
+    render(
+      <TooltipProvider>
+        <DistributionAnalysis
+          data={[
+            buildDay({ date: '2026-04-01', totalCost: 5, requestCount: 2, totalTokens: 100 }),
+            buildDay({ date: '2026-04-02', totalCost: 12, requestCount: 4, totalTokens: 200 }),
+            buildDay({ date: '2026-04-03', totalCost: 18, requestCount: 6, totalTokens: 260 }),
+            buildDay({ date: '2026-04-04', totalCost: 30, requestCount: 8, totalTokens: 320 }),
+          ]}
+        />
+      </TooltipProvider>,
+    )
+
+    expect(screen.getAllByTestId('distribution-bar-count')).not.toHaveLength(0)
+    expect(
+      screen
+        .getAllByTestId('distribution-bar-count')
+        .every((bar) => bar.dataset.animate === 'false'),
+    ).toBe(true)
+
+    act(() => {
+      MockIntersectionObserver.instances.forEach((observer) => observer.trigger(true))
+    })
+
+    expect(
+      screen
+        .getAllByTestId('distribution-bar-count')
+        .every((bar) => bar.dataset.animate === 'true'),
+    ).toBe(true)
+  })
+})
diff --git a/tests/frontend/drill-down-modal.test.tsx b/tests/frontend/drill-down-modal.test.tsx
index a54452d..a62c437 100644
--- a/tests/frontend/drill-down-modal.test.tsx
+++ b/tests/frontend/drill-down-modal.test.tsx
@@ -141,7 +141,7 @@ describe('DrillDownModal', () => {
     expect(within(openAiProviderCard).getAllByText('6').length).toBeGreaterThan(0)
 
     expect(screen.getByLabelText(/^Input: /)).toBeInTheDocument()
-  })
+  }, 15_000)
 
   it('labels aggregated entries as periods and shows raw-day coverage', async () => {
     const monthEntry: DailyUsage = {
diff --git a/tests/frontend/heatmap-calendar.test.tsx b/tests/frontend/heatmap-calendar.test.tsx
index 745831d..3277d1f 100644
--- a/tests/frontend/heatmap-calendar.test.tsx
+++ b/tests/frontend/heatmap-calendar.test.tsx
@@ -154,7 +154,7 @@ describe('HeatmapCalendar', () => {
     await waitFor(() => {
       expect(screen.getByRole('gridcell', { name: /April 14, 2026/ })).toHaveFocus()
     })
-  })
+  }, 15_000)
 
   it('uses muted styling for zero-value cells so empty days do not dominate the heatmap', () => {
     const day = buildDailyUsage({
diff --git a/tests/frontend/info-heading.test.tsx b/tests/frontend/info-heading.test.tsx
index 12ac80d..55913f7 100644
--- a/tests/frontend/info-heading.test.tsx
+++ b/tests/frontend/info-heading.test.tsx
@@ -64,7 +64,7 @@ describe('Info heading semantics', () => {
     const infoButton = screen.getByRole('button', { name: 'Show info' })
     expect(infoButton).toBeInTheDocument()
     expect(infoButton).toHaveClass('focus-visible:ring-2')
-  })
+  }, 15_000)
 
   it('keeps feature card titles semantically separate from the info button', () => {
     render(
@@ -75,5 +75,5 @@ describe('Info heading semantics', () => {
 
     expect(screen.getByRole('heading', { name: 'Request quality' })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Show info' })).toBeInTheDocument()
-  })
+  }, 15_000)
 })
diff --git a/tests/frontend/phase4-correctness.test.tsx b/tests/frontend/phase4-correctness.test.tsx
index 4af1b1c..4d2781d 100644
--- a/tests/frontend/phase4-correctness.test.tsx
+++ b/tests/frontend/phase4-correctness.test.tsx
@@ -120,7 +120,7 @@ describe('phase 4 UI correctness', () => {
     expect(document.body).not.toHaveTextContent('Infinity')
     expect(document.body).not.toHaveTextContent('NaN')
     expect(screen.getAllByText('–').length).toBeGreaterThan(0)
-  })
+  }, 15_000)
 
   it('uses the canonical token sum instead of a stale day.totalTokens value', () => {
     const day: DailyUsage = {
diff --git a/tests/frontend/provider-limits-section.test.tsx b/tests/frontend/provider-limits-section.test.tsx
index a69366d..457c8aa 100644
--- a/tests/frontend/provider-limits-section.test.tsx
+++ b/tests/frontend/provider-limits-section.test.tsx
@@ -6,6 +6,28 @@ import { ProviderLimitsSection } from '@/components/features/limits/ProviderLimi
 import { initI18n } from '@/lib/i18n'
 import { TooltipProvider } from '@/components/ui/tooltip'
 
+vi.mock('@/components/features/animations/AnimatedBarFill', () => ({
+  AnimatedBarFill: ({
+    width,
+    order,
+    delayMs,
+    durationMs,
+  }: {
+    width: string
+    order?: number
+    delayMs?: number
+    durationMs?: number
+  }) => (
+    <div
+      data-testid="animated-bar-fill"
+      data-width={width}
+      data-order={order === undefined ? '' : String(order)}
+      data-delay-ms={delayMs === undefined ? '' : String(delayMs)}
+      data-duration-ms={durationMs === undefined ? '' : String(durationMs)}
+    />
+  ),
+}))
+
 describe('ProviderLimitsSection', () => {
   beforeEach(async () => {
     class MockIntersectionObserver {
@@ -75,4 +97,29 @@ describe('ProviderLimitsSection', () => {
     expect(screen.getByText('240% Abo')).toBeInTheDocument()
     expect(screen.getByText('Offen')).toBeInTheDocument()
   })
+
+  it('does not force a visible minimum width or local timing overrides for subscription bars', () => {
+    render(
+      <TooltipProvider>
+        <ProviderLimitsSection
+          data={[]}
+          providers={['SubscribedZero']}
+          limits={{
+            SubscribedZero: {
+              hasSubscription: true,
+              subscriptionPrice: 50,
+              monthlyLimit: 0,
+            },
+          }}
+          selectedMonth="2026-04"
+        />
+      </TooltipProvider>,
+    )
+
+    const fills = screen.getAllByTestId('animated-bar-fill')
+    expect(fills.some((fill) => fill.getAttribute('data-width') === '8%')).toBe(false)
+    expect(fills.some((fill) => fill.getAttribute('data-width') === '0%')).toBe(true)
+    expect(fills.every((fill) => fill.getAttribute('data-delay-ms') === '')).toBe(true)
+    expect(fills.every((fill) => fill.getAttribute('data-duration-ms') === '')).toBe(true)
+  })
 })
diff --git a/tests/frontend/request-cache-hit-rate-by-model.test.tsx b/tests/frontend/request-cache-hit-rate-by-model.test.tsx
new file mode 100644
index 0000000..ac7dc10
--- /dev/null
+++ b/tests/frontend/request-cache-hit-rate-by-model.test.tsx
@@ -0,0 +1,130 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { RequestCacheHitRateByModel } from '@/components/charts/RequestCacheHitRateByModel'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { initI18n } from '@/lib/i18n'
+import type { DailyUsage } from '@/types'
+
+vi.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: { children: ReactNode }) => (
+    <div data-testid="responsive-container">{children}</div>
+  ),
+  ComposedChart: ({ children }: { children: ReactNode }) => (
+    <div data-testid="composed-chart">{children}</div>
+  ),
+  BarChart: ({
+    children,
+    barSize,
+    maxBarSize,
+  }: {
+    children: ReactNode
+    barSize?: number
+    maxBarSize?: number
+  }) => (
+    <div
+      data-testid="snapshot-bar-chart"
+      data-bar-size={String(barSize)}
+      data-max-bar-size={String(maxBarSize)}
+    >
+      {children}
+    </div>
+  ),
+  Area: () => null,
+  Line: () => null,
+  XAxis: () => null,
+  YAxis: () => null,
+  CartesianGrid: () => null,
+  Tooltip: () => null,
+  Legend: () => null,
+  Bar: ({ dataKey }: { dataKey: string }) => <div data-testid={`snapshot-bar-${dataKey}`} />,
+  Cell: () => null,
+}))
+
+class MockIntersectionObserver {
+  constructor() {}
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+function buildDay(overrides: Partial<DailyUsage>): DailyUsage {
+  return {
+    date: '2026-04-01',
+    inputTokens: 100,
+    outputTokens: 40,
+    cacheCreationTokens: 10,
+    cacheReadTokens: 20,
+    thinkingTokens: 5,
+    totalTokens: 175,
+    totalCost: 12,
+    requestCount: 4,
+    modelsUsed: ['gpt-5.4'],
+    modelBreakdowns: [
+      {
+        modelName: 'gpt-5.4',
+        inputTokens: 100,
+        outputTokens: 40,
+        cacheCreationTokens: 10,
+        cacheReadTokens: 20,
+        thinkingTokens: 5,
+        cost: 12,
+        requestCount: 4,
+      },
+    ],
+    ...overrides,
+  }
+}
+
+describe('RequestCacheHitRateByModel', () => {
+  beforeEach(async () => {
+    vi.stubGlobal('IntersectionObserver', MockIntersectionObserver)
+    await initI18n('en')
+  })
+
+  it('uses a thicker explicit bar size for the current model snapshot', () => {
+    render(
+      <TooltipProvider>
+        <RequestCacheHitRateByModel
+          timelineData={[
+            buildDay({ date: '2026-04-01' }),
+            buildDay({ date: '2026-04-02', cacheReadTokens: 35, totalTokens: 190 }),
+          ]}
+          summaryData={[
+            buildDay({ date: '2026-04-01' }),
+            buildDay({ date: '2026-04-02', cacheReadTokens: 35, totalTokens: 190 }),
+          ]}
+          viewMode="daily"
+        />
+      </TooltipProvider>,
+    )
+
+    expect(screen.getByTestId('snapshot-bar-chart')).toHaveAttribute('data-bar-size', '6')
+    expect(screen.getByTestId('snapshot-bar-chart')).toHaveAttribute('data-max-bar-size', '6')
+    expect(screen.getByTestId('snapshot-bar-totalRate')).toBeInTheDocument()
+    expect(screen.getByTestId('snapshot-bar-trailing7Rate')).toBeInTheDocument()
+  })
+
+  it('uses the trend label consistently outside daily mode', () => {
+    render(
+      <TooltipProvider>
+        <RequestCacheHitRateByModel
+          timelineData={[
+            buildDay({ date: '2026-03-01' }),
+            buildDay({ date: '2026-04-01', cacheReadTokens: 35, totalTokens: 190 }),
+          ]}
+          summaryData={[
+            buildDay({ date: '2026-03-01' }),
+            buildDay({ date: '2026-04-01', cacheReadTokens: 35, totalTokens: 190 }),
+          ]}
+          viewMode="monthly"
+        />
+      </TooltipProvider>,
+    )
+
+    expect(screen.getAllByText('Trend avg').length).toBeGreaterThan(0)
+    expect(screen.queryByText('7-day avg')).not.toBeInTheDocument()
+  })
+})
diff --git a/tests/frontend/request-quality-order.test.tsx b/tests/frontend/request-quality-order.test.tsx
new file mode 100644
index 0000000..8e43183
--- /dev/null
+++ b/tests/frontend/request-quality-order.test.tsx
@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { RequestQuality } from '@/components/features/request-quality/RequestQuality'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { initI18n } from '@/lib/i18n'
+import type { DashboardMetrics } from '@/types'
+
+vi.mock('@/components/features/animations/AnimatedBarFill', () => ({
+  AnimatedBarFill: ({ order }: { order?: number }) => (
+    <div data-testid="quality-bar-fill" data-order={String(order ?? '')} />
+  ),
+}))
+
+const metrics: DashboardMetrics = {
+  totalCost: 0,
+  totalTokens: 0,
+  totalInput: 0,
+  totalOutput: 0,
+  totalCacheCreate: 0,
+  totalCacheRead: 0,
+  totalThinking: 0,
+  totalRequests: 4,
+  activeDays: 2,
+  avgDailyCost: 0,
+  avgTokensPerRequest: 100_000,
+  avgCostPerRequest: 0.125,
+  peakDay: null,
+  cacheHitRate: 0,
+  modelCount: 0,
+  providerCount: 0,
+  topModels: [],
+  topRequestModel: null,
+  dailyBurnRate: 0,
+  requestVolatility: 0,
+  providerConcentrationIndex: 0,
+  topProvider: null,
+  hasRequestData: true,
+}
+
+describe('RequestQuality bar ordering', () => {
+  beforeEach(async () => {
+    vi.stubGlobal(
+      'IntersectionObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      },
+    )
+    await initI18n('en')
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('passes deterministic bar order values to AnimatedBarFill', () => {
+    render(
+      <TooltipProvider>
+        <RequestQuality metrics={metrics} viewMode="daily" />
+      </TooltipProvider>,
+    )
+
+    expect(
+      screen.getAllByTestId('quality-bar-fill').map((fill) => fill.getAttribute('data-order')),
+    ).toEqual(['0', '1', '2', '3'])
+  })
+})
diff --git a/tests/frontend/request-quality.test.tsx b/tests/frontend/request-quality.test.tsx
index 69166da..1c6b100 100644
--- a/tests/frontend/request-quality.test.tsx
+++ b/tests/frontend/request-quality.test.tsx
@@ -1,12 +1,41 @@
 // @vitest-environment jsdom
 
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { RequestQuality } from '@/components/features/request-quality/RequestQuality'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { initI18n } from '@/lib/i18n'
 import type { DashboardMetrics } from '@/types'
 
+class MockIntersectionObserver {
+  static instances: MockIntersectionObserver[] = []
+
+  callback: IntersectionObserverCallback
+
+  constructor(callback: IntersectionObserverCallback) {
+    this.callback = callback
+    MockIntersectionObserver.instances.push(this)
+  }
+
+  observe() {}
+
+  unobserve() {}
+
+  disconnect() {}
+
+  trigger(isIntersecting: boolean) {
+    this.callback(
+      [
+        {
+          isIntersecting,
+          target: document.createElement('div'),
+        } as IntersectionObserverEntry,
+      ],
+      this as unknown as IntersectionObserver,
+    )
+  }
+}
+
 const baseMetrics: DashboardMetrics = {
   totalCost: 0,
   totalTokens: 0,
@@ -35,14 +64,8 @@ const baseMetrics: DashboardMetrics = {
 
 describe('RequestQuality', () => {
   beforeEach(async () => {
-    vi.stubGlobal(
-      'IntersectionObserver',
-      class {
-        observe() {}
-        unobserve() {}
-        disconnect() {}
-      },
-    )
+    MockIntersectionObserver.instances = []
+    vi.stubGlobal('IntersectionObserver', MockIntersectionObserver)
     await initI18n('en')
   })
 
@@ -81,4 +104,38 @@ describe('RequestQuality', () => {
     expect(progressBars.length).toBeGreaterThanOrEqual(4)
     expect(screen.queryByText('n/a')).not.toBeInTheDocument()
   })
+
+  it('animates request-quality bars only after the metric cards become visible', async () => {
+    const { container } = render(
+      <TooltipProvider>
+        <RequestQuality
+          metrics={{
+            ...baseMetrics,
+            hasRequestData: true,
+            totalRequests: 4,
+            activeDays: 2,
+            avgTokensPerRequest: 100_000,
+            avgCostPerRequest: 0.125,
+            totalCacheRead: 200_000,
+            totalThinking: 20_000,
+          }}
+          viewMode="daily"
+        />
+      </TooltipProvider>,
+    )
+
+    const fills = () => Array.from(container.querySelectorAll('.h-full.rounded-full'))
+
+    expect(fills().some((fill) => Number.parseFloat((fill as HTMLElement).style.width) > 0)).toBe(
+      false,
+    )
+
+    MockIntersectionObserver.instances.forEach((observer) => observer.trigger(true))
+
+    await waitFor(() => {
+      expect(
+        fills().filter((fill) => Number.parseFloat((fill as HTMLElement).style.width) > 0).length,
+      ).toBeGreaterThanOrEqual(4)
+    })
+  })
 })
diff --git a/tests/frontend/secondary-metrics.test.tsx b/tests/frontend/secondary-metrics.test.tsx
new file mode 100644
index 0000000..18a06b9
--- /dev/null
+++ b/tests/frontend/secondary-metrics.test.tsx
@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { SecondaryMetrics } from '@/components/cards/SecondaryMetrics'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { initI18n } from '@/lib/i18n'
+import type { DashboardMetrics } from '@/types'
+
+vi.mock('@/components/features/help/InfoButton', () => ({
+  InfoButton: ({ text }: { text: string }) => <span data-testid="metric-info">{text}</span>,
+}))
+
+const metrics: DashboardMetrics = {
+  totalCost: 0,
+  totalTokens: 0,
+  activeDays: 0,
+  topModel: null,
+  topRequestModel: null,
+  topTokenModel: null,
+  topModelShare: 0,
+  topThreeModelsShare: 0,
+  topProvider: { name: 'Anthropic', share: 72, cost: 120 },
+  providerCount: 1,
+  hasRequestData: true,
+  cacheHitRate: 0,
+  costPerMillion: 0,
+  avgTokensPerRequest: 0,
+  avgCostPerRequest: 0,
+  avgModelsPerEntry: 0,
+  avgDailyCost: 42,
+  avgRequestsPerDay: 0,
+  topDay: { date: '2026-04-10', cost: 120 },
+  cheapestDay: { date: '2026-04-01', cost: 12 },
+  busiestWeek: null,
+  weekendCostShare: null,
+  totalInput: 0,
+  totalOutput: 0,
+  totalCacheRead: 0,
+  totalCacheCreate: 0,
+  totalThinking: 0,
+  totalRequests: 0,
+  weekOverWeekChange: null,
+  requestVolatility: 0,
+  modelConcentrationIndex: 0,
+  providerConcentrationIndex: 0,
+}
+
+describe('SecondaryMetrics help text', () => {
+  beforeEach(async () => {
+    vi.stubGlobal(
+      'IntersectionObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      },
+    )
+    await initI18n('en')
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('uses peak-window help text when viewMode is daily', () => {
+    render(
+      <TooltipProvider>
+        <SecondaryMetrics
+          metrics={{
+            ...metrics,
+            busiestWeek: {
+              start: '2026-04-04',
+              end: '2026-04-10',
+              cost: 210,
+            },
+          }}
+          dailyCosts={[12, 24, 48]}
+          viewMode="daily"
+        />
+      </TooltipProvider>,
+    )
+
+    const infoTexts = screen.getAllByTestId('metric-info').map((node) => node.textContent)
+
+    expect(infoTexts).toContain(
+      'Shows the highest-cost rolling 7-day window in the current slice to highlight short-term peaks.',
+    )
+  })
+
+  it('uses month-specific help text when viewMode is monthly', () => {
+    render(
+      <TooltipProvider>
+        <SecondaryMetrics metrics={metrics} dailyCosts={[12, 24, 48]} viewMode="monthly" />
+      </TooltipProvider>,
+    )
+
+    const infoTexts = screen.getAllByTestId('metric-info').map((node) => node.textContent)
+
+    expect(infoTexts).toContain('Shows the month with the highest API cost in the current slice.')
+    expect(infoTexts).toContain('Shows the average cost per active month in the current slice.')
+  })
+
+  it('uses year-specific help text when viewMode is yearly', () => {
+    render(
+      <TooltipProvider>
+        <SecondaryMetrics metrics={metrics} dailyCosts={[12, 24, 48]} viewMode="yearly" />
+      </TooltipProvider>,
+    )
+
+    const infoTexts = screen.getAllByTestId('metric-info').map((node) => node.textContent)
+
+    expect(infoTexts).toContain('Shows the year with the highest API cost in the current slice.')
+    expect(infoTexts).toContain('Shows the average cost per active year in the current slice.')
+  })
+})
diff --git a/tests/frontend/sortable-tables.test.tsx b/tests/frontend/sortable-tables.test.tsx
index be3d99c..73be34f 100644
--- a/tests/frontend/sortable-tables.test.tsx
+++ b/tests/frontend/sortable-tables.test.tsx
@@ -57,7 +57,7 @@ describe('sortable tables', () => {
       'aria-sort',
       'descending',
     )
-  })
+  }, 15_000)
 
   it('renders model efficiency sort controls as buttons inside column headers', () => {
     renderWithProviders(
diff --git a/tests/frontend/toast.test.tsx b/tests/frontend/toast.test.tsx
index f8167a3..b80b0cc 100644
--- a/tests/frontend/toast.test.tsx
+++ b/tests/frontend/toast.test.tsx
@@ -39,7 +39,7 @@ describe('ToastProvider', () => {
 
     fireEvent.click(screen.getByRole('button', { name: 'Close' }))
     expect(screen.queryByRole('status')).not.toBeInTheDocument()
-  })
+  }, 15_000)
 
   it('announces error toasts as alerts', () => {
     render(
@@ -51,5 +51,5 @@ describe('ToastProvider', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Trigger toast' }))
 
     expect(screen.getByRole('alert')).toHaveTextContent('Saved successfully')
-  })
+  }, 15_000)
 })
diff --git a/tests/frontend/usage-insights.test.tsx b/tests/frontend/usage-insights.test.tsx
new file mode 100644
index 0000000..a552ee7
--- /dev/null
+++ b/tests/frontend/usage-insights.test.tsx
@@ -0,0 +1,74 @@
+// @vitest-environment jsdom
+
+import { render, screen, within } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { UsageInsights } from '@/components/features/insights/UsageInsights'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { initI18n } from '@/lib/i18n'
+import type { DashboardMetrics } from '@/types'
+
+const metrics: DashboardMetrics = {
+  totalCost: 5046.25,
+  totalTokens: 7_742_241_363,
+  activeDays: 63,
+  topModel: { name: 'Opus 4.6', cost: 4000 },
+  topRequestModel: { name: 'Opus 4.6', requests: 49999 },
+  topTokenModel: { name: 'Opus 4.6', tokens: 5_300_000_000 },
+  topModelShare: 79,
+  topThreeModelsShare: 91,
+  topProvider: { name: 'Anthropic', share: 96, cost: 4800 },
+  providerCount: 3,
+  hasRequestData: true,
+  cacheHitRate: 95.1,
+  costPerMillion: 0.65,
+  avgTokensPerRequest: 96_700,
+  avgCostPerRequest: 0.06,
+  avgModelsPerEntry: 2.6,
+  avgDailyCost: 80.1,
+  avgRequestsPerDay: 1270.3,
+  topDay: { date: '2026-03-06', cost: 366 },
+  cheapestDay: null,
+  busiestWeek: { start: '2026-03-28', end: '2026-04-03', cost: 1218 },
+  weekendCostShare: 35,
+  totalInput: 10,
+  totalOutput: 5,
+  totalCacheRead: 100,
+  totalCacheCreate: 0,
+  totalThinking: 1200,
+  totalRequests: 80_029,
+  weekOverWeekChange: null,
+  requestVolatility: 1319,
+  modelConcentrationIndex: 0,
+  providerConcentrationIndex: 0,
+}
+
+describe('UsageInsights', () => {
+  beforeEach(async () => {
+    vi.stubGlobal(
+      'IntersectionObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      },
+    )
+    await initI18n('en')
+  })
+
+  it('keeps the animated insight grid items stretched to full height', () => {
+    render(
+      <TooltipProvider>
+        <UsageInsights metrics={metrics} viewMode="daily" totalCalendarDays={92} />
+      </TooltipProvider>,
+    )
+
+    const grid = screen.getByTestId('usage-insights-grid')
+    const motionItems = within(grid).getAllByTestId('usage-insight-motion-item')
+    const cards = within(grid).getAllByTestId('usage-insight-card')
+
+    expect(motionItems).toHaveLength(4)
+    expect(cards).toHaveLength(4)
+    motionItems.forEach((item) => expect(item).toHaveClass('h-full'))
+    cards.forEach((card) => expect(card).toHaveClass('h-full'))
+  })
+})
diff --git a/tests/integration/server.test.ts b/tests/integration/server.test.ts
index e165c6f..5e6ce34 100644
--- a/tests/integration/server.test.ts
+++ b/tests/integration/server.test.ts
@@ -1402,7 +1402,7 @@ describe('local server API', () => {
       }
       rmSync(runtimeRoot, { recursive: true, force: true })
     }
-  })
+  }, 20_000)
 
   it('fails cleanly when port 65535 is busy instead of retrying to 65536', async () => {
     const occupiedPortServer = createServer()
@@ -1557,5 +1557,5 @@ describe('local server API', () => {
       }
       rmSync(runtimeRoot, { recursive: true, force: true })
     }
-  })
+  }, 20_000)
 })
diff --git a/tests/unit/chart-theme.test.ts b/tests/unit/chart-theme.test.ts
new file mode 100644
index 0000000..063fa95
--- /dev/null
+++ b/tests/unit/chart-theme.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { CHART_ANIMATION, getScatterAnimationProps } from '@/components/charts/chart-theme'
+
+describe('chart theme helpers', () => {
+  it('uses the reveal duration for scatter animation timing', () => {
+    const props = getScatterAnimationProps(true, 70)
+
+    expect(props.isAnimationActive).toBe(true)
+    expect(props.animationBegin).toBe(CHART_ANIMATION.chartStartDelay + 70)
+    expect(props.animationDuration).toBe(CHART_ANIMATION.revealDuration)
+  })
+})