Deep Dream Pattern
A full-frame rainbow plasma: three sine waves that cross and drift over time, turned into colors that run through the whole spectrum and ripple endlessly — computed live on a 2D canvas, 3.1 KB of JavaScript, smooth on Retina screens, paused off screen, a still image when the user reduces motion.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Liquid has 31 effects, including 6 free. Explore the category →
3 usage examples
How it works
The .fx-0418-root block is 300 px high and takes the full available width. It holds a <canvas class="ai-dream-canvas"> set to display: block at 100% of its container: the height comes from the root's CSS and the canvas fits into it (20 resizes in a row, 0 px of drift, Chromium and Firefox). Despite its name, the effect uses no neural network, no fractal and no "deep dream": it is a plasma, a classic of graphics demos, made of a sum of sine functions. The name stays the catalog's.
For each point, the script maps the position onto a 0 to 4 scale (nx, ny) and adds three waves: sin(3·nx + t) · cos(2·ny + 0.7·t), a grid of sliding cells; sin(3·√(nx² + ny²) − t), rings spreading from the top left corner; cos(nx·ny + 0.5·t), curved bands. Their average v, between -1 and 1, gives the color: red, green and blue equal 128 + 127 · sin(π·v + offset), with offsets of 0, 120 and 240° that also drift over time at three speeds (t, 0.7·t, 0.3·t). The same value of v therefore changes hue as seconds go by: the frame runs through the whole spectrum. Time t advances by 0.01 per frame, a full color cycle in about 630 frames (10 s at 60 Hz).
The computation runs on a grid of one point per 2 × 2 CSS pixels, in a small canvas off the page (320 × 150 for a 640 × 300 block), then that image is scaled up with smoothing onto the visible canvas, at the screen's density (up to 2): gradients stay continuous, with no steps, and a Retina screen costs no extra computation. Measured per frame: 2.8 ms in Chromium, 3 ms in Firefox and 1 ms in WebKit at 640 × 300; 9, 9 and 4 ms at 1,200 × 500. The loop pauses as soon as the block leaves the screen (IntersectionObserver, 0 frames computed, measured) and when the tab is hidden. The script animates every .fx-0418-root on the page separately.
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, the loop does not start: the canvas shows a single frame of the plasma (at time 0). Measured in Chromium, Firefox and WebKit: 0% of pixels change in 500 ms. Without that preference, the whole frame changes continuously (100% of pixels in 500 ms): keep the effect for a short background or an area visitors can scroll past. - Readability: the plasma goes from very light yellow to midnight blue within a few seconds, under the same text. No text color holds on its own: put text on a dark panel at 70% or more, or give it a heavy drop shadow, as in the three examples.
- Saturated colors in motion: large, highly saturated areas that keep changing can bother some people who are sensitive to visual stimulation. The change stays slow (no flashing: a color takes several seconds to give way), but avoid spreading it over a whole reading page.
- Decorative content: the canvas carries no information. Add
aria-hidden="true"to the root when the plasma is a background, as in the examples.
Browser compatibility
Canvas 2D (createImageData, putImageData, drawImage with smoothing), ResizeObserver, IntersectionObserver, matchMedia: 3.1 KB of JavaScript, no dependency. Measured in Chromium 151, Firefox 153 and WebKit 26: same plasma, canvas at 1,280 × 600 on a Retina screen, paused off screen, still image under reduced motion, 0 errors. Time advances per displayed frame: on a 120 Hz screen the colors cycle twice as fast as at 60 Hz.
Without ResizeObserver, the script follows the window resize event; without IntersectionObserver, the loop keeps running off screen. Without JavaScript, the block stays a dark rectangle (#0a0a0f): add a fallback gradient on .ai-dream-container if the background must stay colorful.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0418-root">
<div class="ai-dream-container">
<canvas class="ai-dream-canvas"></canvas>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Speed (JS — time += 0.01) |
0.01 per frame: one color cycle in about 10 s at 60 Hz | 0.004 for a slow background behind long text; 0.02 for a livelier poster. |
Pattern size (JS — x / w * 4 and y / h * 4) |
4 | 2 gives broad sheets of color; 8, patterns twice as tight. Change both values together to keep round patterns. |
Color intensity (JS — 128 + 127 * Math.sin(…), three lines) |
from 1 to 255 on each channel | 190 + 60 * Math.sin(…) gives a pastel plasma, easier to cover with text; 60 + 60 * Math.sin(…), a dark plasma. |
Palette (JS — 2.094 and 4.188 offsets) |
0, 120 and 240°: the whole spectrum | Close offsets (0.6 and 1.2) narrow the palette to a few neighboring hues. |
Computing detail (JS — y += 2, x += 2, w / 2, h / 2 and both * 2 in drawImage) |
one point computed per 2 × 2 CSS pixels | Set these six 2s to 4 for 4 times less computation, useful on a wide banner: smoothing keeps gradients continuous, just slightly softer. |
Height (CSS — height of .fx-0418-root) |
300px | The canvas follows the block's height. For a banner background, set the root to position: absolute; inset: 0. |
