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.
Галерея
