diff --git a/demo/src/3d/3d.js b/demo/src/3d/3d.js
new file mode 100644
index 00000000..e560ebed
--- /dev/null
+++ b/demo/src/3d/3d.js
@@ -0,0 +1,26 @@
+const copy = require('copy-to-clipboard');
+const createViewer = require('../../..');
+const { svgElementToSvgImageContent } = require('../../../util');
+
+document.addEventListener('keypress', function (event) {
+  if (event.keyCode === 99) {
+    // the c key
+    const svg = document.querySelector('svg');
+    const content = svgElementToSvgImageContent(svg);
+    copy(content);
+  }
+});
+
+createViewer({
+  width: 0.4,
+  height: 0.4,
+  followMouse: true,
+  followMotion: true,
+});
+
+createViewer({
+  width: 0.4,
+  height: 0.4,
+  followMouse: true,
+  followMotion: true,
+});
diff --git a/demo/src/3d/index.html b/demo/src/3d/index.html
new file mode 100644
index 00000000..661c1480
--- /dev/null
+++ b/demo/src/3d/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="../style.css">
+    <title>---</title>
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
+    <meta charset=utf-8>
+<style>
+
+svg {
+  position: absolute;
+  mix-blend-mode: screen;
+  cursor: none;
+}
+
+svg:first-of-type {
+  transform: translateX(20px);
+  filter: saturate(1.5) hue-rotate(196deg);
+}
+
+svg:last-of-type {
+  filter: saturate(1.5) opacity(0.82) brightness(1.1) hue-rotate(-25deg);
+}
+
+</style>
+  </head>
+  <body>
+    <div></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/demo/src/index.html b/demo/src/index.html
index 6166a61a..e68d649c 100644
--- a/demo/src/index.html
+++ b/demo/src/index.html
@@ -16,6 +16,7 @@
       <li><a href="./fade/index.html">fade</a></li>
       <li><a href="./beta/index.html">beta</a></li>
       <li><a href="./flask/index.html">flask</a></li>
+      <li><a href="./3d/index.html">3d glasses</a></li>
     </ol>
   </body>
 </html>
