NativeScript

There is no NativeScript view. The renderer needs a DOM. Put the mosaic in a WebView. Examples fill the WebView. The element is 20rem by 20rem.

The same translate3d @keyframes run inside that WebView. See No frames! Pure CSS.

HtmlView is markup only. It does not run scripts. Use WebView.

Save HTML under app/assets/html/ (the ~/assets/ path). Same attributes as the custom element. The tag cannot take a JavaScript object. For an iimOptions constant, mount from a module script.

AttributesOptions

html

<!doctype html>
<html>
  <body style="margin:0;width:100%;height:100%;min-height:100dvh;display:flex;align-items:center;justify-content:center">
    <images-in-motion
      id="mosaic"
      style="width:20rem;height:20rem"
      angle="12"
      speed-range="[8,18]"
    ></images-in-motion>
    <script type="module">
      import 'https://unpkg.com/images-in-motion'

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

      document.querySelector('#mosaic').setAttribute('images', JSON.stringify(images))
    </script>
  </body>
</html>

html

<!doctype html>
<html>
  <body style="margin:0;width:100%;height:100%;min-height:100dvh;display:flex;align-items:center;justify-content:center">
    <div id="stage" style="width:20rem;height:20rem"></div>
    <script type="module">
      import { mountImagesInMotion } from 'https://unpkg.com/images-in-motion'

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

      mountImagesInMotion(document.querySelector('#stage'), iimOptions)
    </script>
  </body>
</html>

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

Open in StackBlitz

jsDelivr: https://cdn.jsdelivr.net/npm/images-in-motion. For a file URL with no network, copy dist/iife/images-in-motion.global.js next to the HTML and use a relative script. The IIFE defines the custom element. It does not give you an ESM mountImagesInMotion import. Use attributes in that offline case.

xml

<WebView src="~/assets/html/images-in-motion.html" />

Core, Vue, React, and Svelte NativeScript flavors all take that src. Size the WebView so the rem mosaic is visible.

NativeScript ​

NativeScript