Images in motion
Мозаика, которая едет
2026 - now · Founder, product and systems architecture
Ставишь на страницу мозаику картинок, и колонки едут в противоположные стороны. Наклон и скорость задаёшь в студии, копируешь эти настройки, а картинки остаются в браузере.
Я опубликовал images-in-motion 3 сентября 2026. Ставишь мозаику. Каждая колонка наклонена и едет в сторону, противоположную соседней. Скорость внутри одной колонки постоянна и отличается от соседней, так что ряды не застывают сеткой. Наклон по умолчанию — 12 градусов. Скорость по умолчанию — от 8 до 18 логических пикселей в секунду. Можно ехать рядами, а не колонками.
Движение на CSS. Геометрия считается один раз, а дальше колонки двигает браузер. Цикла анимации на JavaScript нет, и в этом смысл: картинки должны ехать, когда фреймворк простаивает. React и Vue только создают контейнер. Expo и NativeScript кладут тот же рендерер в WebView.
Файл на CDN — 17,38 КБ после минификации (17 798 байт), 6,47 КБ gzip, 5,83 КБ brotli. Не округляй их. React, Vue и картинок в нём нет.
В студии задаёшь холст, скорость, наклон и плитки. Копирование записывает настройки. Выбранные картинки в эту копию не попадают, так что конфигурация может уйти из браузера без фотографий.
Исходники: github.com/smartsquad/images-in-motion.
Галерея
