Créer des Card 3D avec Figma Make
Se former aux Design Systems: https://designsystem.school
Dans cette vidéo je te montre comment créer une card 3d qui interagit au mouvement de la souris dans Figma Make.
Voici les prompts utilisés 👇
Prompt initial :
Crée un composant appelé "Card3d" avec les caractéristiques suivantes :
Une card interactive 3D qui réagit au mouvement de la souris
Effets de rotation et translation basés sur la position du curseur
Un effet de reflet lumineux (glare) qui suit la souris
Animation de zoom au hover
Implémentation technique :
Utilise Framer Motion avec useMotionValue, useSpring, useTransform, et useMotionTemplate
Calcule la position relative de la souris (de -0.5 à 0.5) sur la carte
Applique un spring pour des animations fluides
La rotation X est inversée par rapport à Y (effet de parallaxe naturel)
L'effet de reflet utilise un radial-gradient dynamique avec mix-blend-overlay
Box shadow profonde pour l'effet de profondeur
Animation au hover : scale 1.05 et z-index 50
Reset des valeurs quand la souris quitte la carte
Props du composant :
Ajoute ces props au composant :
rotateDepth (optionnel, défaut: 17.5) : intensité de la rotation en degrés
translateDepth (optionnel, défaut: 20) : intensité de la translation en pixels