Examples

Live Vue mounts of the same renderer. The docs stage is sized by this page, not by a library default. Expo and NativeScript host that same CSS in a WebView. Images are Unsplash URLs, never blobs. Open the studio to change canvas size and copy settings. App mounts fill the available box and size the mosaic to 20rem by 20rem. See API.

Simple vertical

Straight vertical lanes. No inclination.

Vertical columns, 0°.

mountImagesInMotion(el, {
  images,
  speedRange: [8, 18],
  angle: 0,
  motionAxis: 'vertical',
  imageOrder: 'sequential',
  tileFit: 'fixed',
})

Simple horizontal

Straight horizontal rows. No inclination.

Horizontal rows, 0°.

mountImagesInMotion(el, {
  images,
  speedRange: [8, 18],
  angle: 0,
  motionAxis: 'horizontal',
  imageOrder: 'sequential',
  tileFit: 'fixed',
})

Columns

Default study: independent vertical lanes, 12°, sequential cycle.

Vertical columns, 12°, sequential.

mountImagesInMotion(el, {
  images,
  speedRange: [8, 18],
  angle: 12,
  motionAxis: 'vertical',
  imageOrder: 'sequential',
  tileFit: 'fixed',
})

Film strip

Horizontal rows, shallow tilt, wide frame. Neighbours still run opposite ways.

Rows, 6°, wider tiles.

mountImagesInMotion(el, {
  images,
  speedRange: [14, 28],
  angle: 6,
  motionAxis: 'horizontal',
  tileWidth: 220,
  tileAspectRatio: 1.5,
})

Gold wash

Steeper sheet, random order, studio gold over the tiles.

24°, random order, gold overlay.

mountImagesInMotion(el, {
  images,
  angle: 24,
  speedRange: [6, 14],
  overlayOpacity: 0.42,
  overlayColor: '#A59050',
  imageOrder: 'random',
  gap: 8,
  gapColor: '#141313',
})

Paper gutters

Cream gap on a paper stage. The sheet is still dark; the joints are not.

Gap color matches the paper.

mountImagesInMotion(el, {
  images,
  angle: 10,
  gap: 10,
  gapColor: '#F3EFE8',
  gapOpacity: 1,
})

Dynamic height

Every tile is stretched to the tallest fitted height. Mixed Unsplash crops stay one row tall.

Dynamic fit: max height, others stretch.

mountImagesInMotion(el, {
  images,
  tileFit: 'dynamic',
  tileWidth: 132,
  angle: 14,
  speedRange: [10, 20],
})

Dense drift

Small tiles, tight gap, faster lanes. Auto fit keeps each photo's aspect.

Auto fit, negative tilt, higher speed.

mountImagesInMotion(el, {
  images,
  tileFit: 'auto',
  tileWidth: 96,
  gap: 2,
  angle: -8,
  speedRange: [18, 36],
  imageOrder: 'random',
})

Slow monument

Large cover boxes, almost still, deep ink overlay.

Large fixed tiles, slow, ink wash.

mountImagesInMotion(el, {
  images,
  tileWidth: 260,
  tileAspectRatio: 0.72,
  gap: 12,
  angle: 16,
  speedRange: [3, 7],
  overlayOpacity: 0.28,
  overlayColor: '#141313',
})

Designed by Samuel Burlon, implemented by Massimo De Luisa