React

Import from images-in-motion/react. React is an optional peer (>=18).

Props match mountImagesInMotion. Changing them calls handle.update. Unmount calls destroy.

The component forwards host className, style, and other div attributes. Children render above the decorative sheet and stay interactive.

PropsOptions

tsx

import { ImagesInMotion } from 'images-in-motion/react'

const images = [
  'https://picsum.photos/800/1200?random=1',
  'https://picsum.photos/1200/800?random=2',
  'https://picsum.photos/800/800?random=3',
  'https://picsum.photos/1000/700?random=4',
  'https://picsum.photos/800/1000?random=5',
  'https://picsum.photos/700/1100?random=6',
  'https://picsum.photos/800/1200?random=7',
  'https://picsum.photos/1200/800?random=8',
]

export default function App() {
  return (
    <div style={{ width: '100%', height: '100%', minHeight: '100dvh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <ImagesInMotion
        width="20rem"
        height="20rem"
        images={images}
        speedRange={[8, 18]}
        angle={12}
        overlayOpacity={0.35}
      />
    </div>
  )
}

tsx

import { ImagesInMotion, type IImagesInMotionMountOptions } from 'images-in-motion/react'

const images = [
  'https://picsum.photos/800/1200?random=1',
  'https://picsum.photos/1200/800?random=2',
  'https://picsum.photos/800/800?random=3',
  'https://picsum.photos/1000/700?random=4',
  'https://picsum.photos/800/1000?random=5',
  'https://picsum.photos/700/1100?random=6',
  'https://picsum.photos/800/1200?random=7',
  'https://picsum.photos/1200/800?random=8',
]

const iimOptions: IImagesInMotionMountOptions = {
  images,
  speedRange: [8, 18],
  angle: 12,
  overlayOpacity: 0.35,
}

export default function App() {
  return (
    <div style={{ width: '100%', height: '100%', minHeight: '100dvh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <ImagesInMotion width="20rem" height="20rem" {...iimOptions} />
    </div>
  )
}

Snippets use random Picsum URLs. The mosaic on this page uses a shuffled Unsplash set.

Open in StackBlitz

{...iimOptions} is JSX spread. It passes the same keys as individual props. There is no iimOptions prop.

Do not wrap this binding inside Vue. Vue apps should use images-in-motion/vue.

On native, Expo hosts this same CSS renderer in a WebView. NativeScript does the same with the custom element. There is no React Native view port.

React ​

React