Art génératif · CSS @property · Botanique vivante

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. Prête à habiller votre site.

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.

Cette pièce sur votre site Intégrer cette pièce dès CHF 890 Vous êtes une agence ?

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

Fleuristes & marques botaniques premiumStudios de yoga & bien-êtreHôtels boutique & gastronomieCosmétiques naturels & bioGaleries & espaces culturelsPortfolios de créateurs & artisans

Palette, crème, corail & sauge

Crème #FDF6EC
Encre #2C1810
Corail #E8633A
Sauge #8DB85A
Abricot #F4A44A
Rose #E8778A

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.

Combien coûte l'intégration de cette pièce ?

L'intégration démarre à CHF 890. La palette, la vitesse de respiration et la graine génératrice se règlent en quelques variables : on accorde le jardin à votre identité de marque, puis on le pose en hero ou en fond de section. C'est un fichier unique autonome, sans CDN. Un site signature construit autour démarre à CHF 2 500.

Comment on l'intègre

On fait éclore la pièce chez vous. On accorde la palette (crème, corail, sauge, abricot) à votre charte, on règle la vitesse de respiration et la densité des corolles, puis on pose le jardin en hero ou en fond de section sur votre site. Intégration dès CHF 890. Un site signature bâti autour de cet écosystème démarre à CHF 2 500. Hébergement suisse, code livré, pleine propriété.

Parlons de votre projet Discuter de cette intégration intégration dès CHF 890