Deep Dream Pattern
Un plasma arc-en-ciel plein cadre : trois ondes sinus qui se croisent et dérivent dans le temps, converties en couleurs qui passent par tout le spectre et ondulent sans fin — calculé en direct sur un canvas 2D, 3,1 Ko de JavaScript, lissé sur écran Retina, en pause hors écran, image fixe si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Liquid comprend 31 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le bloc .fx-0418-root fait 300 px de haut et toute la largeur disponible. Il contient un <canvas class="ai-dream-canvas"> en display: block à 100 % de son conteneur : la hauteur vient du CSS de la racine et le canvas s'y cale (20 redimensionnements de suite, 0 px de dérive, Chromium et Firefox). Malgré son nom, l'effet n'utilise ni réseau de neurones, ni fractale, ni « deep dream » : c'est un plasma, une figure classique de la démo graphique, faite d'une somme de fonctions sinus. Le nom reste celui du catalogue.
Pour chaque point, le script ramène la position sur une échelle de 0 à 4 (nx, ny) et additionne trois ondes : sin(3·nx + t) · cos(2·ny + 0,7·t), un damier de cellules qui glissent ; sin(3·√(nx² + ny²) − t), des anneaux qui partent du coin haut gauche ; cos(nx·ny + 0,5·t), des bandes courbes. Leur moyenne v, entre -1 et 1, donne la couleur : rouge, vert et bleu valent 128 + 127 · sin(π·v + décalage), avec des décalages de 0, 120 et 240° qui glissent eux aussi dans le temps à trois vitesses (t, 0,7·t, 0,3·t). Une même valeur de v change donc de teinte au fil des secondes : le cadre passe par tout le spectre. Le temps t avance de 0,01 par image, soit un tour complet des couleurs en environ 630 images (10 s à 60 Hz).
Le calcul se fait sur une grille d'un point pour 2 × 2 pixels CSS, dans un petit canvas hors de la page (320 × 150 pour un bloc de 640 × 300), puis cette image est agrandie avec lissage sur le canvas visible, à la densité de l'écran (jusqu'à 2) : les dégradés restent continus, sans marches, et l'écran Retina ne coûte pas plus de calcul. Mesuré par image : 2,8 ms dans Chromium, 3 ms dans Firefox et 1 ms dans WebKit à 640 × 300 ; 9, 9 et 4 ms à 1 200 × 500. La boucle se met en pause dès que le bloc sort de l'écran (IntersectionObserver, 0 image calculée, mesuré) et quand l'onglet est caché. Le script anime chaque .fx-0418-root de la page séparément.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la boucle ne démarre pas : le canvas affiche une seule image du plasma (au temps 0). Mesuré dans Chromium, Firefox et WebKit : 0 % de pixels qui changent en 500 ms. Sans cette préférence, tout le cadre change en continu (100 % des pixels en 500 ms) : réservez l'effet à un fond court ou à une zone que le visiteur peut faire défiler. - Lisibilité : le plasma passe du jaune très clair au bleu nuit en quelques secondes, sous le même texte. Aucune couleur de texte ne tient seule : posez le texte sur un panneau sombre à 70 % ou plus, ou donnez-lui une ombre portée épaisse, comme les trois exemples.
- Couleurs saturées en mouvement : de grandes surfaces très saturées qui changent sans cesse peuvent gêner certaines personnes sensibles aux stimulations visuelles. Le changement reste lent (aucun clignotement : une couleur met plusieurs secondes à céder la place), mais évitez de l'étendre à toute une page de lecture.
- Contenu décoratif : le canvas ne porte aucune information. Ajoutez
aria-hidden="true"sur la racine quand le plasma sert de fond, comme dans les exemples.
Compatibilité navigateur
Canvas 2D (createImageData, putImageData, drawImage avec lissage), ResizeObserver, IntersectionObserver, matchMedia : 3,1 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même plasma, canvas à 1 280 × 600 sur écran Retina, pause hors écran, image fixe sous mouvement réduit, 0 erreur. Le temps avance par image affichée : sur un écran à 120 Hz, les couleurs défilent deux fois plus vite qu'à 60 Hz.
Sans ResizeObserver, le script suit l'événement resize de la fenêtre ; sans IntersectionObserver, la boucle continue hors écran. Sans JavaScript, le bloc reste un rectangle sombre (#0a0a0f) : prévoyez un dégradé de secours sur .ai-dream-container si le fond doit rester coloré.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0418-root">
<div class="ai-dream-container">
<canvas class="ai-dream-canvas"></canvas>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Vitesse (JS — time += 0.01) |
0,01 par image : un tour de couleurs en 10 s environ à 60 Hz | 0.004 pour un fond lent derrière un texte long ; 0.02 pour une affiche plus nerveuse. |
Taille des motifs (JS — x / w * 4 et y / h * 4) |
4 | 2 donne de grandes nappes de couleur ; 8, des motifs deux fois plus serrés. Changez les deux valeurs ensemble pour garder des motifs ronds. |
Intensité des couleurs (JS — 128 + 127 * Math.sin(…), trois lignes) |
de 1 à 255 sur chaque canal | 190 + 60 * Math.sin(…) donne un plasma pastel, plus facile à couvrir de texte ; 60 + 60 * Math.sin(…), un plasma sombre. |
Palette (JS — décalages 2.094 et 4.188) |
0, 120 et 240° : tout le spectre | Des décalages proches (0.6 et 1.2) resserrent la palette sur quelques teintes voisines. |
Finesse du calcul (JS — y += 2, x += 2, w / 2, h / 2 et les deux * 2 de drawImage) |
un point calculé pour 2 × 2 pixels CSS | Passez ces six 2 à 4 pour un calcul 4 fois moins coûteux, utile sur un grand bandeau : le lissage garde des dégradés continus, à peine plus doux. |
Hauteur (CSS — height de .fx-0418-root) |
300px | Le canvas suit la hauteur du bloc. Pour un fond de bannière, placez la racine en position: absolute; inset: 0. |
