Dashboard avec sidebar, stats animees, graphiques et tableaux.
Les chiffres glissent de 20px vers le haut en apparaissant. L'utilisateur percoit les donnees comme "vivantes" plutot que statiques, ce qui augmente l'engagement avec le dashboard.
opacity: 0 + translateY(20px) + transition: 0.6s ease Explorer Data & Visualisation →Les barres grandissent depuis la base avec un scaleY anime. L'effet de croissance rend les donnees plus memorables et cree un moment d'engagement au chargement de la page.
animation: barGrow 1s ease forwards + scaleY(0 to 1) Explorer Data & Visualisation →Le donut apparait avec une rotation de -90deg a 0deg. Le conic-gradient rend la repartition des sources de trafic lisible instantanement sans legende complexe.
conic-gradient + animation: donutSpin 1s ease Explorer Data & Visualisation →La carte monte de 4px et la bordure passe en violet. Cette micro-interaction indique subtilement que chaque KPI est cliquable pour acceder au detail.
transform: translateY(-4px) + border-color: var(--primary) Explorer Hover & Interactions →Le toast glisse depuis la droite avec un slideIn anime puis disparait automatiquement. Il informe sans interrompre le workflow — pattern classique des dashboards modernes.
animation: slideIn 0.4s ease + translateX(100% to 0) Explorer Transitions →L'item actif a un fond violet translucide et le texte en couleur primaire. Au hover, un fond eleve apparait. Cela cree une navigation claire et intuitive.
background: rgba(99,102,241,0.15) + transition: 0.2s Explorer Navigation & UI →Chaque ligne du tableau change de fond au survol. Ce feedback visuel aide l'utilisateur a suivre les donnees sur des tableaux larges et evite de lire la mauvaise ligne.
tr:hover { background: var(--bg-elevated) } Explorer Hover & Interactions →