diff --git a/package-lock.json b/package-lock.json
index 4f151b1..13234a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1578,6 +1578,31 @@
       "resolved": "https://registry.npmjs.org/callbag/-/callbag-1.2.0.tgz",
       "integrity": "sha512-RMcVOk2oyA8CyCt/HsLEvnvvttKlaGVaG0uOo5IY7RpdiPLhStjxv5oYre33VJfT8kJE+cuKLSNHooz7yCUdhQ=="
     },
+    "callbag-animation-frames": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/callbag-animation-frames/-/callbag-animation-frames-2.1.0.tgz",
+      "integrity": "sha512-mRvpE47uySluq2ioOVMY1fqS//6bxuiok8hNEMdPwa2JPYBJIQxkdpTpOXuAzyfxd+U1Yysp3I37PrnaH0ziPg==",
+      "requires": {
+        "callbag": "^1.1.0",
+        "callbag-share": "^1.1.1"
+      }
+    },
+    "callbag-map": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/callbag-map/-/callbag-map-1.1.0.tgz",
+      "integrity": "sha512-/xFzvJCtx1xulZpFeI4wq+ZD7tkg417XOeJ3wS9v8bHLLpt+fHKXgbZ8TBnnIxywJN6Uu/ZhL+c1DzUG6KXYFQ==",
+      "requires": {
+        "callbag": "^1.1.0"
+      }
+    },
+    "callbag-share": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/callbag-share/-/callbag-share-1.2.0.tgz",
+      "integrity": "sha512-Gt+D5lfJ/j3X5/3PiMPL8hHDPBmeQILZl2QYu+YJtSFz6PlNGQSL45aD4e4uoxMvhMZY9NpMHh7KRWia9PZA+g==",
+      "requires": {
+        "callbag": "^1.1.0"
+      }
+    },
     "caller-callsite": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
diff --git a/package.json b/package.json
index 1395f4f..1184421 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
     "typescript": "^3.7.3"
   },
   "dependencies": {
-    "callbag": "^1.2.0"
+    "callbag": "^1.2.0",
+    "callbag-animation-frames": "^2.1.0",
+    "callbag-map": "^1.1.0"
   }
 }
diff --git a/src/Net/LockstepClient.ts b/src/Net/LockstepClient.ts
index 10ebd84..7d09322 100644
--- a/src/Net/LockstepClient.ts
+++ b/src/Net/LockstepClient.ts
@@ -1,5 +1,7 @@
 
 import { Callbag } from "callbag";
+import animationFrames from "callbag-animation-frames";
+import map from "callbag-map";
 
 import { INPUT_FREQUENCY, LockstepProcessor, LockstepState } from "../Ecs/Lockstep";
 
@@ -44,7 +46,7 @@ export abstract class LockstepClient<Input, State> {
             if (serverTalkback) {
                 const input = this.gatherInput();
                 this.state.addLocalInput(input);
-                serverTalkback(1, {t: MessageTypes.INPUT, i: input});
+                serverTalkback(1, { t: MessageTypes.INPUT, i: input });
                 setTimeout(sampleInput, INPUT_FREQUENCY);
             }
         };
@@ -59,7 +61,7 @@ export abstract class LockstepClient<Input, State> {
             } else if (mode == 1) {
                 // server message
                 const message = data as ServerMessage<Input, State>;
-                switch(message.t) {
+                switch (message.t) {
                     case MessageTypes.RESET:
                         const resetState = this.initState(message.s);
                         this.state = new LockstepState(resetState, this.engine);
@@ -82,4 +84,5 @@ export abstract class LockstepClient<Input, State> {
         };
     }
 
-}
\ No newline at end of file
+    public renderFrames = map((ms: number) => this.state.getStateToRender())(animationFrames);
+}