diff --git a/app.js b/app.js
index 025ba73..b7e70a0 100644
--- a/app.js
+++ b/app.js
@@ -1,3 +1,5 @@
+import {PosCSS} from "./keys.js";
+
 const {DOM} = Gale({
     Button: {
         padding: "20px",
@@ -7,13 +9,17 @@ const {DOM} = Gale({
         }
     },
     Outline: {
-        border: "2px solid orange"
+        position: "relative",
+        border: "2px solid orange",
+        padding: "20px"
     }
 });
 
+function App()
+{
+    return ()=> {
+        return DOM.h1.Outline({id:"Move", style:PosCSS(10)}, "title");
+    }
+}
 
-const el = DOM.a.Button.Outline({onclick(){console.log("clicked!")}}, "Click!");
-console.log(el);
-
-
-van.add(document.body, el, DOM.h1.Outline["Button.Inner"]("title"));
\ No newline at end of file
+van.add(document.body, App());
\ No newline at end of file
diff --git a/index.html b/index.html
index 1f7546e..e31f672 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,84 @@
 </head>
 <body>
     <script src="https://vanjs.org/code/van-1.5.3.nomodule.min.js"></script>
+    <script>
+        //@ts-check
+// hmr
+const HMR = globalThis.HMR = {
+    Time: 0,
+    /** @type {Record<string, string>} */
+    Temp:{},
+    Tick()
+    {
+        for(const k in HMR.Temp)
+        {
+            sessionStorage.setItem(k, HMR.Temp[k]);
+        } 
+        HMR.Temp = {};
+        HMR.Time = 0;
+    },
+    /** @type {(key:string, value:string)=>void} */
+    Save(key, value)
+    {
+        this.Temp[key] = value;
+        if(!this.Time)
+        {
+            this.Time = setTimeout(this.Tick, 500);
+        }
+        console.log("SAVE", key, value);
+    },
+    /** @type {(key:string)=>string|null} */
+    Load(key)
+    {
+        const value = sessionStorage.getItem(key);
+        console.log("LOAD", key, value);
+        return value;
+    },
+
+    /** @type {string|undefined} */
+    _ID: undefined,
+    _index: 0,
+    /** @type {(id:string|undefined = undefined)=>void} */
+    StartID(id)
+    {
+        this._index = 0;
+        this._ID = id;
+    },
+    NextID()
+    {
+        return this._ID ? this._ID + "_" + (this._index++) + "_" : "";
+    }
+}
+
+        //bind Van
+        const origninalState = globalThis.van.state;
+        globalThis.van.state =(value, key="")=>
+        {
+            const type = typeof value;
+            let reader =d=>d;
+            let writer =d=>d?.toString() || null;
+
+            switch(type)
+            {
+                case "boolean" :
+                    reader =(data)=> data === "true"; break;
+                case "number" :
+                    reader = parseFloat; break;
+                case "object" :
+                    reader = JSON.parse;
+                    writer = JSON.stringify;
+                    break;
+            }
+
+            const fullKey = "HMR_" + HMR.NextID() + key;
+            const stringValue = HMR.Load(fullKey);
+            const signal = origninalState((stringValue ? reader(stringValue) : value));
+            van.derive(()=>HMR.Save(fullKey, writer(signal.val)));
+
+            return signal;
+        };
+
+    </script>
     <script src="./gale.js"></script>
     <script type="module" src="app.js"></script>
 </body>
diff --git a/keys.js b/keys.js
new file mode 100644
index 0000000..617340a
--- /dev/null
+++ b/keys.js
@@ -0,0 +1,48 @@
+const Move = {
+    Keys: ["w", "d", "s", "a"],
+    Pair: [ 2,   3,   0,   1 ],
+    Axis: [ 1,   0,   1,   0 ],
+    Magn: [-1,   1,   1,  -1 ],
+    Down: [ 0,   0,   0,   0 ],
+    Move: [0, 0],
+};
+
+/** @type {Van.state<[x:number, y:number]>} */
+export const Pos = van.state(Move.Move);
+
+/** @type {(scale:number)=>string} */
+export const PosCSS =(scale)=> `left:${Pos.val[0]*scale}px; top:${Pos.val[1]*scale}px;`;
+
+function handleDown({key})
+{
+    const index = Move.Keys.indexOf(key);
+    if(index != -1)
+    {
+        Move.Down[index] = 1;
+        Move.Move[Move.Axis[index]] = Move.Magn[index];
+        Pos.val = [...Move.Move];
+    }
+    
+}
+function handleUp({key})
+{
+    const index = Move.Keys.indexOf(key);
+    if(index != -1)
+    {
+        const indexInv = Move.Pair[index];
+        Move.Down[index] = 0;
+        if(Move.Down[indexInv])
+        {
+            Move.Move[Move.Axis[indexInv]] = Move.Magn[indexInv];
+        }
+        else
+        {
+            Move.Move[Move.Axis[index]] = 0;
+        }
+        Pos.val = [...Move.Move];
+    }
+}
+
+
+document.body.addEventListener("keydown", handleDown);
+document.body.addEventListener("keyup", handleUp);
\ No newline at end of file
