Лава-лампа из метаболлов — интерактивный фон на WebGL

Классическая лава-лампа подходит идеально: медленные текучие формы, знакомые каждому, при этом устроена она проще, чем кажется.

Ход работы

• капли — это гауссовы «холмы» в одном поле, а граница лавы — сглаженный порог по их сумме: поэтому близкие капли сливаются непрерывно и так же плавно расходятся;
• весь расчёт умещается в один фрагментный шейдер: полный экран покрывает один треугольник, вес виджета — 23 КБ, 8 КБ в gzip, без единой зависимости;
• объём капле даёт освещение, а не второй цвет. Нормаль берётся не из градиента поля — он равен нулю и в центре капли, и на её краю, поэтому силуэт не отворачивался от света и капля читалась плоским пятном. Считаем её от высоты купола над порогом: у корня производная на краю уходит в бесконечность, нормаль доворачивается до горизонтали, и появляется край шара. Дальше обычная светотень — подсвет с теневой стороны, компактный блик, френель;
• курсор добавляет в поле свою каплю и тянет к себе соседние. Притяжение ограничено радиусом и плавно сходит в ноль на его границе: без этого оно действовало из любого угла кадра, и все капли рано или поздно слипались в одну. Касание ведёт лаву так же, как мышь, — вертикальный свайп при этом остаётся у страницы;
• у поля нет собственного экрана: канвас прозрачный, лава живёт прямо на фоне темы сайта и перекрашивается, когда тему переключают;
• защита производительности: потолок devicePixelRatio и площади буфера, остановка рендера за пределами экрана, уважение системного «уменьшить движение».

Результат

Лёгкий интерактивный фон, который вставляется в любую страницу одной строкой и не требует ни сборки, ни библиотек. Лава на этой странице — она и есть: виджет, а не видео.

Направление ещё развивается: дальше — режимы под конкретные секции сайта и более выразительная форма самих капель.