GLOW, BLINK, SCANLINES
The only three effects in the system. Glow marks energization, blink marks alarm, scanlines sit once on the outermost frame. There is no fourth effect.
THE THREE EFFECTS
No component anywhere in the CSS carries a transition — a control does not
ease into being pressed. The one
timing function in the whole framework belongs to the gas, not to the UI: see
.ac-afterglow in PERSISTENCE.
THE THREE SIMULATIONS
The board at the top of this page defaults to PLASMA on, CRT
off — every switch on it is documented in SCREEN & BOARD. Plasma is
what this panel is; CRT simulates a different display technology, and its blanking gaps are the
one thing a plasma screen conspicuously does not have. Turn it on to compare — the choice
persists. .ac-afterglow rides the CRT switch, so it is off by default too.
Three screen simulations layer on top, driven from two switches —
.ac-afterglow rides with .ac-crt, because persistence is a property
of the same glass the scanlines are on, and a tube that scans without holding is not a tube
anybody has watched. Each class still works alone if you wire it yourself:
.ac-bloom (the panel — hotter glow tokens for every descendant, a soft
center-weighted bleed breathing on a 9s mains cycle, and the cell mesh with its shimmer),
.ac-crt (the tube — scanline texture, edge vignette, one-cell line drift per 11s,
a 5.5s mains flicker, and a retrace band sweeping down every 13s) and
.ac-afterglow (plasma persistence — its own chapter,
PERSISTENCE).
All three are tuned near the threshold of perception: if you can point at
the effect, it is too strong. The motion describes energized hardware, not a UI transition —
state changes stay instant — and everything stops under prefers-reduced-motion.
.ac-scanlines is the static, motion-free texture for cards and print.
The classes compose; the switches do not. Nothing in the CSS
stops a frame carrying .ac-bloom and .ac-crt at once — the code
sample further down shows exactly that, because it is the composition reference. The board
above refuses it: turning one on turns the other off, since a panel with gas gaps and a
scanning beam in the same enclosure is not a panel. Both off is allowed and means a flat lit
surface. SCREEN & BOARD has the rest of that.
The flicker is the one number worth stating exactly, because the honest version of it cannot be drawn at all: a tube refreshing at 60Hz, watched on a display refreshing at 60Hz, has no headroom to show a 60Hz modulation — that is Nyquist, not a browser limitation. What is renderable is the slow beat underneath it, so the scanline layer dips 3.5% at its deepest on a 5.5s cycle, which moves the panel's own luminance by well under 1%. The depth is scaled by the phosphor: P11, P31 and P4 are fully dark between frames and take the whole budget, P7 and P39 take 9% of it, and a gas declares no flicker at all and renders identically to a panel that never had this rule. It is a budget rather than a taste setting — WCAG 2.3.1 governs the ceiling, and 0.18Hz sits more than an order of magnitude below the 3–8Hz band it is written about.
The retrace band is the one effect with an off switch, and it
earns one by being the only part of the tube that travels. The refresh itself is unwatchable for
the Nyquist reason above — but what a short phosphor actually did was never the whole screen
blinking: at any instant only the band the beam had just written was at full brightness, and
everything behind it had already given up. That is spatial rather than temporal, so it can move
as slowly as you like and still read. It is also 26% of the frame crossing all of it every 13s,
over text somebody is trying to read, which is a fair thing to not want. Hence
data-ac-style-retrace="off" on <html> — the Retrace Band switch on
the board writes it, and it is a comfort preference in the way blink is, not a claim that the
tube had no retrace. An author who never wants it has a cheaper answer: the band is a
<span class="ac-retrace"> you put in the frame yourself, so leave it out and
there is nothing to switch. prefers-reduced-motion hides it either way.
Its amplitude is scaled by --ac-flicker like the hum is, and by the
same argument: the band is what a short phosphor looks like, so P11, P31 and P4
get one you can watch and P7 and P39 keep a lightening sweep that is almost invisible. Both
halves of the flicker number — how hard the picture breathes and where the tube has already gone
dark — come out of the one constant. It is deliberately drawn near the floor of perception: a
4.2% trough under a 5.3% edge at full flicker, which is half what it was in 2.0.0, because at
twice this it stopped reading as the panel's own unevenness and started reading as a bar sliding
over the page.
THE SCREEN DOOR
A screen door is not a scanline, and the difference is the whole
point of .ac-bloom. A cell here lights at the crossing of a row wire and
a column wire, boxed in on four sides by barrier ribs that carry no discharge and emit nothing
— so a lit pixel is a neon dot trapped in a square aperture, and what you see with your eye
close to the glass is a fine mesh in both axes. The dark horizontal blanking gaps
between raster lines belong to .ac-crt and to the tube it simulates. There is no
scan in a plasma panel, so there is nothing to blank. The ribs are drawn in pure black rather
than a tint, which is what makes the grid appear only where the panel is lit: over the unlit
screen a black veil has nothing to take away. On top of it sits the shimmer — the sustain
voltage is AC, so the gas is struck and re-struck rather than held, and a sub-pixel buzz on
two detuned cycles is the visible residue of that. Both stop under
prefers-reduced-motion; the mesh itself does not, because it is the shape of the
hardware rather than an effect playing over it.
All three go on the outermost frame, and the frame is the whole screen —
including the menu bar. A nav that floats above the simulations is a nav that
is not part of the panel, so .ac-nav--sticky sits inside the frame at z-index 20
and every overlay paints above it, from 40 up. That is also why .ac-screen clips
with overflow: clip rather than hidden: hidden would
make the frame a scroll container, and a sticky bar inside one sticks to nothing.
--ac-ink-dim. Dim is a DRIVE LEVEL, not an off state — --ac-emit-70 is a cell driven at 70%, so it scatters 70% as much. The tiers are arithmetic, not taste: each stop's luminance is already fixed by the contrast ratio it was solved to, so 1.00 / 0.70 / 0.41 fall straight out of 7.0 / 5.2 / 3.4 : 1. Radius never scales — how far light spreads is a property of the glass, not of the drive.npm run check fails the build if an ink level is set without restating the halo that belongs to it..ac-afterglow is on, which softens the OFF edge only. The ON edge stays instant either way.THE THREE SIMULATIONS, SIDE BY SIDE
Each tile is its own frame. Use the PLASMA and CRT switches on the board at the top of the page to compare these against the live page — the difference should be almost too small to name. CRT takes the afterglow with it, and both reach the menu bar, which is inside the frame rather than floating above it.
data-ac-style-retrace.
<div class="ac-screen ac-bloom ac-crt ac-afterglow"><span class="ac-mesh"></span><span class="ac-retrace"></span><span class="ac-persist"></span> … </div>
Nesting a simulation inside another one. Once per screen, on the outermost frame — the tiles above are the exception that proves it, and they are documentation, not UI.
class="ac-cursor"