diff --git a/repl/src/App.tsx b/repl/src/App.tsx
index 7e835ab8..be9f8037 100644
--- a/repl/src/App.tsx
+++ b/repl/src/App.tsx
@@ -158,7 +158,7 @@ function App() {
               }}
               onChange={(_: any, __: any, value: any) => setCode(value)}
             />
-            <span className="p-4 absolute top-0 right-0 text-xs whitespace-pre text-right">
+            <span className="p-4 absolute top-0 right-0 text-xs whitespace-pre text-right pointer-events-none">
               {!cycle.started ? `press ctrl+enter to play\n` : dirty ? `ctrl+enter to update\n` : 'no changes\n'}
             </span>
           </div>
diff --git a/repl/src/draw.mjs b/repl/src/draw.mjs
index b8abca91..59716c70 100644
--- a/repl/src/draw.mjs
+++ b/repl/src/draw.mjs
@@ -28,11 +28,11 @@ Pattern.prototype.draw = function (callback, queryDuration) {
       if (cycle !== currentCycle) {
         cycle = currentCycle;
         const begin = currentCycle * queryDuration;
-        const end = (currentCycle + 2) * queryDuration;
+        const end = (currentCycle + 1) * queryDuration;
         events = this.add(0).query(new State(new TimeSpan(begin, end)));
       }
     }
-    callback(ctx, events, t, time);
+    callback(ctx, events, t, queryDuration, time);
     window.strudelAnimation = requestAnimationFrame(animate);
   };
   requestAnimationFrame(animate);
diff --git a/repl/src/pianoroll.mjs b/repl/src/pianoroll.mjs
index 634f3345..feba0939 100644
--- a/repl/src/pianoroll.mjs
+++ b/repl/src/pianoroll.mjs
@@ -2,7 +2,7 @@ import { Pattern } from '../../strudel.mjs';
 
 Pattern.prototype.pianoroll = function ({
   timeframe = 10,
-  inactive = '#88ABF8',
+  inactive = '#C9E597',
   active = '#FFCA28',
   background = '#2A3236',
   maxMidi = 90,
@@ -25,6 +25,6 @@ Pattern.prototype.pianoroll = function ({
       const margin = 0;
       ctx.fillRect(x - offset + margin + 1, y + 1, width - 2, height - 2);
     });
-  }, timeframe);
+  }, timeframe * 2);
   return this;
 };