Soft Focus Card

Soft Focus Card

Type

Component

Plateforme

Framer

Créé en

2026

Type

Component

Plateforme

Framer

Créé en

2026

11
1

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