Soft Focus Card
Soft Focus Card
Type
Component
Plateforme
Framer
Créé en
2026
Type
Component
Plateforme
Framer
Créé en
2026
Transformez une image ou une vidéo en card de marque, adoucie par un blur qui se renforce au hover
Soft Focus Card transforme une image ou une vidéo en card de marque. Le média est posé sous un blur doux (un fondu en bas, ou une vignette qui adoucit les bords), votre logo centré par-dessus. Au hover, toute la card se relâche : le média se floute et se rapproche pendant que le logo se réduit, sur un easing que vous contrôlez.
Chargez une image ou une vidéo, en upload ou par URL, avec un focal point pour caler le cadrage. Choisissez la forme et l’intensité du blur, réglez le blur et le zoom au hover, et pilotez toutes les animations avec une seule Transition. Ajoutez un overlay coloré optionnel, une keyline frame de la couleur et l’épaisseur de votre choix, et un radius net.
Média et logo
Image ou vidéo, chacune en upload ou par URL
Poster pour la vidéo, affiché sur le canvas et pendant le chargement
Focal X / Y pour placer le cadrage
Sources indépendantes pour le média et le logo
Blur et interaction au hover
Bottom fade ou Vignette sur les bords, avec blur et portée réglables
Dégradé doux et progressif à n’importe quelle taille
Au hover, le média se floute et zoome pendant que le logo se réduit
Une seule Transition synchronise le zoom du média, celui du logo et le blur
Vidéo
Autoplay activable ou non
Play on Hover si l’autoplay est off, Pause on Hover s’il est on
Muted par défaut, avec Unmute on Hover optionnel
Loop, et pause hors du viewport
Cadre, style et lien
Overlay coloré optionnel
Keyline frame : couleur, épaisseur et radius
Logo centré à largeur réglable, plafonné pour ne jamais déborder
Toute la card en lien, avec ouverture dans un nouvel onglet en option

