Первый экран с энергией — анимация hero на WebGL

Условия — как у любого первого экрана: текст остаётся настоящим текстом (его читают поисковики и скринридеры), кнопка — настоящей кнопкой, анимация играет один раз и не мешает читать, а без WebGL или с «уменьшить движение» блок сразу показывает финальный кадр. И две сцены: для компьютера по макету 1200×493 и для телефона по макету 320×620, где знак стоит под кнопкой, а поток слов идёт снизу вверх.

Знак клиента в этой версии заменён нашим — буквой «g»: движок печёт карты заливки по любому SVG, поэтому знак подставляется файлом.

Ход работы

• сцена — десять фаз на таймлайне: старт, зарождение, заряд, импульс, волна со словами, пауза, сборка, поток, удар в кнопку и растворение. Фазы идут цепочкой, у каждой — длительность и сдвиг относительно конца предыдущей, отрицательный сдвиг даёт перекрытие. Каждый кадр — функция времени, поэтому сцену можно остановить на любом моменте и протянуть вперёд и назад;
• энергия зарождается в горячем ядре внутри знака и заливает его по форме: фронт идёт по геодезическому расстоянию внутри контура, а не круговой шторкой. Карты печёт воркер по маске знака. Сначала заливка отрабатывалась отдельным движком на времянке — треугольнике с вырезанным треугольником: на кольце сразу видно, честно ли фронт идёт по форме, — а в сцену вошла в квадрате вокруг знака, с поворотом, зарядкой и цветом «спящего» знака;
• импульс — одно кольцо от знака на весь блок, с торможением и искрами на фронте. Слова загораются ровно тогда, когда до них доходит фронт: буквы вспыхивают, по ним пробегают искры, маркеры слева от слов зажигаются жёлтой точкой;
• слова срываются с места и кометами летят к кнопке по изогнутой дорожке — за знаком, а не поперёк него. По дороге растворяются в облако частиц, которое отстаёт и расползается, маркеры рассыпаются искрами;
• кнопка — HTML-элемент. Волна заливает её жёлтым кругом с центром в знаке — тем же радиусом, что и фронт на канвасе, поэтому граница заливки на кнопке совпадает со светом вокруг. До заливки внутри бегут переливы энергии, после удара остаются ореол и редкое «подмигивание»;
• в финале живой знак растворяется в статичной копии из макета с мягкой жёлтой тенью — кадр после анимации совпадает с макетом;
• сборка для сайта — один скрипт без зависимостей и стили: сцена стартует, когда блок виден хотя бы на треть и вкладка активна; при переходе через ширину 960 px подменяется сцена, а повторно анимация не показывается.

Результат

Шапка этой страницы — та же сцена на весь экран, какой она встаёт первым экраном сайта: слева настоящий заголовок, описание и кнопка «Обсудить проект», которая ведёт к контактам внизу страницы, справа знак и слова. Анимация живёт поверх обычной вёрстки и не трогает её: тексты и кнопка остаются HTML, свет, волну и частицы рисует прозрачный канвас. Раскладка макета ставится в центр экрана любых пропорций, на телефоне — своя сцена по второму макету.

Ниже — лаборатория, из которой собиралась сцена, на карточке из исходного макета: все десять фаз со сдвигом и длительностью, скорость, повтор, стоп-кадр и «Момент сцены», которым сцену можно остановить на любой доле секунды, — и больше сотни параметров заливки, волны, слов, потока и кнопки.