Ma grossesseTerme : 9 mars
22 SAsemaines
Bébé mesure environ 27 cm
Prochain rendez-vous : échographie du 2e trimestre, mardi 14 h 30
LiquidGratuit
Blob Morph
Une forme de 180 px en dégradé violet-rose dont les huit rayons d'arrondi changent en continu sur 8 s : la silhouette gonfle et se creuse sans jamais quitter son carré, avec un texte au centre et un léger zoom au survol — CSS pur, zéro JavaScript, silhouette fixe si l'utilisateur réduit les animations.
Mis à jour le
BLOB
Survolez ou cliquez la scène pour interagir
Cet effet est gratuit — la catégorie Liquid en contient 31 au total, dont 6 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →
Exemples d'usage
Atelier Kaolin · Tournage
Tourner son premier bol
- Samedi, 9 h 30 – 12 h 30
- 4 tours, 4 élèves, débutants
- Terre et cuisson comprises, bols prêts sous 3 semaines
45 €la matinée
Crèche parentale Les Petits Pas
18 places, de 10 semaines à 3 ans
Notre projet
L'équipe
Menus de la semaine
Inscriptions2027
Dossiers jusqu'au 15 mars · portes ouvertes samedi 6 février
Comment ça marche
Un seul élément, .blob-morph, de 180 × 180 px, centré dans la racine .fx-0401-root (250 px de haut, fond #1a1a24). Il est peint d'un dégradé à 135° de #a855f7 à #ec4899, entouré d'un double halo (box-shadow de 40 px violet à 40 % et de 80 px rose à 20 %), et centre son texte en flex : 1rem, graisse 700, blanc, avec une ombre portée légère. Le contenu est du HTML ordinaire : un mot, un chiffre, deux lignes.
La forme vient de border-radius écrit avec ses huit valeurs : quatre rayons horizontaux, une barre oblique, quatre rayons verticaux (60% 40% 30% 70% / 60% 30% 70% 40%). Chaque coin devient ainsi un arc d'ellipse, et quand les valeurs voisines diffèrent, le bord se creuse d'un côté et gonfle de l'autre. L'animation blobMorph enchaîne sept jeux de rayons, un toutes les 1,1 s environ, et revient au premier à 8 s, en ease-in-out : le navigateur interpole chaque rayon, la silhouette passe d'une forme molle à l'autre sans à-coup. Le carré de 180 px ne bouge pas : seuls les arrondis changent, la forme respire sur place. Au survol, transform: scale(1.08) l'agrandit en 0,3 s.
L'arrondi animé n'est pas confié au compositeur : la forme et ses halos sont repeints à chaque image. Mesuré dans Chromium 151 en rendu logiciel (le cas le plus lent) : environ 1,6 ms de rastérisation par image, coût stable puisque la taille ne change pas. Le comportement est identique dans Firefox 153 et WebKit 26 (2 % des pixels du cadre changent en 500 ms, zoom ×1,08 au survol dans les trois).
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, un bloc limité à.fx-0401-rootretire l'animation et fixe la première silhouette de la boucle (sans lui, l'élément redeviendrait un carré, l'arrondi n'existant que dans les keyframes) ; le zoom au survol est retiré aussi. Mesuré dans les trois moteurs : 0 % des pixels changent en 500 ms,transformreste ànoneau survol. - Contraste du texte : le blanc mesure 3,96:1 sur le violet
#a855f7et 3,53:1 sur le rose#ec4899. C'est assez pour du grand texte (au moins 18,66 px en gras, seuil 3:1), pas pour le texte de 16 px du code (seuil 4,5:1). Pour un chiffre ou un mot, passez-le à 24 px ou plus, comme dans les scènes ci-dessus ; pour une phrase, foncez le dégradé. - Clavier et toucher : la forme est un
div, qui ne reçoit pas le focus ; le zoom n'existe qu'au survol de la souris. Si elle mène quelque part (une rubrique, comme « Inscriptions 2027 »), faites-en un lien<a>et donnez le même zoom à:focus-visible. - Rythme : changement de forme lent (8 s par tour), sans clignotement ni déplacement : la forme ne quitte pas sa place, ce qui la rend supportable à côté d'un texte à lire.
Compatibilité navigateur
CSS pur : border-radius à huit valeurs animé, dégradé linéaire, box-shadow, transition de transform. Zéro JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même silhouette au même instant, même zoom au survol, même arrêt sous mouvement réduit.
Chrome 43+✓ Complet
Firefox 16+✓ Complet
Safari 9+✓ Complet
Edge 12+✓ Complet
Mobile iOS 9+✓ Complet, sans zoom (pas de survol)
Android Chrome✓ Complet, sans zoom (pas de survol)
Sans animations CSS, la forme reste un carré de 180 px aux angles vifs (l'arrondi n'est déclaré que dans les keyframes) ; le texte reste lisible. Ajoutez border-radius: 50% à .blob-morph si vous visez de tels navigateurs.
Le code
Copiez les trois blocs dans votre page. Aucune dépendance.
HTML
<div class="fx-0401-root">
<div class="blob-morph">BLOB</div>
</div>
CSS
.fx-0401-root,
.fx-0401-root *,
.fx-0401-root *::before,
.fx-0401-root *::after {
box-sizing: border-box
}
.fx-0401-root {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
.blob-morph {
width: 180px;
height: 180px;
background: linear-gradient(135deg, #a855f7, #ec4899);
animation: blobMorph 8s ease-in-out infinite;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
color: white;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
box-shadow:
0 0 40px rgba(168, 85, 247, 0.4),
0 0 80px rgba(236, 72, 153, 0.2);
transition: transform 0.3s ease;
}
.blob-morph:hover {
transform: scale(1.08);
}
@keyframes blobMorph {
0% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
14% {
border-radius: 40% 60% 70% 30% / 50% 60% 40% 50%;
}
28% {
border-radius: 70% 30% 50% 50% / 30% 50% 60% 70%;
}
42% {
border-radius: 30% 60% 70% 40% / 50% 30% 70% 60%;
}
56% {
border-radius: 50% 50% 30% 70% / 70% 40% 60% 30%;
}
70% {
border-radius: 40% 70% 60% 30% / 40% 60% 30% 70%;
}
84% {
border-radius: 70% 40% 40% 60% / 60% 50% 50% 40%;
}
100% {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
}
/* Mouvement réduit : une silhouette fixe (celle du début de la boucle), sans zoom au survol. */
@media (prefers-reduced-motion: reduce) {
.fx-0401-root .blob-morph {
animation: none;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%
}
.fx-0401-root .blob-morph:hover { transform: none }
}
JavaScript (fx-0401)
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Taille (CSS — width et height de .blob-morph) |
180 × 180 px | Les rayons sont en pourcentages : la silhouette garde ses proportions à toutes les tailles. Gardez largeur et hauteur égales ; un rectangle donne une forme étirée qui respire moins. |
Couleurs (CSS — linear-gradient(135deg, #a855f7, #ec4899) et box-shadow) |
violet → rose, halos violet 40 % et rose 20 % | Changez le dégradé et les deux halos ensemble. Sur un fond clair, baissez l'opacité des halos (20 % et 10 %) pour éviter une tache grise. |
Vitesse (CSS — 8s de blobMorph) |
8 s pour sept silhouettes | 12 à 16 s pour un fond très calme ; 4 s donne une forme agitée, à réserver à un élément sans texte. |
Silhouettes (CSS — huit valeurs de chaque étape de @keyframes blobMorph) |
sept jeux de rayons entre 30 et 70 % | Gardez chaque paire de rayons d'un même côté autour de 100 % au total (60 % + 40 %) : au-delà, le navigateur réduit tous les rayons et la forme redevient presque ronde. Des écarts plus forts (20 % / 80 %) creusent davantage. |
Survol (CSS — scale(1.08) et transition: transform 0.3s) |
×1,08 en 0,3 s | Retirez la règle :hover si la forme n'est pas cliquable : un zoom laisse croire à un lien. Si elle l'est, ajoutez :focus-visible au même sélecteur. |
Cadre (CSS — .fx-0401-root) |
250 px de haut, fond #1a1a24, overflow: hidden | Le halo de 80 px déborde de la forme : avec un cadre plus bas que 300 px, il est coupé net en haut et en bas. Retirez overflow: hidden ou agrandissez le cadre si le halo compte. |
FAQ
Pourquoi animer border-radius plutôt qu'un tracé SVG ?
Parce que la forme reste un bloc HTML : le texte à l'intérieur est du vrai texte, centré en flex, sans calque à superposer ni coordonnées à calculer. La contrepartie : border-radius ne fait que des formes convexes ou presque, arrondies aux quatre coins, jamais une étoile ni un cœur. Pour passer d'une figure à l'autre, voyez SVG Path Morph (fx-0407), qui anime le tracé d'une forme vectorielle.
Le texte peut-il sortir de la forme pendant la déformation ?
Non, tant qu'il reste court. Le carré de 180 px ne change pas, seuls les coins se creusent ; la zone centrale reste toujours couverte. Gardez le texte sous 120 px de large et sur deux lignes au plus : au-delà, les mots touchent les bords creusés et semblent déborder.
Est-ce que ça coûte cher à afficher ?
Un peu plus qu'un déplacement : l'arrondi animé oblige à repeindre la forme et ses halos à chaque image. Mesuré dans Chromium en rendu logiciel : environ 1,6 ms par image, constant. C'est sans conséquence pour une ou deux formes ; pour une grille de dix blobs, décalez leurs animation-delay plutôt que d'en ajouter, ou réduisez les halos, qui sont la partie la plus coûteuse à peindre.
