Hover Bump Image est un component média interactif qui crée des animations expressives réactives à la souris dans Framer, avec un support complet des variables CMS pour des workflows d’images dynamiques. L’effet marche particulièrement bien avec les PNG transparents, SVG, emojis, stickers, mascottes et illustrations.

L’interaction bump réagit à la vitesse du curseur (Reactivity, Max Offset, Max Rotate, Smoothness), une animation Float continue ajoute un flottement subtil, et un Click Slider fait passer d’une image à l’autre en mode Sequential ou Random.

Contenu et affichage

• Mode manuel (upload ou URL) ou mode CMS (jusqu’à 10 variables image)

• PNG, SVG, emojis, stickers, illustrations et photos classiques

• Cover pour les photos, Contain pour les PNG transparents et dimensions variables

• Ombre avancée qui suit la forme transparente, intensité, radius et couleur de fond réglables

Interaction bump et float

• Bump activable, avec Reactivity, Max Offset, Max Rotate et Smoothness

• Float continu : Amount, Rotate, Duration, Intensity, et Float Offset pour décaler les animations entre components

• Click Slider : Sequential (ordre fixe) ou Random, avec Zoom In et Transition Duration