Fond lampe à lave
Des bulles chaudes qui montent, s’étirent et fusionnent sur tout l’écran, en HTML et CSS uniquement.
Réglages
Code
<div class="pt-lava"><svg width="0" height="0" style="position:absolute"><filter id="pt-lava-f"><feGaussianBlur in="SourceGraphic" stdDeviation="18"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 26 -11"/></filter></svg><b><i style="left:5.1%;--z:18.1cqmin;--t:17.9s;--dl:-8.7s"></i><i style="left:80.1%;--z:13.8cqmin;--t:13.7s;--dl:-17.8s"></i><i style="left:71.1%;--z:13.5cqmin;--t:21.0s;--dl:-17.0s"></i><i style="left:15.6%;--z:10.6cqmin;--t:20.5s;--dl:-14.7s"></i><i style="left:10.2%;--z:19.5cqmin;--t:20.9s;--dl:-21.2s"></i><i style="left:67.8%;--z:16.1cqmin;--t:22.0s;--dl:-21.1s"></i><i style="left:44.3%;--z:15.2cqmin;--t:13.1s;--dl:-13.1s"></i><i style="left:56.7%;--z:19.9cqmin;--t:13.3s;--dl:-1.8s"></i><i style="left:13.1%;--z:12.5cqmin;--t:21.3s;--dl:-21.2s"></i><i style="left:62.1%;--z:17.9cqmin;--t:14.5s;--dl:-3.6s"></i><u></u><u></u></b></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
Là où le loader lampe à lave est un petit objet, ce fond remplit tout l’écran de formes lentes qui fondent. Il donne un éclat rétro et psychédélique au site d’un festival de musique, à la page d’un label indépendant ou à l’en-tête d’un bar à cocktails. Les bulles montent du bas de l’écran et fusionnent en chemin.
C’est un visuel fort : laissez-lui une section à lui seul, comme l’en-tête ou la bannière de billetterie, plutôt que de le placer derrière de longs textes. Baissez la densité pour des bulles moins nombreuses et plus grandes. Les oranges sont classiques ; rose et bleu électrique évoquent une soirée en club.