Catégorie 04
Cards, formulaires, badges, loaders, navigation, accordion, stats animées, skeleton, toast, tabs, toggles.
Shadow + translateY(-4px) = la réponse par défaut. Chaque style impose une vision différente.
Chargement ultra-rapide grâce à notre infrastructure.
Données chiffrées de bout en bout.
Algorithmes affinés pour des résultats au plus près.
Aucun arrondi. Le contenu parle sans ornements.
Offset shadow : profondeur physique.
Design intentionnel, friction visible.
Interface temps réel avec métriques.
Données comportementales.
Personnalisation complète.
La perspective suit le curseur. perspective(600px) rotateX/Y.
Transition .05s pour le suivi, .5s ease pour le retour.
Le highlight ::before amplifie l'illusion 3D.
grid-column: span 2 + grid-row: span 2
span 2 en colonne
couleur forte
1×1
span 2
Label flottant, underline animée, focus coloré — la différence est dans les micro-interactions.
Generic : badge gris arrondi. Avec intention : chaque style raconte quelque chose.
Un bon loader réduit la perception du temps d'attente. Chaque style correspond à un contexte.
Spinner
Dots bounce
Equalizer
Double ring
Deux approches : utilitaire générique vs. éditorial créatif.
max-height animé de 0 vers scrollHeight — la seule façon correcte de faire un accordion CSS.
height: auto ne peut pas être animé en CSS. Il faut utiliser max-height avec une valeur suffisamment grande — ou mieux, JS pour obtenir scrollHeight exact et créer une animation fluide sans saut.
Le JS remet max-height à 0 sur tous les items avant d'ouvrir le nouveau. Un seul item ouvert à la fois — pattern accordion classique. Si plusieurs items simultanés sont nécessaires, supprimer cette logique.
En production, ajouter aria-expanded="true/false" sur le bouton et aria-hidden="true/false" sur le corps. Cela permet aux lecteurs d'écran de comprendre l'état de l'accordion sans voir le CSS.
IntersectionObserver déclenche le compteur. easeOutQuart pour la décélération naturelle.
Skeleton, toast, tabs, toggle, tooltip, avatar stack.
Cliquer pour déclencher → apparaît en bas à droite
Dashboard principal avec métriques temps réel. L'indicateur se déplace avec cubic-bezier pour simuler un objet physique.
Données détaillées sur l'engagement utilisateur, la rétention et les funnels de conversion.
Configuration du compte, notifications, sécurité. Sauvegarde automatique avec confirmation toast.
Connecteurs natifs avec Slack, GitHub, Linear, Notion. Webhooks configurables, OAuth 2.0.