Fumée colorée
Des nuages de couleur qui tourbillonnent et grossissent lentement, comme de l’encre dans l’eau.
Réglages
Code
<div class="pt-smoke"><i style="--cc:var(--c1);--x:-20.0%;--y:34.5%;--ox:89.6%;--oy:41.7%;--t:20.6s"></i><i style="--cc:var(--c2);--x:16.1%;--y:-11.6%;--ox:84.4%;--oy:86.7%;--t:29.0s"></i><i style="--cc:var(--c3);--x:4.9%;--y:2.5%;--ox:87.5%;--oy:42.5%;--t:26.5s"></i><i style="--cc:var(--c1);--x:56.8%;--y:3.7%;--ox:60.6%;--oy:44.4%;--t:24.6s"></i><i style="--cc:var(--c2);--x:24.3%;--y:6.2%;--ox:89.8%;--oy:52.7%;--t:31.6s"></i><i style="--cc:var(--c3);--x:42.2%;--y:-14.4%;--ox:32.7%;--oy:56.5%;--t:22.5s"></i><i style="--cc:var(--c1);--x:-13.5%;--y:4.4%;--ox:45.8%;--oy:30.6%;--t:27.3s"></i></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Arrière-plans
Où l’utiliser
La fumée colorée apporte une atmosphère mystérieuse qui fonctionne dans le hero d’une marque de parfum, sur le site d’un bar à cocktails ou sur la page teaser d’une sortie d’album. Sept nuages flous tournent et gonflent à des vitesses différentes, et le mélange ne se répète jamais vraiment. Un fond de fumée animé en CSS pur.
Il brille sur un fond sombre avec deux ou trois couleurs saturées ; sur du blanc, il perd presque tout son éclat. Si du texte passe dessus, baissez un peu l’opacité pour que les nuages n’avalent pas les lettres fines.