BONEYARD · part · layer

Greetings

src/23-greetings.js · one module, no third-party code

Designed still Focus preview for keys

ParametersFactory

How it works

On mount the module reads the sentence already in the element (the static line that ships in the HTML and is what a visitor without JavaScript reads), splits it into one span per glyph, and builds a track holding two copies of that span run. One CSS animation slides the track by exactly one copy width per cycle, so the loop joins without a jump. Every frame the ride calls tick(): the module reads how far that animation has run, works out where each glyph is on screen, and lifts only the visible glyphs on a sine wave that travels along the line. A gradient mask and a matching per-glyph scale/opacity envelope resolve each character inside the frame and let it recede at the other edge. The first run opens from a bright horizontal sliver, borrowing SWITCH's physical CRT grammar. Off-screen glyphs are never touched, so the cost follows the screen width, not the length of the sentence.

When the ride rests (the Still dial, the sign-off, a hidden tab) tick() is not called and the wave holds its last shape. Hover or focus pauses the slide. Still hides the track and shows the static sentence.

Provenance

technique: real-DOM sine scroller: a duplicated track slid by one CSS transform animation, revealed as a CRT line opening, with masked edge depth and a travelling sine written only to glyphs on screen
lineage: the C64 and Amiga cracktro sine scroller, about 1985 to 1992
original: the demoscene "greetings to" list IS the provenance line: the people and years behind the tricks on the row plus the data sources for the ground (vision brief 4.4, verified). aria-label on the parent carries the plain sentence; the glyph spans are aria-hidden; the track pauses on hover and focus-within; the dial's Still shows the static line instead of the track. Glyphs rise, resolve and depart through the same edge envelope, so the provenance enters and leaves as typography instead of being clipped. Never <marquee>.
not: a news ticker, a fake terminal, a place for links. It names people and years and nothing else.
deps: none · DOM + one CSS transform animation · 2026-09
budget: the first version ran one CSS animation per glyph (587 at once) and cost about 22 ms of style work per frame at 4x CPU, the single largest cost on the ride; this version writes about 40 (phone) to 170 (desktop) transforms per frame and the ride went from 16 to 26 fps to 50 to 60 fps at 4x CPU (2026-09-30)
api: mount(element, params, ctx) -> { start(), setDial(v), tick(dt, t), resize, still, destroy }
license: MIT, Desert Data Labs LLC

Budget: the first version ran one CSS animation per glyph (587 at once) and cost about 22 ms of style work per frame at 4x CPU, the single largest cost on the ride; this version writes about 40 (phone) to 170 (desktop) transforms per frame and the ride went from 16 to 26 fps to 50 to 60 fps at 4x CPU (2026-09-30)