diff --git a/index.html b/index.html
index 22c18434..862dd23b 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,191 @@
-<!DOCTYPE html><html><head><meta charset="utf-8"><title>PixiJS Examples</title><meta http-equiv="refresh" content="0; url=https://pixijs.com/examples"><meta name="description" content="PixiJS Examples"><meta name="format-detection" content="telephone-no"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, minimal-ui"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no"><link rel="icon" type="image/gif" href="favicon.d8c67e1f.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css"><link rel="stylesheet" href="index.563d4e11.css"></head><body class="normal"> <header class="main-header"> <a href="https://pixijs.com"> <img src="blank.a2f98021.gif" class="pixijs-logo" alt="PixiJS Logo"> <span class="version">v7</span> </a> <div class="hamburger"> <i id="line1"></i> <i id="line2"></i> <i id="line3"></i> </div> <span class="searchbar-wrap"> <form method="get" action="https://github.com/pixijs/examples/search" target="_blank"> <div class="searchbar-content"> <input type="text" name="q" placeholder="Search GitHub..."> <button class="button" type="submit">Search</button> </div> </form> </span> </header> <nav class="main-nav"> <div class="main-menu"> </div> <div class="about"> &copy; 2022 PixiJS </div> </nav> <article class="main-content"> <a id="redirect" class="redirect" rel="noopener noreferrer" target="_blank" href="#"> <img src="external-link-ltr-icon.58729d19.svg"> </a> <div class="main-tabs"> <button class="main-tab selected" data-view="view-preview">Canvas</button> <button class="main-tab" data-view="view-code">Code</button> </div> <h1 id="example-title">Loading&hellip;</h1> <div class="example-frame"> <div class="sizer" id="example"> <iframe id="preview" src="blank.html"></iframe> </div> <div class="reload"> <svg version="1.1" id="Layer_1" x="0" y="0" xml:space="preserve" viewBox="0 0 30.9 30.9"><path id="XMLID_4_" d="M30.4 18.6v.1c-.9 3.6-2.7 6.5-5.4 8.7-2.7 2.2-5.9 3.3-9.6 3.3-2 0-3.8-.4-5.7-1.1-1.9-.6-3.5-1.6-4.9-3l-2.6 2.6c-.3.3-.6.4-.9.4s-.6-.1-.9-.4c-.3-.3-.4-.6-.4-.9v-9c0-.3.1-.6.4-.9.2-.3.5-.4.9-.4h9c.3 0 .6.1.9.4.3.3.4.6.4.9 0 .3-.1.6-.4.9L8.4 23c1 .9 2 1.6 3.2 2 1.2.5 2.5.7 3.8.7 1.8 0 3.5-.4 5-1.3 1.6-.9 2.8-2.1 3.7-3.6.1-.2.5-1 1.1-2.4.1-.3.3-.5.6-.5h3.9c.2 0 .3.1.5.2.1.2.2.4.2.5zm.5-16v9c0 .3-.1.6-.4.9-.3.3-.6.4-.9.4h-9c-.3 0-.6-.1-.9-.4s-.4-.6-.4-.9c0-.3.1-.6.4-.9l2.8-2.8c-2-1.8-4.3-2.8-7-2.8-1.8 0-3.5.4-5 1.3S7.6 8.5 6.7 10c-.1.2-.5 1-1.1 2.4-.1.3-.3.5-.6.5H1c-.2 0-.3-.1-.5-.2-.1-.1-.2-.3-.2-.5v-.1C1.2 8.5 3 5.6 5.8 3.3s6-3.3 9.6-3.3c2 0 3.9.4 5.7 1.1 1.8.7 3.5 1.8 4.9 3.1l2.6-2.6c.3-.3.6-.4.9-.4s.6.1.9.4c.3.3.5.6.5 1z"/></svg> </div> </div> <div class="content-controls"> <div class="clearfix code"> <h3 class="code-header" id="code-header">Example Code</h3> <textarea id="code"></textarea> <div class="footer"> <div class="select-group"> <span class="label">PixiJS Version:</span> <div class="select"> <span class="current">Latest Development</span> <ul> <li data-val="dev">Latest Development</li> <li data-val="local">local</li> </ul> </div> </div> <button class="button download">Download Code</button> </div> </div> <p class="submit">Would you like to create a new example? Head over to the examples repo on <a href="https://github.com/pixijs/examples" target="_blank">GitHub</a>.</p> </div> </article> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/javascript/javascript.min.js"></script> <script src="index.4194d75f.js" type="module"></script> <script>!function(e,a,t,n,g,c,o){e.GoogleAnalyticsObject=g,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(t),o=a.getElementsByTagName(t)[0],c.async=1,c.src="https://www.google-analytics.com/analytics.js",o.parentNode.insertBefore(c,o)}(window,document,"script",0,"ga"),ga("create","UA-103772589-4","auto"),ga("send","pageview");</script> </body></html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>PixiJS Examples</title>
+    <meta name="description" content="PixiJS Examples" />
+    <meta name="format-detection" content="telephone-no" />
+    <meta
+      name="viewport"
+      content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, minimal-ui"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="format-detection" content="telephone=no" />
+    <link rel="icon" type="image/gif" href="favicon.d8c67e1f.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css"
+    />
+    <link rel="stylesheet" href="index.563d4e11.css" />
+  </head>
+  <body class="normal">
+    <header class="main-header">
+      <a href="https://pixijs.com">
+        <img src="blank.a2f98021.gif" class="pixijs-logo" alt="PixiJS Logo" />
+        <span class="version">v7</span>
+      </a>
+      <div class="hamburger">
+        <i id="line1"></i> <i id="line2"></i> <i id="line3"></i>
+      </div>
+      <span class="searchbar-wrap">
+        <form
+          method="get"
+          action="https://github.com/pixijs/examples/search"
+          target="_blank"
+        >
+          <div class="searchbar-content">
+            <input type="text" name="q" placeholder="Search GitHub..." />
+            <button class="button" type="submit">Search</button>
+          </div>
+        </form>
+      </span>
+    </header>
+    <nav class="main-nav">
+      <div class="main-menu"></div>
+      <div class="about">&copy; 2022 PixiJS</div>
+    </nav>
+    <article class="main-content">
+      <a
+        id="redirect"
+        class="redirect"
+        rel="noopener noreferrer"
+        target="_blank"
+        href="#"
+      >
+        <img src="external-link-ltr-icon.58729d19.svg" />
+      </a>
+      <div class="main-tabs">
+        <button class="main-tab selected" data-view="view-preview">
+          Canvas
+        </button>
+        <button class="main-tab" data-view="view-code">Code</button>
+      </div>
+      <h1 id="example-title">Loading&hellip;</h1>
+      <div class="example-frame">
+        <div class="sizer" id="example">
+          <iframe id="preview" src="blank.html"></iframe>
+        </div>
+        <div class="reload">
+          <svg
+            version="1.1"
+            id="Layer_1"
+            x="0"
+            y="0"
+            xml:space="preserve"
+            viewBox="0 0 30.9 30.9"
+          >
+            <path
+              id="XMLID_4_"
+              d="M30.4 18.6v.1c-.9 3.6-2.7 6.5-5.4 8.7-2.7 2.2-5.9 3.3-9.6 3.3-2 0-3.8-.4-5.7-1.1-1.9-.6-3.5-1.6-4.9-3l-2.6 2.6c-.3.3-.6.4-.9.4s-.6-.1-.9-.4c-.3-.3-.4-.6-.4-.9v-9c0-.3.1-.6.4-.9.2-.3.5-.4.9-.4h9c.3 0 .6.1.9.4.3.3.4.6.4.9 0 .3-.1.6-.4.9L8.4 23c1 .9 2 1.6 3.2 2 1.2.5 2.5.7 3.8.7 1.8 0 3.5-.4 5-1.3 1.6-.9 2.8-2.1 3.7-3.6.1-.2.5-1 1.1-2.4.1-.3.3-.5.6-.5h3.9c.2 0 .3.1.5.2.1.2.2.4.2.5zm.5-16v9c0 .3-.1.6-.4.9-.3.3-.6.4-.9.4h-9c-.3 0-.6-.1-.9-.4s-.4-.6-.4-.9c0-.3.1-.6.4-.9l2.8-2.8c-2-1.8-4.3-2.8-7-2.8-1.8 0-3.5.4-5 1.3S7.6 8.5 6.7 10c-.1.2-.5 1-1.1 2.4-.1.3-.3.5-.6.5H1c-.2 0-.3-.1-.5-.2-.1-.1-.2-.3-.2-.5v-.1C1.2 8.5 3 5.6 5.8 3.3s6-3.3 9.6-3.3c2 0 3.9.4 5.7 1.1 1.8.7 3.5 1.8 4.9 3.1l2.6-2.6c.3-.3.6-.4.9-.4s.6.1.9.4c.3.3.5.6.5 1z"
+            />
+          </svg>
+        </div>
+      </div>
+      <div class="content-controls">
+        <div class="clearfix code">
+          <h3 class="code-header" id="code-header">Example Code</h3>
+          <textarea id="code"></textarea>
+          <div class="footer">
+            <div class="select-group">
+              <span class="label">PixiJS Version:</span>
+              <div class="select">
+                <span class="current">Latest Development</span>
+                <ul>
+                  <li data-val="dev">Latest Development</li>
+                  <li data-val="local">local</li>
+                </ul>
+              </div>
+            </div>
+            <button class="button download">Download Code</button>
+          </div>
+        </div>
+        <p class="submit">
+          Would you like to create a new example? Head over to the examples repo
+          on
+          <a href="https://github.com/pixijs/examples" target="_blank">GitHub</a
+          >.
+        </p>
+      </div>
+    </article>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/javascript/javascript.min.js"></script>
+    <script src="index.4194d75f.js" type="module"></script>
+    <script>
+      !(function (e, a, t, n, g, c, o) {
+        (e.GoogleAnalyticsObject = g),
+          (e.ga =
+            e.ga ||
+            function () {
+              (e.ga.q = e.ga.q || []).push(arguments);
+            }),
+          (e.ga.l = 1 * new Date()),
+          (c = a.createElement(t)),
+          (o = a.getElementsByTagName(t)[0]),
+          (c.async = 1),
+          (c.src = "https://www.google-analytics.com/analytics.js"),
+          o.parentNode.insertBefore(c, o);
+      })(window, document, "script", 0, "ga"),
+        ga("create", "UA-103772589-4", "auto"),
+        ga("send", "pageview");
+    </script>
+    <script>
+        window.addEventListener("load", function () {
+            // check if url is localhost and doesn't have a urlparam redirect
+            var urlParams = new URLSearchParams(window.location.search);
+            if (
+                window.location.hostname === "localhost" &&
+                !urlParams.has("redirect")
+            ) {
+                console.log("[Examples] redirecting disabled on localhost. Use ?redirect=1 to enable");
+                return
+            }
+
+            // get the demo name from the url
+            var hash = window.location.hash.substring(1); // Remove the '#' at the start
+            var parts = hash.split("/");
+            var demoLocation = parts[1];
+            var demoName = parts[2].slice(0, -3);
+
+            var redirects = new Map();
+
+            // v7 plugins
+            redirects.set("plugin-spine", "https://pixijs.io/examples-v7/#/plugin-spine");
+            redirects.set("plugin-layers", "https://pixijs.io/examples-v7/#/plugin-layers");
+            redirects.set("tweedle", "https://pixijs.io/examples-v7/#/tweedle");
+            redirects.set("gsap2-interaction", "https://pixijs.io/examples-v7/#/gsap2-interaction");
+            redirects.set("gsap3-interaction", "https://pixijs.io/examples-v7/#/gsap3-interaction");
+            // v5/6 plugins
+            redirects.set("plugin-dragonbones", "https://pixijs.io/examples-v5/#/plugin-spine");
+            redirects.set("plugin-heaven", "https://pixijs.io/examples-v5/#/plugin-spine");
+            redirects.set("plugin-projection", "https://pixijs.io/examples-v5/#/plugin-spine");
+            redirects.set("plugin-layers", "https://pixijs.io/examples-v5/#/plugin-spine");
+            redirects.set("plugin-picture", "https://pixijs.io/examples-v5/#/plugin-spine");
+            redirects.set("plugin-compressed-textures", "https://pixijs.io/examples-v5/#/plugin-spine");
+            redirects.set("plugin-webfont-loader", "https://pixijs.io/examples-v5/#/plugin-spine");
+            redirects.set("tilemaps", "https://pixijs.io/examples-v5/#/plugin-spine");
+
+            if (demoLocation && redirects.has(demoLocation)) {
+                var newUrl =
+                    redirects.get(demoLocation) + "/" + demoName;
+                window.location.href = newUrl;
+            }
+            else {
+                if(demoLocation === 'demos-basic' || demoLocation === 'demos-advanced')
+                {
+                    demoLocation = demoLocation.replace('demos-', '');
+                }
+                var newUrl = "https://pixijs.com/examples/" + demoLocation + "/" + demoName;
+                window.location.href = newUrl;
+            }
+        });
+    </script>
+  </body>
+</html>
