Clododesign

Humboldt Vivant — portrait botanique génératif animé en CSS

Art génératif · CSS @property · Portrait naturaliste

Humboldt Vivant

Un portrait où la nature respire. Hommage à Alexander von Humboldt et à sa vision de la Terre comme un seul organisme vivant : un récit éditorial habité par des formes biomorphiques qui se déforment lentement, comme une matière organique.

→ Les masses colorées ne sont pas des images : ce sont des formes vivantes qui morphent en continu. Faites défiler — chaque tableau éveille sa propre composition botanique.

La technique derrière le design

Les masses organiques ne sont pas des dessins figés : elles sont interpolées en direct par le moteur de rendu. La pièce exploite CSS @property (Houdini) pour animer nativement des dizaines de coordonnées de clip-path polygon() : chaque blob biomorphique se déforme en boucle, fluide et organique, sans une seule ligne de code d’animation impérative. Les motifs botaniques se tracent au chargement par stroke-dashoffset, et un IntersectionObserver réveille chaque tableau au scroll (activation paresseuse = léger). Un générateur Mulberry32 à graine fixe garantit une composition reproductible. L’ensemble compose un récit en trois tableaux éditoriaux — palette ivoire, cuivre, terracotta et jade — sur une grille cartographique discrète. Zéro canvas, zéro WebGL, zéro librairie, zéro CDN. Repli gracieux via @supports et respect de « mouvement réduit ». Fichier unique autonome, intégration en 5 minutes.

Idéal pour

Wellness premiumÉdition & beaux livresArchitecture bioFoodTech & AgriTechGalerie d’artCosmétique naturelleJardins & botaniqueHôtellerie nature

Palette — herbier vivant

Ivoire #F5ECD5
Cuivre #B87333
Terracotta #C4704A
Jade #3D6B4F
Encre #1C130A

Questions fréquentes

Les formes sont-elles vraiment animées en direct ?

Oui. Aucune vidéo ni GIF : les masses organiques morphent en temps réel grâce à l’interpolation native de CSS @property sur des dizaines de points de clip-path. Le navigateur recalcule la forme à chaque image — un mouvement fluide, continu et très léger.

Qui était Alexander von Humboldt ?

Naturaliste et explorateur prussien (1769–1859), pionnier d’une vision holistique de la nature : il voyait la Terre comme un seul organisme où tout est relié — climat, géologie, faune, flore. Cette pièce traduit visuellement cette idée d’une « totalité vivante », en trois tableaux éditoriaux.

Est-ce intégrable et personnalisable ?

Oui. C’est un fichier unique autonome (un bloc HTML, intégration en 5 minutes), sans librairie ni CDN. Les couleurs (ivoire, cuivre, terracotta, jade, encre), la vitesse et l’opacité des blobs, et la grille cartographique se règlent via quelques variables CSS en tête de fichier.

Est-ce léger et accessible ?

Oui. Pas de canvas ni de GPU : uniquement du CSS et du SVG, extrêmement légers. Les animations s’activent au scroll (lazy), respectent le réglage « mouvement réduit » et offrent un repli gracieux sur les anciens navigateurs. Contraste conforme WCAG AA.

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 (15 composants, modes clair/sombre, couleurs, typographie, tokens) et élément visuel botanique réutilisable. Usage commercial illimité.

Voir toute la collection → Tout l’art génératif