AnimatedCard
Carte avec effet de survol anime (scale, ombre, translation verticale). Etend le composant Card standard avec des transitions CSS fluides. Supporte un delai d'apparition pour les animations decalees en grille.
Preview
Survolez la carte pour voir l'animation : legere elevation (translateY -4px), agrandissement (scale 1.05) et ombre accentuee.
Session 3x3
12 solves aujourd'hui
12.45s
Meilleure moyenne ao5
Grille avec delai decale
Utilisez la prop delay pour decaler l'animation d'entree de chaque carte dans une grille. Valeur en millisecondes.
Best Single
8.23s
Record personnel
Ao5
10.56s
Moyenne 5 derniers
Ao12
11.34s
Moyenne 12 derniers
Sans animation au survol
Desactivez l'effet au survol avec hover=false.
Pas d'animation
hover=false desactive l'effet au survol
Utile quand la carte est dans un contexte ou l'animation serait distrayante.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| hover | boolean | true | Active ou desactive l'animation au survol (scale, ombre, translation). |
| delay | number | 0 | Delai d'animation en ms. Utilise pour le style animationDelay. Utile pour decaler les cartes dans une grille. |
| className | string | — | Classes CSS additionnelles. Le composant herite de toutes les props de Card. |
| children | ReactNode | — | Contenu de la carte. Utiliser CardHeader, CardContent, etc. comme avec Card standard. |