Morphing Corner Shapes
Quatre pièces de 100 px — superellipse, biseau, encoche, creux — qui, au survol, se transforment réellement en la forme suivante en 0,6 s avec un léger rebond et une rotation de 5° : quatre clip-path: polygon() de 68 points chacun, dans le même ordre, que le navigateur interpole point à point.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Glassmorphism comprend 47 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Chaque .morph-shape (100 × 100 px, dégradé à 135°, libellé blanc de 10,4 px en capitales) porte quatre variables : --msh-squircle (superellipse n = 4), --msh-bevel (pans coupés à 24 %), --msh-notch (encoche carrée de 18 %) et --msh-scoop-concave (quart de cercle creusé de 24 %). Chacune est un polygon() de 68 points en pourcentages, 17 par coin, rangés dans le même ordre : du bord gauche vers le bord haut, puis les trois autres coins par rotation. Quand :hover remplace une variable par la suivante, transition: clip-path 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) déplace chaque point vers son homologue : la superellipse se tend en biseau, le biseau se creuse en encoche, l'encoche s'arrondit en creux, le creux se gonfle en superellipse.
Mesuré au survol de la première pièce, sur la coordonnée verticale du premier point (50 % → 24 %) : 42,4 % à 40 ms, 28,8 % à 150 ms, 21,7 % à 300 ms — la courbe à rebond dépasse la cible —, 22,4 % à 450 ms, 24 % à 800 ms dans Chromium 151 ; 39,5, 27,3, 21,5, 22,7 et 24 % dans Firefox 153 ; 32,3 % à 120 ms dans WebKit 26. La pièce tourne en même temps de ±5° et grossit de 5 % (0,4 s). Le fond passe aussi au dégradé de la forme suivante, mais un dégradé ne s'interpole pas : la couleur change d'un coup, au début du survol. Quitter la pièce rejoue la transition à l'envers. Aucun JavaScript.
Les quatre formes sont des polygon() de même structure, et pas des url(#squircle), url(#bevel)… vers des <clipPath> SVG, pour deux raisons. Un <clipPath> doit exister dans la page avec son id : absent, les pièces restent des carrés et seuls la rotation et le changement de couleur se voient (mesuré : coin cliquable). Et même avec des <clipPath> valides, le passage d'un url() à un autre ne s'anime pas : il serait sec. Quatre polygones de 68 points dans le même ordre rendent le morphing réel.
Accessibilité
- Survol seulement : le changement de forme n'existe qu'à la souris. Les pièces sont des
divsans rôle nitabindex(Tab ne s'y arrête pas, mesuré) ; au doigt, un appui déclenche:hoveret la forme reste jusqu'au toucher suivant. Si la forme porte une information (jeu, configurateur), ajouteztabindex="0"et reprenez les règles:hoveren:focus-visible;clip-pathrognant l'anneau de focus, marquez le focus par la rotation elle-même ou par un contour sur le parent. - prefers-reduced-motion absent du code : mesuré sous émulation, la rotation, le grossissement et le morphing restent actifs. Ajoutez
@media (prefers-reduced-motion: reduce) { .morph-shape { transition: none } .morph-shape:hover { transform: none } }: la forme change encore, sans mouvement. - Contraste du libellé blanc de 10,4 px : 4,2:1 sur
#8b5cf6, 3,5:1 sur#ec4899, 2,4:1 sur#06b6d4, 2,5:1 sur#10b981— tous sous 4,5:1. Assombrissez les départs de dégradé ou montez le texte à 14 px en graisse 700 (seuil 3:1).
Compatibilité navigateur
CSS seul : clip-path: polygon() en pourcentages, transition de clip-path entre polygones de même nombre de points, propriétés personnalisées, transform. Zéro JavaScript, zéro SVG. Morphing mesuré dans Chromium 151, Firefox 153 et WebKit 26 (valeurs intermédiaires relevées pendant la transition dans les trois).
Sans clip-path (Firefox avant 54, Safari avant 13.1 sans préfixe), les pièces sont carrées et seuls la rotation et le changement de couleur restent. Si vous remplacez une forme par un polygone d'un autre nombre de points, le navigateur ne peut plus interpoler : le passage redevient sec, sans erreur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="morph-shapes-wrap">
<div class="morph-shape morph-shape--squircle">…</div>
<div class="morph-shape morph-shape--bevel">…</div>
<div class="morph-shape morph-shape--notch">…</div>
<div class="morph-shape morph-shape--scoop">…</div>
</div>
</div>Le code complet HTML + CSS + JS de Morphing Corner Shapes, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Ordre du cycle (CSS — règles .morph-shape--*:hover) |
superellipse → biseau → encoche → creux → superellipse | Changez la variable appelée dans chaque :hover. Toute paire de formes s'anime, puisque les quatre ont 68 points dans le même ordre. |
Profondeur des formes (CSS — les quatre variables --msh-*) |
biseau 24 %, encoche 18 %, creux 24 %, superellipse n = 4 | Recalculez les 17 points d'un coin puis tournez-les : pour un biseau de b %, les points vont de (0, b) à (b, 0) en ligne droite. Gardez 17 points par coin, sinon l'interpolation casse. |
Durée et rebond (CSS — transition de .morph-shape) |
clip-path 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) |
0.9s ease-in-out pour un morphing lent sans dépassement ; la courbe d'origine fait dépasser la cible d'environ 2 points de pourcentage vers 300 ms. |
Rotation et grossissement (CSS — transform des :hover) |
±5° et scale(1.05) |
transform: none pour un configurateur où la pièce doit rester droite ; ±12° pour un jeu plus vif. |
Taille (CSS — width / height de .morph-shape) |
100 × 100 px | Les formes sont en pourcentages : elles suivent. Une pièce non carrée étire les coins sur le grand côté. |
FAQ
polygon() qui ont le même nombre de points : il déplace alors chaque point vers le point de même rang. Deux url(#…) vers des <clipPath> SVG ne s'interpolent jamais — la forme bascule à la fin. Les quatre formes du code ont 68 points, 17 par coin, dans le même ordre : toute paire s'anime. Mesuré dans Chromium, Firefox et WebKit, les valeurs intermédiaires défilent pendant les 0,6 s.background porte un linear-gradient(), et qu'un dégradé ne s'interpole pas : la règle transition: background 0.4s n'a pas d'effet, la couleur change au premier instant du survol. Pour un fondu, posez la couleur dans une variable déclarée avec @property --msh-c { syntax: '<color>'; inherits: false; initial-value: #8b5cf6 }, utilisez-la dans le dégradé et faites transiter la variable..morph-shape--squircle:hover par .morph-shape--squircle.is-next (et ainsi de suite), puis basculez la classe en JavaScript : el.addEventListener('click', () => el.classList.toggle('is-next')). La transition reste identique.
