Cyber Ambient Overlay

A matrix field of monospace glyphs that ripple and rainbow as invisible circular waves wash outward across the header.

How it works

The real /cyber header background is the #cyber-ambient-overlay-canvas 2D <canvas> from cdn/assets/cyber-g632ua04.js (the De() component) — not a particle network. The field is laid out on a fixed 13px lattice. A pool of glyphs (count clamp(cols*rows/72, 56, 180)) is scattered across the grid, each drawn from the 19-character set ` .:-=+*#%@<>/\[]{}01 using the 13px ui-monospace font.

The motion comes from three invisible circular ripple waves — small, medium, and large — that endlessly expand from points in the top 82% of the canvas and respawn when they reach their target radius. Each wave has its own speed (small 0.34–0.46, medium 0.28–0.38, large 0.22–0.32 px/frame), band thickness (16/22/30 +random), baseStrength (0.6/0.82/1.0) and a targetRadius scaled to a fraction of the canvas diagonal (0.4/0.62/0.85 ×). A wave's strength decays as baseStrength·(1−r/target)², so each ripple fades as it grows. New waves are spawned at least min(W,H)·0.28 away from the previous one.

Each wave carries three concentric gaussian rings (the crest plus two trailing rings offset by 13·3.2 and 13·6.2 px). For every glyph these rings produce two things: a radial displacement that physically shoves the character outward from the wave centre ((d·1.1 + f·0.78 + p·0.48)·13·0.7·strength), and an intensity that drives brightness. Intensity is modulated by sin(time/950) and a vertical fade clamp(1 − y/(H·1.06), 0.22, 1) so the top of the field stays brightest. Where intensity is high the glyph is recolored in full-saturation rainbow HSL (hsla(hue,100%,78%,…) in dark mode, hue from hueOffset + time·0.045 + g·90), gains a 4 + g·8 px blur shadow, and advances its character index. Glyphs also random-walk: a 10% per-frame chance to step one cell, and a 1.2% chance to teleport.

Underneath the glyphs, drawGlow() paints faint hsla(hue,46%,60%,~0.06) squares pulsing along the same ring crests, and a dim rgb(108,110,138) grid is stroked at 6% alpha. Each frame begins by filling a translucent rgba(33,33,33,0.18) rectangle (the #212121 dark surface color) which produces the fade-trail rather than clearing the canvas. The loop is throttled to ~24 fps (1000/24 ms gate), the device pixel ratio is clamped to 1, the canvas opacity is 0.72, and a linear-gradient` mask dissolves the field toward the bottom — all matching the captured values. Dark-theme constants are hard-coded here since the standalone has no ChatGPT theme tokens to sample.

How to use this file

This is a complete, self-contained HTML document — copy it verbatim rather than reconstructing it. Markdown version: https://fx.statico.io/effects/cyber-canvas.md. Full writeup and live preview: https://fx.statico.io/demos/cyber-canvas.

Source and credit

Effect originally seen on ChatGPT (https://chatgpt.com/cyber) — credit to OpenAI / ChatGPT. This is an independent recreation built from scratch for educational use; no proprietary source code was copied. Released under the Unlicense.

Terms used above are defined in the glossary. See also the site map, AGENTS.md and llms.txt.

Cyber Ambient Overlay

How it works

How to use this file

Source and credit

More