<div id="root">
  <img id="image" src="https://artboard-deluxe.dulnan.net/og.jpg" width="1200" height="630">
</div>

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#root {
  height: 100vh;
  position: relative;
  background: #dfdfdf;
  overflow: hidden;
}

#image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px 0 #b6b6b6;
  image-rendering: pixelated;
}

import {
  createArtboard,
  dom,
  mouse,
  wheel,
  touch,
  raf,
  doubleTapZoom
} from "https://esm.sh/artboard-deluxe";

const rootElement = document.getElementById("root");
const artboardElement = document.getElementById("image");
const artboard = createArtboard(rootElement, [
  dom({
    element: artboardElement,
    setInitTransformFromRect: true
  }),
  wheel({
    useMomentumScroll: true,
    useMomentumZoom: true
  }),
  mouse(),
  touch(),
  doubleTapZoom(),
  raf()
]);