Vue

Vue 3 binding. Import from images-in-motion/vue. Vue is an optional peer (>=3.4).

The default slot sits above the decorative layer.

Props match mountImagesInMotion (kebab-case in templates). A deep watch calls update. Unmount calls destroy.

PropsOptions

vue

<script setup lang="ts">
import { ImagesInMotion } from 'images-in-motion/vue'

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',
]
</script>

<template>
  <div style="width:100%;height:100%;min-height:100dvh;display:flex;align-items:center;justify-content:center">
    <ImagesInMotion
      width="20rem"
      height="20rem"
      :images="images"
      :speed-range="[8, 18]"
      :angle="12"
    />
  </div>
</template>

vue

<script setup lang="ts">
import { ImagesInMotion, type TImagesInMotionProps } from 'images-in-motion/vue'

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: TImagesInMotionProps = {
  images,
  speedRange: [8, 18],
  angle: 12,
}
</script>

<template>
  <div style="width:100%;height:100%;min-height:100dvh;display:flex;align-items:center;justify-content:center">
    <ImagesInMotion v-bind="iimOptions" width="20rem" height="20rem" />
  </div>
</template>

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

Open in StackBlitz

v-bind="iimOptions" (no argument) passes every key as a prop. It is the same as binding each field. There is no iimOptions prop.

This documentation site mounts that binding against src/vue. It does not load React.

On native, Expo and NativeScript host this same CSS renderer in a WebView. There is no native view port.

Vue ​

Vue