23 lines
1.1 KiB
TypeScript
23 lines
1.1 KiB
TypeScript
|
import { keyframes } from '@vanilla-extract/css';
|
||
|
|
|
||
|
|
// Digital Rain — a slow vertical PAN of the streak columns.
|
||
|
|
//
|
||
|
|
// The streak SVG tile is authored 200px tall (see animRain.ts, backgroundSize
|
||
|
|
// height = 200px). The falling illusion is a pure background-position translate
|
||
|
|
// downward by EXACTLY one tile height (200px) over the cycle, so the loop is
|
||
|
|
// perfectly seamless — the pixel at y re-enters where the pixel at y-200 was,
|
||
|
|
// which is identical because the tile repeats.
|
||
|
|
//
|
||
|
|
// Only the first background layer (the streak SVG) is panned; every subsequent
|
||
|
|
// comma-separated layer is kept at its authored position ('0 0') so the base
|
||
|
|
// gradients / vignette stay put while the rain falls over them. Listing a value
|
||
|
|
// per layer is required — a single value would pan ALL layers.
|
||
|
|
//
|
||
|
|
// getChatBg adds `willChange: 'background-position'` for the animated case, and
|
||
|
|
// STRIPS this whole `animation` for reduced-motion, at which point the static
|
||
|
|
// backgroundPosition authored in animRain.ts is what shows.
|
||
|
|
export const rainFall = keyframes({
|
||
|
|
'0%': { backgroundPosition: '0 0, 0 0, 0 0, 0 0' },
|
||
|
|
'100%': { backgroundPosition: '0 200px, 0 0, 0 0, 0 0' },
|
||
|
|
});
|