Фон целиком считается в одном фрагментном шейдере WebGL: полноэкранный квад, никаких текстур и 3D-сцены. Высотное поле строится на domain warping, нормали берутся конечными разностями, металл получается отражением процедурного «студийного» окружения.
Сила варпа — насколько шум искажает сам себя. Ноль даёт мятую фольгу, 4–6 — текучие складки.
Качество — масштаб рендер-буфера. 0.6–0.7 почти незаметно на глаз и вдвое дешевле.
Шар под курсором
Невидимая сфера, которая гнёт полотно вокруг указателя. Гауссов колокол радиально смещает координаты выборки и одновременно приподнимает высотное поле — поэтому складки не просто «плывут», а обтекают объём.
Притяжение — складки стягиваются к курсору, как в воронку.
Отталкивание — расходятся, будто под плёнку подложили шар.
Радиус — размер шара в долях высоты экрана: 0.35 ≈ треть экрана.
Инерция — как быстро шар догоняет курсор. Маленькие значения дают вязкое запаздывание.
Когда курсор уходит за пределы окна, эффект плавно гаснет.
Производительность
Около 36 выборок шума на пиксель; на дискретной GPU — стабильные 60 fps в 1440p.
Для мобильных ставьте качество 0.5 и глубину рельефа пониже.