Flora Perpetua
Un jardin qui ne se fane jamais. Des formes biomorphiques qui respirent, se déforment et dansent en mouvement perpétuel — une présence végétale, douce et hypnotique, posée sur votre page.
→ Aucune interaction requise : les corolles morphent en continu, à des rythmes décalés, sans jamais se répéter à l’identique. Une respiration visuelle qui apaise.
La technique derrière le design
Cette pièce ne dessine aucune image : elle cultive des formes. Le cœur est CSS @property (l’API Houdini des propriétés personnalisées typées) : une cinquantaine de variables de coordonnées sont déclarées comme des <number> animables, ce qui permet d’interpoler en douceur les points de contrôle des corolles — là où le CSS classique ne saurait pas animer une forme. Douze formes morphent ainsi, chacune sur son propre cycle, ponctuées de SVG SMIL asynchrone et d’un générateur pseudo-aléatoire à graine fixe (Mulberry32, graine 0x464C4F52) pour une composition unique mais reproductible. Zéro canvas, zéro WebGL, zéro librairie, zéro CDN — un seul fichier autonome. Léger, fluide, intégrable en 5 minutes ; respecte « mouvement réduit ».
Idéal pour
Palette — crème, corail & sauge
Questions fréquentes
Qu’est-ce que CSS @property ?
C’est une fonctionnalité de l’API CSS Houdini qui permet de déclarer une propriété personnalisée avec un type (ici <number>). Le navigateur sait alors l’interpoler au fil d’une animation. On peut ainsi animer en douceur des valeurs que le CSS classique traiterait comme du texte non animable — par exemple les coordonnées des sommets d’une forme. C’est ce qui fait « respirer » chaque corolle.
Y a-t-il vraiment zéro dépendance ?
Oui. Pas de canvas, pas de WebGL, pas de librairie JavaScript, pas de CDN. Tout est en CSS et SVG dans un seul fichier HTML autonome. Seules les polices Google sont chargées en confort, avec repli serif gracieux si elles sont indisponibles. Vous pouvez l’héberger n’importe où et l’intégrer en collant un bloc.
L’animation est-elle gourmande ou fatigante ?
Non. Les transformations sont déléguées au moteur de rendu (compositing), donc fluides et économes — même sur mobile. Et la pièce respecte la préférence système « mouvement réduit » : si l’utilisateur la demande, les formes se figent dans un état d’équilibre serein.
Puis-je changer les couleurs et le rythme ?
Oui. La palette, la vitesse de respiration et la graine génératrice se règlent en quelques variables en tête de fichier. Changez la graine et vous obtenez un autre jardin ; changez la palette et la pièce épouse votre identité de marque.
Ce que vous recevez
Le kit complet : widget autonome (un seul fichier, intégration en 5 minutes), fragment WordPress copier-coller, art génératif injectable, charte design (tokens couleur, échelle typographique, composants, colorways) et notes d’artiste. Usage commercial illimité.
Voir toute la collection → Tout l’art génératifÀ découvrir aussi : Humboldt Vivant · Lenteur Organique · Biolith Drift · Morphogenèse Organique · Accueil