Водопад света

Сцену рисует фрагментный шейдер на WebGL 2, DOM отвечает только за карточку и её кромку. Слои считаются в экранных координатах и складываются в том порядке, в каком свет ведёт себя в жизни: нить потока сверху, расширяющаяся книзу завеса струй (шум едет вниз, поэтому поток выглядит разогнавшимся), дымка вокруг, удар о кромку, длинный разлёт вдоль неё, god-rays из точки удара и отражение на карточке. Цвет складывается ступенями (глубина, свечение, ядро) и проходит тонмаппинг Рейнхарда — в свечении остаётся структура струй, а не белое пятно. Полотно лежит поверх карточки в режиме screen: свет действительно ложится на поверхность, а не подсвечивает её снизу. Курсор двигает точку добавочного света прямо в шейдере, React при этом ничего не перерисовывает. Кадры считаются только когда компонент виден и вкладка активна, devicePixelRatio ограничен двойкой, prefers-reduced-motion оставляет один статичный кадр. Там, где WebGL 2 нет, сцену держат градиенты того же рисунка. Фон под потоком не пустой: по нему идёт сетка с точками, а поверх лежит невидимое поле технических символов — оно проявляется только под лучом курсора, приём донора, где рисунок открывается лишь под «фонариком»; координаты курсора уходят в CSS-переменные, поэтому проявление ничего не перерисовывает. В тёмной части кадра плывёт дым, и раз в несколько секунд далёкая молния коротко подсвечивает облако — вспышка не рисует ветку и не спорит с водопадом. Содержимое карточки задаётся через children.