Images in motionIndependent columns. Opposite directions.

Live ​

The Vue binding mounts the same JS renderer used in production. Reduced motion pauses it.

Install ​

npm i images-in-motion

yarn add images-in-motion

pnpm add images-in-motion

bun add images-in-motion

React and Vue are optional peers. The JS renderer and <images-in-motion> have none. Expo and NativeScript host that same renderer in a WebView.

Examples fill the available box and size the mosaic to 20rem by 20rem.

import { mountImagesInMotion } from 'images-in-motion'

document.body.style.cssText = 'margin:0;width:100%;height:100%;min-height:100dvh;display:flex;align-items:center;justify-content:center'
const stage = document.querySelector('#stage')
stage.style.width = '20rem'
stage.style.height = '20rem'

mountImagesInMotion(stage, {
  images: ['/a.jpg', '/b.jpg', '/c.jpg', '/d.jpg'],
  speedRange: [8, 18],
  angle: 12,
})

Usage · Frameworks · No frames! Pure CSS · Image-free JSON · Bundle size · Examples

Why this shape ​

1. Pattern. Inclined lanes scroll continuously. Speeds differ between lanes, stay constant within a lane, and a phase offset keeps rows from lining up.
2. Component. Geometry lives in src/core. Animation lives in src/js. React and Vue only mount that renderer. Expo and NativeScript host it in a WebView.
3. Studio. Tunes canvas, speed, inclination, fit, and overlay, then copies image-free JSON props.

Tune it in the studio, or copy a study from examples.