Как научить афишу клеить саму себя: 10 КБ кода вместо видео

Сегодня маленькое продолжение: на главной появилась анимация.

На стену по очереди клеятся афиши. Сначала мазок клея, потом постер раскатывается сверху, загибается уголок, и в конце красный штамп с датой ближайшего сеанса.

Что тут интересного:

— Это не видео. Всё рисуется на canvas прямо в браузере, скрипт весит около 10 КБ. Ролик с тем же сюжетом занял бы мегабайты.
— Постеры и даты настоящие. Их берёт сборка сайта из API, так что когда в афише появится новое событие, оно само приклеится на стену. Руками анимацию никто не обновляет.
— Контуры слегка «дрожат», как нарисованные от руки. Этот приём мы подсмотрели в открытом репозитории procedural-film (MIT): там целые короткие фильмы рисуются кодом, без единой картинки.
— Анимация вежливая. Она останавливается, когда блок ушёл за экран или вкладка свёрнута, а если в системе включено «уменьшить движение», показывает статичный коллаж.

Посмотреть вживую:

Как за вечер собрали весь сайт, сколько это стоит сейчас и почему демо — ещё не продукт: