Add posters. Update docs.

README.md

@@ -2,7 +2,7 @@
 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/alemart/encantar-js)](https://github.com/alemart/encantar-js/releases/) ![GitHub file size in bytes on a specified ref (branch/commit/tag)](https://img.shields.io/github/size/alemart/encantar-js/dist/encantar.min.js?branch=master&label=minified%20js) [![GitHub Repo stars](https://img.shields.io/github/stars/alemart/encantar-js?logo=github)](https://github.com/alemart/encantar-js/stargazers) [![GitHub Sponsors](https://img.shields.io/github/sponsors/alemart?logo=github)](https://github.com/sponsors/alemart/)
 
-Enchant your users with **encantar.js**, a GPU-accelerated Augmented Reality engine for the web.
+**encantar.js** is the Augmented Reality engine that will enchant you! GPU-accelerated, open-source and web-based!
 
 :magic_wand: **[Demos](https://alemart.github.io/encantar-js/demos/)** | :books: **[Learn](https://alemart.github.io/encantar-js/)** | :heart: **[Sponsor](https://github.com/sponsors/alemart)**
 
@@ -10,18 +10,17 @@ Enchant your users with **encantar.js**, a GPU-accelerated Augmented Reality eng
 
 ## Features
 
-* **AR everywhere**: encantar.js runs on Android, on iOS, and even on Desktop computers! Only a modern web browser is required.
-* **Plugins**: use encantar.js with the 3D framework of your choice, including A-Frame, Babylon.js, Three.js and more!
 * **Image tracking**: track detailed images such as book covers, cartoons and photos. No need of manual training!
 * **Pointer tracking**: create interactive experiences based on touch, mouse and pen input with an easy-to-use API.
+* **Plugins**: use encantar.js with the 3D framework of your choice, including A-Frame, Babylon.js, Three.js and more!
 
 ## Why use encantar.js?
 
-* **Device-agnostic**: no need of AR-capable devices. encantar.js runs in all modern web browsers. It's AR built from scratch with computer vision.
-* **Fast and powerful**: encantar.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
-* **No need to download apps**: encantar.js is a WebAR engine. Users can access the AR experiences immediately.
-* **Easy to get started**: encantar.js can be used with a `<script>` tag in your page. A static HTML page is enough to get started.
-* **Open-source**: what are you waiting for? [Try it now!](https://alemart.github.io/encantar-js/demos/)
+* **AR everywhere**: it runs on Android, on iOS, and even on Desktop computers! Only a modern web browser is required.
+* **Easy to use**: just load a static HTML page! No need of heavy app downloads, API keys, subscriptions or server-side stuff.
+* **Device-agnostic**: no need of AR-capable devices! encantar.js is AR built from scratch with computer vision!
+* **Fast & powerful**: encantar.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
+* **Open source**: personal, professional and educational use is allowed.
 
 ## Browser compatibility
 

demos/assets/poster.css

@@ -0,0 +1,96 @@
+body {
+    background-color: #33334c;
+    background-image: url(mage.webp);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100vw;
+    height: 100vh;
+    padding: 0;
+    margin: 0;
+}
+
+#qr-code-area {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    color: black;
+    background-color: white;
+    border-radius: 16px;
+    padding: 0.5em;
+    text-align: center;
+    font-weight: bold;
+    font-family: sans-serif;
+    font-size: 1.25em;
+}
+
+#qr-code-area h4 {
+    margin: 0;
+}
+
+#qr-code {
+    image-rendering: pixelated;
+    min-width: 120px;
+    height: auto;
+}
+
+#back {
+    position: fixed;
+    top: 0px;
+    right: 0px;
+    padding: 8px;
+    color: #9999a6;
+    background-color: #33334c;
+    font-family: sans-serif;
+    font-size: 1em;
+    text-decoration: underline;
+    transition: color 0.125s;
+}
+
+#back:visited {
+    color: #9999a6;
+}
+
+#back:active, #back:hover {
+    color: white;
+}
+
+#prev, #next {
+    position: fixed;
+    top: calc(50% - 55px);
+    font-size: 96px;
+    color: white;
+    text-decoration: none;
+    opacity: 0.5;
+    transition: opacity 0.5s;
+    transition: transform 0.125s;
+}
+
+#prev {
+    left: 8%;
+}
+
+#next {
+    right: 8%;
+}
+
+#prev:hover {
+    opacity: 1.0;
+    transform: translateX(-4px);
+}
+
+#next:hover {
+    opacity: 1.0;
+    transform: translateX(4px);
+}
+
+#prev::before {
+    content: "\276E";
+}
+
+#next::before {
+    content: "\276F";
+}

demos/assets/poster.js

@@ -0,0 +1,35 @@
+(function() {
+
+const IMAGE_PREFIX = '../assets/';
+const DEFAULT_IMAGE = 'mage.webp';
+
+const paths = [];
+let index = 0;
+
+function changeImage(direction)
+{
+    index = (index + direction + paths.length) % paths.length;
+    document.body.style.backgroundImage = 'url(' + IMAGE_PREFIX + paths[index] + ')';
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+
+    const prev = document.getElementById('prev');
+    const next = document.getElementById('next');
+
+    const arImages = (document.body.dataset.arImages || DEFAULT_IMAGE).split(';');
+    paths.push.apply(paths, arImages);
+    changeImage(0);
+
+    if(!prev || !next)
+        return;
+
+    prev.addEventListener('click', function() { changeImage(-1); });
+    next.addEventListener('click', function() { changeImage(+1); });
+
+    if(paths.length < 2)
+        prev.hidden = next.hidden = true;
+
+});
+
+})();

demos/hello-aframe/README.html

@@ -1,72 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>encantar.js WebAR demo with A-Frame</title>
-        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
-        <style>
-        body {
-            font-family: sans-serif;
-            background-color: whitesmoke;
-        }
-
-        a:any-link {
-            color: #7e56c2;
-            text-decoration: none;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        li + li {
-            margin-top: 1em;
-        }
-
-        ul {
-            list-style-type: none;
-            padding-left: 1em;
-        }
-
-        img.qr-code {
-            display: block;
-            width: 256px;
-            image-rendering: pixelated;
-            border: 1px dashed black;
-        }
-
-        a img {
-            height: 80px;
-            border-radius: 4px;
-        }
-        </style>
-    </head>
-    <body>
-        <h1>encantar.js with A-Frame</h1>
-        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/mage.webp" target="_blank">this cartoon</a> or <a href="../assets/cat.webp" target="_blank">this picture</a>.</p>
-
-        <h2>Menu</h2>
-        <ul>
-            <li><a href="index.html">Launch the WebAR experience</a></li>
-            <li><a href="video.html">Test with a pre-recorded video</a></li>
-            <li><a href="https://github.com/alemart/encantar-js/blob/master/demos/hello-aframe/index.html" rel="external" target="_blank">Study the source code</a></li>
-            <li><a href="NOTICE.html">See the attribution notices</a></li>
-            <li><a href="../">Try other WebAR demos</a></li>
-        </ul>
-
-        <h2>QR code</h2>
-        <img src="qr-code.gif" alt="QR code" class="qr-code">
-
-        <h2>Share</h2>
-        <p>This experience is powered by <a href="https://alemart.github.io/encantar-js" target="_blank">encantar.js: GPU-accelerated Augmented Reality for the web</a>.</p>
-        <div>
-            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/encantar-js&quote=%23encantarjs" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
-            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantarjs" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
-            <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/linkedin.png" alt="Share on LinkedIn"></a>
-            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
-            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
-            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
-        </div>
-    </body>
-</html>
-

demos/hello-aframe/poster.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="description" content="Demo of encantar.js, a GPU-accelerated Augmented Reality engine for the web">
+        <meta name="author" content="Alexandre Martins (alemart)">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>encantar.js WebAR demo with A-Frame</title>
+        <link href="../assets/poster.css" rel="stylesheet">
+        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+        <script src="../assets/poster.js"></script>
+    </head>
+    <body data-ar-images="mage.webp;cat.webp">
+        <nav>
+            <a id="prev" href="#"></a>
+            <a id="next" href="#"></a>
+            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+        </nav>
+        <section id="qr-code-area">
+            <h4>QR code</h4>
+            <a href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan to begin!</small>
+        </section>
+    </body>
+</html>

demos/hello-babylon/README.html

@@ -1,72 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>encantar.js WebAR demo with babylon.js</title>
-        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
-        <style>
-        body {
-            font-family: sans-serif;
-            background-color: whitesmoke;
-        }
-
-        a:any-link {
-            color: #7e56c2;
-            text-decoration: none;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        li + li {
-            margin-top: 1em;
-        }
-
-        ul {
-            list-style-type: none;
-            padding-left: 1em;
-        }
-
-        img.qr-code {
-            display: block;
-            width: 256px;
-            image-rendering: pixelated;
-            border: 1px dashed black;
-        }
-
-        a img {
-            height: 80px;
-            border-radius: 4px;
-        }
-        </style>
-    </head>
-    <body>
-        <h1>encantar.js with babylon.js</h1>
-        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/mage.webp" target="_blank">this cartoon</a> or <a href="../assets/cat.webp" target="_blank">this picture</a>.</p>
-
-        <h2>Menu</h2>
-        <ul>
-            <li><a href="index.html">Launch the WebAR experience</a></li>
-            <li><a href="video.html">Test with a pre-recorded video</a></li>
-            <li><a href="https://github.com/alemart/encantar-js/blob/master/demos/hello-babylon/demo.js" rel="external" target="_blank">Study the source code</a></li>
-            <li><a href="NOTICE.html">See the attribution notices</a></li>
-            <li><a href="../">Try other WebAR demos</a></li>
-        </ul>
-
-        <h2>QR code</h2>
-        <img src="qr-code.gif" alt="QR code" class="qr-code">
-
-        <h2>Share</h2>
-        <p>This experience is powered by <a href="https://alemart.github.io/encantar-js" target="_blank">encantar.js: GPU-accelerated Augmented Reality for the web</a>.</p>
-        <div>
-            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/encantar-js&quote=%23encantarjs" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
-            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantarjs" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
-            <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/linkedin.png" alt="Share on LinkedIn"></a>
-            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
-            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
-            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
-        </div>
-    </body>
-</html>
-

demos/hello-babylon/poster.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="description" content="Demo of encantar.js, a GPU-accelerated Augmented Reality engine for the web">
+        <meta name="author" content="Alexandre Martins (alemart)">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>encantar.js WebAR demo with babylon.js</title>
+        <link href="../assets/poster.css" rel="stylesheet">
+        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+        <script src="../assets/poster.js"></script>
+    </head>
+    <body data-ar-images="mage.webp;cat.webp">
+        <nav>
+            <a id="prev" href="#"></a>
+            <a id="next" href="#"></a>
+            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+        </nav>
+        <section id="qr-code-area">
+            <h4>QR code</h4>
+            <a href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan to begin!</small>
+        </section>
+    </body>
+</html>

demos/hello-three/README.html

@@ -1,72 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>encantar.js WebAR demo with three.js</title>
-        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
-        <style>
-        body {
-            font-family: sans-serif;
-            background-color: whitesmoke;
-        }
-
-        a:any-link {
-            color: #7e56c2;
-            text-decoration: none;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        li + li {
-            margin-top: 1em;
-        }
-
-        ul {
-            list-style-type: none;
-            padding-left: 1em;
-        }
-
-        img.qr-code {
-            display: block;
-            width: 256px;
-            image-rendering: pixelated;
-            border: 1px dashed black;
-        }
-
-        a img {
-            height: 80px;
-            border-radius: 4px;
-        }
-        </style>
-    </head>
-    <body>
-        <h1>encantar.js with three.js</h1>
-        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/mage.webp" target="_blank">this cartoon</a> or <a href="../assets/cat.webp" target="_blank">this picture</a>.</p>
-
-        <h2>Menu</h2>
-        <ul>
-            <li><a href="index.html">Launch the WebAR experience</a></li>
-            <li><a href="video.html">Test with a pre-recorded video</a></li>
-            <li><a href="https://github.com/alemart/encantar-js/blob/master/demos/hello-three/demo.js" rel="external" target="_blank">Study the source code</a></li>
-            <li><a href="NOTICE.html">See the attribution notices</a></li>
-            <li><a href="../">Try other WebAR demos</a></li>
-        </ul>
-
-        <h2>QR code</h2>
-        <img src="qr-code.gif" alt="QR code" class="qr-code">
-
-        <h2>Share</h2>
-        <p>This experience is powered by <a href="https://alemart.github.io/encantar-js" target="_blank">encantar.js: GPU-accelerated Augmented Reality for the web</a>.</p>
-        <div>
-            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/encantar-js&quote=%23encantarjs" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
-            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantarjs" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
-            <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/linkedin.png" alt="Share on LinkedIn"></a>
-            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
-            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
-            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
-        </div>
-    </body>
-</html>
-

demos/hello-three/poster.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="description" content="Demo of encantar.js, a GPU-accelerated Augmented Reality engine for the web">
+        <meta name="author" content="Alexandre Martins (alemart)">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>encantar.js WebAR demo with three.js</title>
+        <link href="../assets/poster.css" rel="stylesheet">
+        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+        <script src="../assets/poster.js"></script>
+    </head>
+    <body data-ar-images="mage.webp;cat.webp">
+        <nav>
+            <a id="prev" href="#"></a>
+            <a id="next" href="#"></a>
+            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+        </nav>
+        <section id="qr-code-area">
+            <h4>QR code</h4>
+            <a href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan to begin!</small>
+        </section>
+    </body>
+</html>

demos/hello-webgl/README.html

@@ -1,72 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>encantar.js WebAR demo with WebGL</title>
-        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
-        <style>
-        body {
-            font-family: sans-serif;
-            background-color: whitesmoke;
-        }
-
-        a:any-link {
-            color: #7e56c2;
-            text-decoration: none;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        li + li {
-            margin-top: 1em;
-        }
-
-        ul {
-            list-style-type: none;
-            padding-left: 1em;
-        }
-
-        img.qr-code {
-            display: block;
-            width: 256px;
-            image-rendering: pixelated;
-            border: 1px dashed black;
-        }
-
-        a img {
-            height: 80px;
-            border-radius: 4px;
-        }
-        </style>
-    </head>
-    <body>
-        <h1>encantar.js with WebGL</h1>
-        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/my-reference-image.webp" target="_blank">this cartoon</a>.</p>
-
-        <h2>Menu</h2>
-        <ul>
-            <li><a href="index.html">Launch the WebAR experience</a></li>
-            <li><a href="video.html">Test with a pre-recorded video</a></li>
-            <li><a href="https://github.com/alemart/encantar-js/blob/master/demos/hello-webgl/demo.js" rel="external" target="_blank">Study the source code</a></li>
-            <li><a href="NOTICE.html">See the attribution notices</a></li>
-            <li><a href="../">Try other WebAR demos</a></li>
-        </ul>
-
-        <h2>QR code</h2>
-        <img src="qr-code.gif" alt="QR code" class="qr-code">
-
-        <h2>Share</h2>
-        <p>This experience is powered by <a href="https://alemart.github.io/encantar-js" target="_blank">encantar.js: GPU-accelerated Augmented Reality for the web</a>.</p>
-        <div>
-            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/encantar-js&quote=%23encantarjs" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
-            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantarjs" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
-            <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/linkedin.png" alt="Share on LinkedIn"></a>
-            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
-            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
-            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
-        </div>
-    </body>
-</html>
-

demos/hello-webgl/poster.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="description" content="Demo of encantar.js, a GPU-accelerated Augmented Reality engine for the web">
+        <meta name="author" content="Alexandre Martins (alemart)">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>encantar.js WebAR demo with WebGL</title>
+        <link href="../assets/poster.css" rel="stylesheet">
+        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+        <script src="../assets/poster.js"></script>
+    </head>
+    <body data-ar-images="my-reference-image.webp">
+        <nav>
+            <a id="prev" href="#"></a>
+            <a id="next" href="#"></a>
+            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+        </nav>
+        <section id="qr-code-area">
+            <h4>QR code</h4>
+            <a href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan to begin!</small>
+        </section>
+    </body>
+</html>

demos/hello-world/README.html

@@ -1,72 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>encantar.js WebAR template</title>
-        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
-        <style>
-        body {
-            font-family: sans-serif;
-            background-color: whitesmoke;
-        }
-
-        a:any-link {
-            color: #7e56c2;
-            text-decoration: none;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        li + li {
-            margin-top: 1em;
-        }
-
-        ul {
-            list-style-type: none;
-            padding-left: 1em;
-        }
-
-        img.qr-code {
-            display: block;
-            width: 256px;
-            image-rendering: pixelated;
-            border: 1px dashed black;
-        }
-
-        a img {
-            height: 80px;
-            border-radius: 4px;
-        }
-        </style>
-    </head>
-    <body>
-        <h1>encantar.js WebAR template</h1>
-        <p>Scan the QR code to launch the web-based Augmented Reality experience. Next, scan <a href="../assets/mage.webp" target="_blank">this cartoon</a> or <a href="../assets/cat.webp" target="_blank">this picture</a>.</p>
-
-        <h2>Menu</h2>
-        <ul>
-            <li><a href="index.html">Launch the WebAR experience</a></li>
-            <li><a href="video.html">Test with a pre-recorded video</a></li>
-            <li><a href="https://github.com/alemart/encantar-js/blob/master/demos/hello-world/demo.js" rel="external" target="_blank">Study the source code</a></li>
-            <li><a href="NOTICE.html">See the attribution notices</a></li>
-            <li><a href="../">Try other WebAR demos</a></li>
-        </ul>
-
-        <h2>QR code</h2>
-        <img src="qr-code.gif" alt="QR code" class="qr-code">
-
-        <h2>Share</h2>
-        <p>This experience is powered by <a href="https://alemart.github.io/encantar-js" target="_blank">encantar.js: GPU-accelerated Augmented Reality for the web</a>.</p>
-        <div>
-            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/encantar-js&quote=%23encantarjs" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
-            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantarjs" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
-            <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/linkedin.png" alt="Share on LinkedIn"></a>
-            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
-            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
-            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
-        </div>
-    </body>
-</html>
-

demos/hello-world/poster.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="description" content="Demo of encantar.js, a GPU-accelerated Augmented Reality engine for the web">
+        <meta name="author" content="Alexandre Martins (alemart)">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>encantar.js WebAR demo</title>
+        <link href="../assets/poster.css" rel="stylesheet">
+        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+        <script src="../assets/poster.js"></script>
+    </head>
+    <body data-ar-images="mage.webp;cat.webp">
+        <nav>
+            <a id="prev" href="#"></a>
+            <a id="next" href="#"></a>
+            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+        </nav>
+        <section id="qr-code-area">
+            <h4>QR code</h4>
+            <a href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan to begin!</small>
+        </section>
+    </body>
+</html>

demos/pointer-demo/README.html

@@ -1,71 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>encantar.js pointer demo</title>
-        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
-        <style>
-        body {
-            font-family: sans-serif;
-            background-color: whitesmoke;
-        }
-
-        a:any-link {
-            color: #7e56c2;
-            text-decoration: none;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        li + li {
-            margin-top: 1em;
-        }
-
-        ul {
-            list-style-type: none;
-            padding-left: 1em;
-        }
-
-        img.qr-code {
-            display: block;
-            width: 256px;
-            image-rendering: pixelated;
-            border: 1px dashed black;
-        }
-
-        a img {
-            height: 80px;
-            border-radius: 4px;
-        }
-        </style>
-    </head>
-    <body>
-        <h1>encantar.js pointer demo</h1>
-        <p>Scan the QR code to launch the demo.</p>
-
-        <h2>Menu</h2>
-        <ul>
-            <li><a href="index.html">Launch the pointer demo</a></li>
-            <li><a href="https://github.com/alemart/encantar-js/blob/master/demos/pointer-demo/demo.js" rel="external" target="_blank">Study the source code</a></li>
-            <li><a href="NOTICE.html">See the attribution notices</a></li>
-            <li><a href="../">Try other WebAR demos</a></li>
-        </ul>
-
-        <h2>QR code</h2>
-        <img src="qr-code.gif" alt="QR code" class="qr-code">
-
-        <h2>Share</h2>
-        <p>This experience is powered by <a href="https://alemart.github.io/encantar-js" target="_blank">encantar.js: GPU-accelerated Augmented Reality for the web</a>.</p>
-        <div>
-            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Falemart.github.io/encantar-js&quote=%23encantarjs" target="_blank" rel="external" class="button"><img src="../assets/facebook.png" alt="Share on Facebook"></a>
-            <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Falemart.github.io/encantar-js&hashtags=encantarjs" target="_blank" rel="external" class="button"><img src="../assets/twitter.png" alt="Share on X"></a>
-            <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/linkedin.png" alt="Share on LinkedIn"></a>
-            <a href="https://wa.me/?text=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/whatsapp.png" alt="Share via WhatsApp"></a>
-            <a href="https://t.me/share/url?url=https%3A%2F%2Falemart.github.io/encantar-js" target="_blank" rel="external" class="button"><img src="../assets/telegram.png" alt="Share via Telegram"></a>
-            <a href="https://github.com/sponsors/alemart" target="_blank" rel="external"><img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=%237e56c2&color=%23ffd500"></a>
-        </div>
-    </body>
-</html>
-

demos/pointer-demo/poster.html

@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="description" content="Demo of encantar.js, a GPU-accelerated Augmented Reality engine for the web">
+        <meta name="author" content="Alexandre Martins (alemart)">
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>encantar.js WebAR pointer demo</title>
+        <link href="../assets/poster.css" rel="stylesheet">
+        <script data-goatcounter="https://encantar-js.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+        <script src="../assets/poster.js"></script>
+    </head>
+    <body data-ar-images="mage.webp">
+        <nav>
+            <a id="prev" href="#"></a>
+            <a id="next" href="#"></a>
+            <a id="back" href="https://alemart.github.io/encantar-js" target="_blank" rel="external">Back to encantar.js</a>
+        </nav>
+        <section id="qr-code-area">
+            <h4>QR code</h4>
+            <a href="index.html" target="_blank"><img id="qr-code" src="qr-code.gif" alt="QR code"></a>
+            <small>Scan to begin!</small>
+        </section>
+    </body>
+</html>

docs/demo.md

@@ -1,5 +0,0 @@
----
-template: demo.html
-title: ""
----
-

docs/demos.md

@@ -1,73 +1,4 @@
 ---
-title: WebAR Demo gallery
-#hide:
-#  - navigation
+template: demos.html
+title: ""
 ---
-
-# Demo gallery
-
-!!! info "Guidelines"
-
-    For a good experience:
-
-    * Don't move the camera nor the target image too quickly. This produces motion blur.
-    * The target image should appear clearly in the video.
-    * The physical environment should be properly illuminated.
-    * If you're scanning the image on a screen, make sure to adjust the brightness. If the screen is too bright (too dark), it will cause overexposure (underexposure) in the video and tracking difficulties - details of the images will be lost. Screen reflections are also undesirable.
-    * If you print the image, avoid shiny materials (e.g., glossy paper). They may generate artifacts in the image and interfere with the tracking. Prefer non-reflective materials.
-    * Avoid low-quality cameras. Cameras of common smartphones are okay.
-
-## Basic demos
-
-### WebAR with A-Frame
-
-Create an augmented scene with [A-Frame](https://aframe.io){ ._blank }. For beginners - no knowledge of JavaScript is required!
-
-[Launch demo](/encantar-js/demos/hello-aframe/README.html){ ._blank .md-button }
-
-### WebAR with babylon.js
-
-Create an augmented scene with [babylon.js](https://www.babylonjs.com){ ._blank }.
-
-[Launch demo](/encantar-js/demos/hello-babylon/README.html){ ._blank .md-button }
-
-### WebAR with three.js
-
-Create an augmented scene with [three.js](https://threejs.org){ ._blank }.
-
-[Launch demo](/encantar-js/demos/hello-three/README.html){ ._blank .md-button }
-
-### WebAR template
-
-A template to help you create an augmented scene with any 3D framework.
-
-[Launch demo](/encantar-js/demos/hello-world/README.html){ ._blank .md-button }
-
-### WebAR with pure WebGL
-
-Create an augmented scene without a 3D framework.
-
-[Launch demo](/encantar-js/demos/hello-webgl/README.html){ ._blank .md-button }
-
-## Miscellaneous
-
-### Pointer-based input
-
-Learn how to work with pointer-based input such as touch and mouse.
-
-[Launch demo](/encantar-js/demos/pointer-demo/README.html){ ._blank .md-button }
-
-## Try locally
-
-* Run on a console:
-
-```sh
-repo=https://github.com/alemart/encantar-js.git
-tag=$(git ls-remote --refs --tags $repo | cut -d/ -f3 | sort -V | tail -n1)
-git clone $repo --branch $tag --depth 1
-cd encantar-js
-npm start
-```
-
-* Open [https://localhost:8000/demos/](https://localhost:8000/demos/)
-* Pick a demo and have fun!

docs/faq.md

@@ -8,6 +8,17 @@ encantar.js is a standalone GPU-accelerated Augmented Reality engine for the web
 
 Refer to the [concepts](./getting-started/concepts.md).
 
+## What are your recommendations for WebAR?
+
+For a good experience with WebAR:
+
+* Don't move the camera nor the target image too quickly. This produces motion blur.
+* The target image should appear clearly in the video.
+* The physical environment should be properly illuminated.
+* If you're scanning the image on a screen, make sure to adjust the brightness. If the screen is too bright (too dark), it will cause overexposure (underexposure) in the video and tracking difficulties - details of the images will be lost. Screen reflections are also undesirable.
+* If you print the image, avoid shiny materials (e.g., glossy paper). They may generate artifacts in the image and interfere with the tracking. Prefer non-reflective materials.
+* Avoid low-quality cameras. Cameras of common smartphones are okay.
+
 ## Is this WebXR?
 
 No, encantar.js is not WebXR. The WebXR API allows you to access functionalities of VR and AR-capable devices in web browsers. It relies on other technologies, such as Google's ARCore or Apple's ARKit, to run the show. Those technologies are great, though they are supported on specific devices, which may or may not match your users' devices. On the other hand, encantar.js is fully standalone and is built from scratch using standard web technologies such as WebGL2 and WebAssembly, which are widely available. My intention is to give it broad compatibility.

docs/getting-started/augment-the-scene.md

@@ -12,7 +12,7 @@ Once you pick a 3D rendering technology, you need to integrate it with encantar.
 
 Writing a plugin is a task of moderate complexity. It requires dealing with maths and with some idiosyncrasies of the 3D rendering technologies in order to make sure that it all works as intended. I provide easy-to-use plugins that work with different 3D rendering technologies, so that you don't need to deal with that complexity yourself. Plugins are shipped as JavaScript (.js) files. You just need to add a plugin to your web page, and then the integration will be done for you!
 
-[Get the plugins](https://github.com/alemart/encantar-js/tree/master/plugins){ .md-button .md-button--primary ._blank }
+[Get the plugins in the demos](/encantar-js/demos){ .md-button .md-button--primary ._blank }
 
 ## Create the virtual scene
 
@@ -26,20 +26,14 @@ Let me tell you more about the 3D rendering technologies I just mentioned.
 
 A-Frame is built on top of [Three.js](#threejs) and extends it in powerful ways. It introduces a HTML-based declarative approach for [scene graphs](https://en.wikipedia.org/wiki/Scene_graph){ ._blank }, empowering them with the [Entity-Component-System](https://en.wikipedia.org/wiki/Entity_component_system){ ._blank }, a software pattern commonly used in game development. A-Frame is easy for beginners and pleasing for experts. In many cases, writing JavaScript code is not needed.
 
-[Launch an A-Frame demo](/encantar-js/demos/hello-aframe/README.html){ ._blank .md-button }
-
 ### Babylon.js
 
 [Babylon.js](https://www.babylonjs.com){ ._blank } is a powerful open-source game and 3D rendering engine for the web. It includes pretty much all features you commonly find in 3D rendering engines (scene graphs, lights, materials, meshes, animations, etc.), plus systems that are specific to game engines (audio engine, collision system, physics system, support for sprites, etc.), plus all kinds of sophisticated features for various applications.
 
 Babylon.js has an amazing documentation with plenty of learning resources, as well as a helpful and friendly community! Even though it can be used by beginners, it's recommended to have experience with JavaScript before creating projects with it.
 
-[Launch a Babylon.js demo](/encantar-js/demos/hello-babylon/README.html){ ._blank .md-button }
-
 ### Three.js
 
 [Three.js](https://threejs.org){ ._blank } is a popular open-source JavaScript library used to render 3D graphics in web browsers. It has many features, including: scene graphs, cameras, animations, lights, materials, loading of 3D models, mathematical utilities, special effects, and more. It has an active and vibrant community. Many community-made extensions are available.
 
 Using Three.js requires more JavaScript experience than using A-Frame in most cases, but it's also a great choice if you're comfortable with coding. Compared to A-Frame, Three.js offers you additional freedom on how you can organize your code, because it's a library, not a framework.
-
-[Launch a Three.js demo](/encantar-js/demos/hello-three/README.html){ ._blank .md-button }

docs/getting-started/index.md

@@ -2,24 +2,23 @@
 
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/alemart/encantar-js)](https://github.com/alemart/encantar-js/releases/) ![GitHub file size in bytes on a specified ref (branch/commit/tag)](https://img.shields.io/github/size/alemart/encantar-js/dist/encantar.min.js?branch=master&label=minified%20js) [![GitHub Repo stars](https://img.shields.io/github/stars/alemart/encantar-js?logo=github)](https://github.com/alemart/encantar-js/stargazers) [![GitHub Sponsors](https://img.shields.io/github/sponsors/alemart?logo=github)](https://github.com/sponsors/alemart/)
 
-Enchant your users with **encantar.js**, a GPU-accelerated Augmented Reality engine for the web.
+**encantar.js** is the Augmented Reality engine that will enchant you! GPU-accelerated, open-source and web-based!
 
-[:sparkles: Demos](../demos.md){ .md-button .md-button } [:books: Learn](./introduction.md){ .md-button } [:heart:{ .heart } Sponsor](../support-my-work.md){ .md-button }
+[:sparkles: Demos](../demos.md){ .md-button } [:books: Learn](./introduction.md){ .md-button } [:heart:{ .heart } Sponsor](../support-my-work.md){ .md-button }
 
 ## Features
 
-* **AR everywhere**: encantar.js runs on Android, on iOS, and even on Desktop computers! Only a modern web browser is required.
-* **Plugins**: use encantar.js with the 3D framework of your choice, including A-Frame, Babylon.js, Three.js and more!
 * **Image tracking**: track detailed images such as book covers, cartoons and photos. No need of manual training!
 * **Pointer tracking**: create interactive experiences based on touch, mouse and pen input with an easy-to-use API.
+* **Plugins**: use encantar.js with the 3D framework of your choice, including A-Frame, Babylon.js, Three.js and more!
 
 ## Why use encantar.js?
 
-* **Device-agnostic**: no need of AR-capable devices. encantar.js runs in all modern web browsers. It's AR built from scratch with computer vision.
-* **Fast and powerful**: encantar.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
-* **No need to download apps**: encantar.js is a WebAR engine. Users can access the AR experiences immediately.
-* **Easy to get started**: encantar.js can be used with a `<script>` tag in your page. A static HTML page is enough to get started.
-* **Open-source**: what are you waiting for? [Try it now!](../demos.md)
+* **AR everywhere**: it runs on Android, on iOS, and even on Desktop computers! Only a modern web browser is required.
+* **Easy to use**: just load a static HTML page! No need of heavy app downloads, API keys, subscriptions or server-side stuff.
+* **Device-agnostic**: no need of AR-capable devices! encantar.js is AR built from scratch with computer vision!
+* **Fast & powerful**: encantar.js is GPU-accelerated. It uses WebGL2 and WebAssembly for turbocharged performance.
+* **Open source**: personal, professional and educational use is allowed.
 
 ## Browser compatibility
 

docs_overrides/demo.html

@@ -1,11 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="refresh" content="0; url='{{ 'demos/hello-webgl/README.html' | url }}'">
-        <title>encantar.js WebAR demo</title>
-    </head>
-    <body>
-        <p>Redirecting to <a href="{{ 'demos/hello-webgl/README.html' | url }}">{{ 'demos/hello-webgl/README.html' | url }}</a>...</p>
-    </body>
-</html>

docs_overrides/demos.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="refresh" content="0; url='https://ko-fi.com/alemart/shop'">
+        <title>encantar.js WebAR Demo gallery</title>
+    </head>
+    <body>
+        <p><a href="https://ko-fi.com/alemart/shop" rel="external">Redirecting</a>...</p>
+    </body>
+</html>

docs_overrides/download.html

@@ -2,10 +2,10 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <meta http-equiv="refresh" content="0; url='https://github.com/alemart/encantar-js/releases'">
+        <meta http-equiv="refresh" content="0; url='https://ko-fi.com/s/3ee4182cb6'">
         <title>Download encantar.js</title>
     </head>
     <body>
-        <p>Redirecting to <a href="https://github.com/alemart/encantar-js/releases">https://github.com/alemart/encantar-js/releases</a>...</p>
+        <p><a href="https://ko-fi.com/s/3ee4182cb6">Redirecting</a>...</p>
     </body>
 </html>

mkdocs.yml

@@ -63,8 +63,7 @@ nav:
     - 'Support my work': 'support-my-work.md'
     - 'License': 'license.md'
   - 'Download': 'download.md'
-  - 'Demos':
-    - 'Demo gallery': 'demos.md'
+  - 'Demos': 'demos.md'
   - 'API':
     - 'General':
       - 'AR': 'api/ar.md'