Images in motion

Независимые колонки

2026 - now · Founder, product and systems architecture

Красивая живая мозаика из картинок, каждая наклонная колонка едет навстречу соседям, пока CSS их двигает. Монтируешь, копируешь настройки из studio, и картинки остаются в том браузере.

Images in motion: независимые колонки, противоположные направления

Я опубликовал images-in-motion. MIT. npm. Документация и studio на iim.smartsquad.io. v1.0.0 вышла 3 сентября 2026.

Наклонные колонки едут навстречу соседям. Скорости разные между колонками и постоянные внутри. Сдвиг фазы не даёт рядам совпасть.

Движение — один CSS @keyframes translate на полосу. Геометрия считается один раз. DOM-рендерер вставляет стили. Браузер композитит transform. React и Vue создают хост и вызывают mountImagesInMotion. Expo и NativeScript кладут тот же рендерер в WebView.

Пауза сначала замедляет, потом держит. prefers-reduced-motion и скрытая вкладка останавливают сразу. Хосту нужен размер. В доке мозаика 20rem на 20rem.

Studio копирует props без URL картинок. Выбранные фото остаются в том браузере.

Исходники: github.com/smartsquad/images-in-motion.

Галерея