changed an example

site/components/InputForm.astro

@@ -0,0 +1,48 @@
+---
+
+---
+
+<div class="input_form">
+    <input type="text" id="user-input" />
+    <button>Animate it!</button>
+</div>
+
+<style>
+    div {
+        position: fixed;
+        background-color: #191920;
+        backdrop-filter: blur(6px);
+        display: flex;
+        flex-direction: column;
+    }
+
+    input {
+        height: 50px;
+        border: none;
+        outline: none;
+        color: aliceblue;
+        padding-left: 10px;
+        border: 2px solid aliceblue;
+        border-radius: 5px;
+        background-color: transparent;
+        font-family: var(--font-family);
+        font-weight: bold;
+    }
+
+    input:focus {
+        background-color: transparent;
+    }
+
+    button {
+        padding: auto;
+        height: 50px;
+        font-family: var(--font-family);
+        font-weight: bold;
+        font-size: 1rem;
+        color: #fff;
+        background-color: transparent;
+        border: 2px solid aliceblue;
+        border-radius: 5px;
+        cursor: pointer;
+    }
+</style>

site/pages/gallery/Axes2D.astro

@@ -1,8 +1,10 @@
 ---
 import Example from "../../layouts/Example.astro";
+import InputForm from "../../components/InputForm.astro";
 ---
 
 <Example title="Axes2D">
+    <InputForm />
     <script>
         import * as mp from "../../../src/mraph.js";
 
@@ -32,9 +34,27 @@ import Example from "../../layouts/Example.astro";
         logo.center.x = 0.5;
         layer.add(logo);
 
+        // User action
+        document.querySelector(".input_form button")?.addEventListener("click", (e) => {
+            const val = document.querySelector(".input_form input").value;
+            const numbers = val.split(" ");
+            layer.timeline.addAnimation(
+                new mp.MatrixTransform(axes, new mp.Matrix([numbers[0], numbers[1]], [numbers[2], numbers[3]])),
+                { biasSeconds: layer.timeline.current }
+            );
+        });
+
         // Render
         layer.add(axes);
         layer.enableOrbitControl();
         layer.play({ until: () => logo.texture.isImageReady });
     </script>
 </Example>
+
+<style is:global>
+    .input_form {
+        position: fixed;
+        top: 60px;
+        right: 10px;
+    }
+</style>