ASCII Cloud Banner

A coral ASCII-art field of concentric arcs shimmers behind the OpenClaw hero banner while a bright wave radiates outward along the arcs — monospace glyphs reading as horizontal wavy lines fading in from the top, behind a bold heading.

How it works

This rebuilds the background behind OpenClaw's hero banner at the top of openclaw.ai. The entire effect on the live site is a single JS-generated <pre> of ASCII art — no canvas, no shader — and it is not static: a requestAnimationFrame loop rewrites the <pre>'s textContent every frame so a bright wave radiates outward along the arcs.

The cloud is a 27-row × ~760-column field of monospace glyphs arranged as concentric arcs centred near the top, with a density ramp → . → : → - → = → + → x → X → # → 8 → @ toward the bright core. Measured live geometry: arcs centred around column ~347 / row ~11 in a ~988-wide grid, with ring peaks every ~4–8 radius units out to ~84+. The text is coral rgb(245,101,74) (#f5654a) at opacity: 0.65, set in an 11px monospace stack (ui-monospace, "SF Mono", "Fira Code", "JetBrains Mono", Menlo) with line-height: 1.3 and white-space: pre so the column alignment is preserved. Measuring the live churn: ~80% of cells shift ±1 up/down the ramp every ~220ms, in coherent runs along arcs (length stays constant; only the characters swap) — i.e. a travelling brightness wave moving outward, not random twinkle.

The <pre> is ~1677px wide and sits centered inside a display: flex; justify-content: center .hero-art wrapper only 1280px wide with overflow: hidden — so the cloud overflows equally on both sides and is clipped, exactly like the site. The wrapper carries a linear-gradient mask rgba(0,0,0,0) 0% → #000 40% → #000 68% → rgba(0,0,0,0) 92% so the cloud fades in from the top and out toward the bottom. Behind it, header.hero::before paints a tiled radial-gradient dot field (26px 26px, rgba(237,237,237,0.09) dots) masked to fade out toward the bottom — the faint grid the cloud floats over. The central "glow" is not a filter or a radial gradient — it is just the higher-density @/#/8 runs reading brighter against the #101012 body background.

The heading matches the live banner: sans-serif #ededed with the word "really" set in an italic serif (Sentient, Georgia, serif) in the same coral; the eyebrow is uppercase coral mono (letter-spacing: 0.1em). The two CTAs (a solid coral pill and a ghosted outline pill) round out the hero.

Two honest deviations. (1) The arcs are generated procedurally rather than storing the live <pre> verbatim: a bright gaussian core (σ 7) plus gaussian rings (σ 2.6) every 18 radius units out to ~360, centred at (cx=380, cy=11), multiplied by a stable per-cell hash for the feathered fringe. (2) The radiating wave is reproduced rather than copied: the static arcs are precomputed once into baseIdx[r][c], then each frame an outward-traveling sine wave in radius AMP·sin(2π·(d/WL − t/PERIOD)) (WL 48, period 6.0s, amplitude 2.3 ramp-steps) plus a small per-cell shimmer is added and clamped to the ramp, re-rendered at ~30fps — a slow, sparse radiating pulse with few simultaneous crests. A CSS cloud-drift keyframe also floats the whole <pre> ±22px horizontally over 26s (an addition the original lacks). Fully self-contained: no external scripts, fonts, or images; all motion is disabled under prefers-reduced-motion (one static frame, no drift, no wave — only the CTA hover transition remains).

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/openclaw-ascii-cloud.md. Full writeup and live preview: https://fx.statico.io/demos/openclaw-ascii-cloud.

Source and credit

Effect originally seen on OpenClaw (https://openclaw.ai/) — credit to OpenClaw / Peter Steinberger. This is an independent recreation built from scratch for educational use; no proprietary source code was copied. Released under the Unlicense.

More

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