Сферический поток

Canvas-фон по мотиву hero-анимации Ameba: частицы раскладываются по Fibonacci-сфере, сортируются по глубине и рисуются как маленькие светящиеся прямоугольники в additive-режиме. Глубина резкости сделана без фильтра: у силуэта и на дальней стороне плитка рисуется тремя прямоугольниками с растущим размером и падающей прозрачностью — фильтр на каждой из полутора тысяч плиток стоил бы кадров, а картинка та же. Отдельным потоком снизу летят плитки: у каждой своё гнездо на сфере, путь считается кубической кривой с мягкой посадкой, за ней идёт короткий след, а в момент посадки вспыхивает блик. Выделение живёт по часам: раз в секунду прицел переезжает на новую плитку, она на секунду желтеет — размер при этом не меняется, прыжок размера читался бы как ошибка отрисовки, — а вокруг рисуется тонкий прицел из четырёх углов, как в оригинале. Выделенная плитка рисуется поверх, а не в additive-режиме: жёлтый, сложенный со свечением шара, выцвел бы в белый. Прогресс разрушения берётся из scroll-позиции ближайшего scroll-контейнера или окна, поэтому прокрутка вниз разносит плитки наружу, а обратная прокрутка плавно собирает шар. Компонент сам ограничивает devicePixelRatio до 2, останавливается вне экрана и в скрытой вкладке, поддерживает prefers-reduced-motion статичным кадром и не использует внешние зависимости или ассеты.