diff --git a/shaders/modules/fps/fps.ts b/infra-sk/modules/fps/fps.ts
similarity index 100%
rename from shaders/modules/fps/fps.ts
rename to infra-sk/modules/fps/fps.ts
diff --git a/shaders/modules/fps/fps_test.ts b/infra-sk/modules/fps/fps_test.ts
similarity index 100%
rename from shaders/modules/fps/fps_test.ts
rename to infra-sk/modules/fps/fps_test.ts
diff --git a/shaders/modules/fps/index.ts b/infra-sk/modules/fps/index.ts
similarity index 100%
rename from shaders/modules/fps/index.ts
rename to infra-sk/modules/fps/index.ts
diff --git a/infra-sk/modules/uniform-color-sk/uniform-color-sk.ts b/infra-sk/modules/uniform-color-sk/uniform-color-sk.ts
index 15d2a15..9e173f4 100644
--- a/infra-sk/modules/uniform-color-sk/uniform-color-sk.ts
+++ b/infra-sk/modules/uniform-color-sk/uniform-color-sk.ts
@@ -104,6 +104,14 @@
     }
   }
 
+  onRAF(): void {
+    // noop.
+  }
+
+  needsRAF(): boolean {
+    return false;
+  }
+
   private hasAlphaChannel(): boolean {
     return this._uniform.columns === 4;
   }
diff --git a/infra-sk/modules/uniform-color-sk/uniform-color-sk_test.ts b/infra-sk/modules/uniform-color-sk/uniform-color-sk_test.ts
index a9da2af..32c5cd6 100644
--- a/infra-sk/modules/uniform-color-sk/uniform-color-sk_test.ts
+++ b/infra-sk/modules/uniform-color-sk/uniform-color-sk_test.ts
@@ -116,5 +116,9 @@
         };
       });
     });
+
+    it('does not need raf updates', () => {
+      assert.isFalse(element.needsRAF());
+    });
   });
 });
diff --git a/infra-sk/modules/uniform-dimensions-sk/uniform-dimensions-sk.ts b/infra-sk/modules/uniform-dimensions-sk/uniform-dimensions-sk.ts
index d969c61..1f4cc3f 100644
--- a/infra-sk/modules/uniform-dimensions-sk/uniform-dimensions-sk.ts
+++ b/infra-sk/modules/uniform-dimensions-sk/uniform-dimensions-sk.ts
@@ -61,6 +61,7 @@
     super(UniformDimensionsSk.template);
   }
 
+
   private static template = (ele: UniformDimensionsSk) => html`
     <select @change=${ele.selectionChanged} size="1">
       ${choices.map((choice, index) => html`
@@ -83,6 +84,14 @@
     // This is a noop, we don't restore predefined uniform values.
   }
 
+  onRAF(): void {
+    // noop.
+  }
+
+  needsRAF(): boolean {
+    return false;
+  }
+
   connectedCallback(): void {
     super.connectedCallback();
     this._render();
diff --git a/infra-sk/modules/uniform-dimensions-sk/uniform-dimensions-sk_test.ts b/infra-sk/modules/uniform-dimensions-sk/uniform-dimensions-sk_test.ts
index 9a88f10..b371277 100644
--- a/infra-sk/modules/uniform-dimensions-sk/uniform-dimensions-sk_test.ts
+++ b/infra-sk/modules/uniform-dimensions-sk/uniform-dimensions-sk_test.ts
@@ -56,5 +56,9 @@
         };
       });
     });
+
+    it('does not need raf updates', () => {
+      assert.isFalse(element.needsRAF());
+    });
   });
 });
diff --git a/infra-sk/modules/uniform-fps-sk/index.ts b/infra-sk/modules/uniform-fps-sk/index.ts
new file mode 100644
index 0000000..06d4572
--- /dev/null
+++ b/infra-sk/modules/uniform-fps-sk/index.ts
@@ -0,0 +1,2 @@
+import './uniform-fps-sk';
+import './uniform-fps-sk.scss';
diff --git a/infra-sk/modules/uniform-fps-sk/uniform-fps-sk-demo.html b/infra-sk/modules/uniform-fps-sk/uniform-fps-sk-demo.html
new file mode 100644
index 0000000..42f3534
--- /dev/null
+++ b/infra-sk/modules/uniform-fps-sk/uniform-fps-sk-demo.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>uniform-fps-sk</title>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+
+<body>
+  <h1>uniform-fps-sk</h1>
+  <uniform-fps-sk></uniform-fps-sk>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/infra-sk/modules/uniform-fps-sk/uniform-fps-sk-demo.ts b/infra-sk/modules/uniform-fps-sk/uniform-fps-sk-demo.ts
new file mode 100644
index 0000000..b811cfb
--- /dev/null
+++ b/infra-sk/modules/uniform-fps-sk/uniform-fps-sk-demo.ts
@@ -0,0 +1 @@
+import './index';
diff --git a/infra-sk/modules/uniform-fps-sk/uniform-fps-sk.scss b/infra-sk/modules/uniform-fps-sk/uniform-fps-sk.scss
new file mode 100644
index 0000000..52886e9
--- /dev/null
+++ b/infra-sk/modules/uniform-fps-sk/uniform-fps-sk.scss
@@ -0,0 +1,3 @@
+uniform-fps-sk {
+  display: block;
+}
diff --git a/infra-sk/modules/uniform-fps-sk/uniform-fps-sk.ts b/infra-sk/modules/uniform-fps-sk/uniform-fps-sk.ts
new file mode 100644
index 0000000..da755e1
--- /dev/null
+++ b/infra-sk/modules/uniform-fps-sk/uniform-fps-sk.ts
@@ -0,0 +1,57 @@
+/**
+ * @module modules/uniform-fps-sk
+ * @description <h2><code>uniform-fps-sk</code></h2>
+ *
+ * Displays the frames per second.
+ */
+import { define } from 'elements-sk/define';
+import { html } from 'lit-html';
+import { ElementSk } from '../ElementSk';
+import { FPS } from '../fps/fps';
+import { Uniform, UniformControl } from '../uniform/uniform';
+
+const defaultUniform: Uniform = {
+  name: 'raf',
+  rows: 0,
+  columns: 0,
+  slot: 0,
+};
+
+export class UniformFpsSk extends ElementSk implements UniformControl {
+    uniform: Uniform = defaultUniform;
+
+    private fps: FPS = new FPS();
+
+    constructor() {
+      super(UniformFpsSk.template);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    private static template = (ele: UniformFpsSk) => html`fps`;
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    applyUniformValues(uniforms: number[]): void {
+      // noop as UniformRafSk doesn't supply uniforms.
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    restoreUniformValues(uniforms: number[]): void {
+      // noop as UniformRafSk doesn't supply uniforms.
+    }
+
+    onRAF(): void {
+      this.fps.raf();
+      this.textContent = `${this.fps.fps.toFixed(0)} fps`;
+    }
+
+    needsRAF(): boolean {
+      return true;
+    }
+
+    connectedCallback(): void {
+      super.connectedCallback();
+      this._render();
+    }
+}
+
+define('uniform-fps-sk', UniformFpsSk);
diff --git a/infra-sk/modules/uniform-fps-sk/uniform-fps-sk_test.ts b/infra-sk/modules/uniform-fps-sk/uniform-fps-sk_test.ts
new file mode 100644
index 0000000..cccaf54
--- /dev/null
+++ b/infra-sk/modules/uniform-fps-sk/uniform-fps-sk_test.ts
@@ -0,0 +1,26 @@
+import './index';
+import { assert } from 'chai';
+import { UniformFpsSk } from './uniform-fps-sk';
+
+import { setUpElementUnderTest } from '../test_util';
+
+describe('uniform-fps-sk', () => {
+  const newInstance = setUpElementUnderTest<UniformFpsSk>('uniform-fps-sk');
+
+  let element: UniformFpsSk;
+  beforeEach(() => {
+    element = newInstance();
+  });
+
+  describe('uniform-fps-sk', () => {
+    it('needs raf updates', () => {
+      assert.isTrue(element.needsRAF());
+    });
+
+    it('updates on onRAF()', () => {
+      assert.equal(element.textContent, 'fps');
+      element.onRAF();
+      assert.equal(element.textContent, '0 fps');
+    });
+  });
+});
diff --git a/infra-sk/modules/uniform-generic-sk/uniform-generic-sk.ts b/infra-sk/modules/uniform-generic-sk/uniform-generic-sk.ts
index 0f87340..36ffaee 100644
--- a/infra-sk/modules/uniform-generic-sk/uniform-generic-sk.ts
+++ b/infra-sk/modules/uniform-generic-sk/uniform-generic-sk.ts
@@ -100,6 +100,14 @@
       }
     }
   }
+
+  onRAF(): void {
+    // noop.
+  }
+
+  needsRAF(): boolean {
+    return false;
+  }
 }
 
 define('uniform-generic-sk', UniformGenericSk);
diff --git a/infra-sk/modules/uniform-generic-sk/uniform-generic-sk_test.ts b/infra-sk/modules/uniform-generic-sk/uniform-generic-sk_test.ts
index 2945a04..2f661aa 100644
--- a/infra-sk/modules/uniform-generic-sk/uniform-generic-sk_test.ts
+++ b/infra-sk/modules/uniform-generic-sk/uniform-generic-sk_test.ts
@@ -73,5 +73,9 @@
       element.applyUniformValues(uniforms);
       assert.deepEqual(uniforms, [0, 1, 0.5, 0.3, 1, 0]);
     });
+
+    it('does not need raf updates', () => {
+      assert.isFalse(element.needsRAF());
+    });
   });
 });
diff --git a/infra-sk/modules/uniform-imageresolution-sk/uniform-imageresolution-sk.ts b/infra-sk/modules/uniform-imageresolution-sk/uniform-imageresolution-sk.ts
index 8b65a4c..66b8845 100644
--- a/infra-sk/modules/uniform-imageresolution-sk/uniform-imageresolution-sk.ts
+++ b/infra-sk/modules/uniform-imageresolution-sk/uniform-imageresolution-sk.ts
@@ -32,6 +32,14 @@
     // This is a noop, we don't restore predefined uniform values.
   }
 
+  onRAF(): void {
+    // noop
+  }
+
+  needsRAF(): boolean {
+    return false;
+  }
+
   get uniform(): Uniform {
     return this._uniform;
   }
diff --git a/infra-sk/modules/uniform-imageresolution-sk/uniform-imageresolution-sk_test.ts b/infra-sk/modules/uniform-imageresolution-sk/uniform-imageresolution-sk_test.ts
index 4773d0a..5b45e9b 100644
--- a/infra-sk/modules/uniform-imageresolution-sk/uniform-imageresolution-sk_test.ts
+++ b/infra-sk/modules/uniform-imageresolution-sk/uniform-imageresolution-sk_test.ts
@@ -18,5 +18,9 @@
       element.applyUniformValues(uniforms);
       assert.deepEqual(uniforms, [imageSize, imageSize, 0]);
     });
+
+    it('does not need raf updates', () => {
+      assert.isFalse(element.needsRAF());
+    });
   });
 });
diff --git a/infra-sk/modules/uniform-mouse-sk/uniform-mouse-sk.ts b/infra-sk/modules/uniform-mouse-sk/uniform-mouse-sk.ts
index 6046198..41d028e 100644
--- a/infra-sk/modules/uniform-mouse-sk/uniform-mouse-sk.ts
+++ b/infra-sk/modules/uniform-mouse-sk/uniform-mouse-sk.ts
@@ -44,6 +44,14 @@
     // This is a noop, we don't restore predefined uniform values.
   }
 
+  onRAF(): void {
+    // noop.
+  }
+
+  needsRAF(): boolean {
+    return false;
+  }
+
   get elementToMonitor(): HTMLElement {
     return this._elementToMonitor!;
   }
diff --git a/infra-sk/modules/uniform-mouse-sk/uniform-mouse-sk_test.ts b/infra-sk/modules/uniform-mouse-sk/uniform-mouse-sk_test.ts
index 6baea25..aacd71c 100644
--- a/infra-sk/modules/uniform-mouse-sk/uniform-mouse-sk_test.ts
+++ b/infra-sk/modules/uniform-mouse-sk/uniform-mouse-sk_test.ts
@@ -29,5 +29,9 @@
         };
       });
     });
+
+    it('does not need raf updates', () => {
+      assert.isFalse(element.needsRAF());
+    });
   });
 });
diff --git a/infra-sk/modules/uniform-slider-sk/uniform-slider-sk.ts b/infra-sk/modules/uniform-slider-sk/uniform-slider-sk.ts
index 6a9f407..314a6a3 100644
--- a/infra-sk/modules/uniform-slider-sk/uniform-slider-sk.ts
+++ b/infra-sk/modules/uniform-slider-sk/uniform-slider-sk.ts
@@ -61,6 +61,14 @@
   restoreUniformValues(uniforms: number[]): void {
       this.input!.valueAsNumber = uniforms[this.uniform.slot];
   }
+
+  onRAF(): void {
+    // noop.
+  }
+
+  needsRAF(): boolean {
+    return false;
+  }
 }
 
 define('uniform-slider-sk', UniformSliderSk);
diff --git a/infra-sk/modules/uniform-slider-sk/uniform-slider-sk_test.ts b/infra-sk/modules/uniform-slider-sk/uniform-slider-sk_test.ts
index c91c2d5..40916ad 100644
--- a/infra-sk/modules/uniform-slider-sk/uniform-slider-sk_test.ts
+++ b/infra-sk/modules/uniform-slider-sk/uniform-slider-sk_test.ts
@@ -56,5 +56,9 @@
         };
       });
     });
+
+    it('does not need raf updates', () => {
+      assert.isFalse(element.needsRAF());
+    });
   });
 });
diff --git a/infra-sk/modules/uniform-time-sk/uniform-time-sk.ts b/infra-sk/modules/uniform-time-sk/uniform-time-sk.ts
index d241840..0ee04dc 100644
--- a/infra-sk/modules/uniform-time-sk/uniform-time-sk.ts
+++ b/infra-sk/modules/uniform-time-sk/uniform-time-sk.ts
@@ -48,7 +48,7 @@
     <play-arrow-icon-sk ?hidden=${ele.playing}></play-arrow-icon-sk>
     <pause-icon-sk ?hidden=${!ele.playing}></pause-icon-sk>
   </button>
-  <span>${ele.time.toFixed(3)}</span>
+  <span id=ms>${ele.time.toFixed(3)}</span>
   <span>${ele._uniform.name}</span>
 `;
 
@@ -74,6 +74,14 @@
     // This is a noop, we don't restore predefined uniform values.
   }
 
+  onRAF(): void {
+    this.render();
+  }
+
+  needsRAF(): boolean {
+    return true;
+  }
+
   /** Allows overriding the Date.now function for testing. */
   get dateNow(): DateNow {
     return this._dateNow;
diff --git a/infra-sk/modules/uniform-time-sk/uniform-time-sk_test.ts b/infra-sk/modules/uniform-time-sk/uniform-time-sk_test.ts
index a9ee48b..97fb11b 100644
--- a/infra-sk/modules/uniform-time-sk/uniform-time-sk_test.ts
+++ b/infra-sk/modules/uniform-time-sk/uniform-time-sk_test.ts
@@ -84,5 +84,16 @@
       element.applyUniformValues(uniforms);
       assert.deepEqual(uniforms, [0, 10, 0]);
     });
+
+    it('needs raf updates', () => {
+      assert.isTrue(element.needsRAF());
+    });
+
+    it('updates on a call to onRAF', () => {
+      element.dateNow = () => 0; // ms
+      element.time = 10; // s
+      element.onRAF();
+      assert.equal('10.000', $$('#ms', element)?.textContent);
+    });
   });
 });
diff --git a/infra-sk/modules/uniform/uniform.ts b/infra-sk/modules/uniform/uniform.ts
index e64018d..60ba5eb 100644
--- a/infra-sk/modules/uniform/uniform.ts
+++ b/infra-sk/modules/uniform/uniform.ts
@@ -24,4 +24,10 @@
 
   /** Copies the values from the uniforms array into the control. */
   restoreUniformValues(uniforms: number[]): void;
+
+  /** Function to call on every requestAnimationFrame. Only called if needsRAF() returns true. */
+  onRAF(): void;
+
+  /** Returns true if this controls needs to update on every requestAnimationFrame, such as uniform-time-sk. */
+  needsRAF(): boolean;
 }
diff --git a/shaders/modules/shadernode/index.ts b/shaders/modules/shadernode/index.ts
index f34ca05..c84ac25 100644
--- a/shaders/modules/shadernode/index.ts
+++ b/shaders/modules/shadernode/index.ts
@@ -32,6 +32,13 @@
 export const numPredefinedUniforms = predefinedUniforms.match(/^uniform/gm)!.length - numPredefinedShaderUniforms;
 
 /**
+ * Counts the number of controls that handle pre-defined uniforms.
+ *
+ * Takes into account the uniform-fps-sk which doesn't correspond to a uniform.
+ */
+export const numPredefinedUniformControls = numPredefinedUniforms + 1;
+
+/**
  * The number of lines prefixed to every shader for predefined uniforms. Needed
  * to properly adjust error line numbers.
  */
diff --git a/shaders/modules/shaders-app-sk/shaders-app-sk.ts b/shaders/modules/shaders-app-sk/shaders-app-sk.ts
index 377711e..e99df36 100644
--- a/shaders/modules/shaders-app-sk/shaders-app-sk.ts
+++ b/shaders/modules/shaders-app-sk/shaders-app-sk.ts
@@ -3,13 +3,12 @@
  * @description <h2><code>shaders-app-sk</code></h2>
  *
  */
-import { $ } from 'common-sk/modules/dom';
+import { $, $$ } from 'common-sk/modules/dom';
 import 'codemirror/mode/clike/clike'; // Syntax highlighting for c-like languages.
 import { define } from 'elements-sk/define';
 import { html, TemplateResult } from 'lit-html';
 import { errorMessage } from 'elements-sk/errorMessage';
 import CodeMirror from 'codemirror';
-import { $$ } from 'common-sk/modules/dom';
 import { stateReflector } from 'common-sk/modules/stateReflector';
 import { HintableObject } from 'common-sk/modules/hintable';
 import { isDarkMode } from '../../../infra-sk/modules/theme-chooser-sk/theme-chooser-sk';
@@ -27,6 +26,7 @@
 import '../../../infra-sk/modules/theme-chooser-sk';
 import { SKIA_VERSION } from '../../build/version';
 import { ElementSk } from '../../../infra-sk/modules/ElementSk/ElementSk';
+import '../../../infra-sk/modules/uniform-fps-sk';
 import '../../../infra-sk/modules/uniform-time-sk';
 import '../../../infra-sk/modules/uniform-generic-sk';
 import '../../../infra-sk/modules/uniform-dimensions-sk';
@@ -35,10 +35,9 @@
 import '../../../infra-sk/modules/uniform-color-sk';
 import '../../../infra-sk/modules/uniform-imageresolution-sk';
 import { UniformControl } from '../../../infra-sk/modules/uniform/uniform';
-import { FPS } from '../fps/fps';
 import { DimensionsChangedEventDetail } from '../../../infra-sk/modules/uniform-dimensions-sk/uniform-dimensions-sk';
 import {
-  defaultShader, numPredefinedUniformLines, predefinedUniforms, ShaderNode,
+  defaultShader, numPredefinedUniformControls, numPredefinedUniformLines, predefinedUniforms, ShaderNode,
 } from '../shadernode';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -163,14 +162,16 @@
   // stateReflector update function.
   private stateChanged: stateChangedCallback | null = null;
 
-  private fps: FPS = new FPS();
+  private uniformControlsNeedingRAF: UniformControl[] = [];
 
   constructor() {
     super(ShadersAppSk.template);
   }
 
   private static uniformControls = (ele: ShadersAppSk): TemplateResult[] => {
-    const ret: TemplateResult[] = [];
+    const ret: TemplateResult[] = [
+      html`<uniform-fps-sk></uniform-fps-sk>`, // Always start with the fps control.
+    ];
     const node = ele.shaderNode;
     if (!node) {
       return ret;
@@ -257,10 +258,7 @@
         </div>
       </div>
       <div id=shaderControls>
-        <div id=fps>
-          ${ele.fps.fps.toFixed(0)} fps
-        </div>
-        <div id=uniformControls>
+        <div id=uniformControls @input=${ele.uniformControlsChange} @change=${ele.uniformControlsChange}>
           ${ShadersAppSk.uniformControls(ele)}
         </div>
         <button
@@ -387,6 +385,7 @@
 
       const predefinedUniformValues = new Array(this.shaderNode!.numPredefinedUniformValues).fill(0);
       this.setUniformValuesToControls(predefinedUniformValues.concat(this.shaderNode!.currentUserUniformValues));
+      this.findAllUniformControlsThatNeedRAF();
 
       this.run();
     } catch (error) {
@@ -451,9 +450,17 @@
   }
 
   /** Populate the uniforms values from the controls. */
-  private getUniformValuesFromControls(): number[] {
+  private getUserUniformValuesFromControls(): number[] {
     const uniforms: number[] = new Array(this.shaderNode!.getUniformFloatCount()).fill(0);
-    $('#uniformControls > *').forEach((control) => {
+    $('#uniformControls > *').slice(numPredefinedUniformControls).forEach((control) => {
+      (control as unknown as UniformControl).applyUniformValues(uniforms);
+    });
+    return uniforms.slice(this.shaderNode?.numPredefinedUniformValues || 0);
+  }
+
+  private getPredefinedUniformValuesFromControls(): number[] {
+    const uniforms: number[] = new Array(this.shaderNode!.getUniformFloatCount()).fill(0);
+    $('#uniformControls > *').slice(0, numPredefinedUniformControls).forEach((control) => {
       (control as unknown as UniformControl).applyUniformValues(uniforms);
     });
     return uniforms;
@@ -466,38 +473,33 @@
     });
   }
 
-  private getCurrentUserUniformValues(uniforms: number[]): number[] {
-    if (this.shaderNode) {
-      return uniforms.slice(this.shaderNode.numPredefinedUniformValues);
-    }
-    return [];
+  private findAllUniformControlsThatNeedRAF(): void {
+    this.uniformControlsNeedingRAF = [];
+    $('#uniformControls > *').forEach((control) => {
+      const uniformControl = (control as unknown as UniformControl);
+      if (uniformControl.needsRAF()) {
+        this.uniformControlsNeedingRAF.push(uniformControl);
+      }
+    });
   }
 
-  private getPredefinedUniformValues(uniforms: number[]): number[] {
-    if (this.shaderNode) {
-      return uniforms.slice(0, this.shaderNode.numPredefinedUniformValues);
-    }
-    return [];
+  private uniformControlsChange() {
+    this.shaderNode!.currentUserUniformValues = this.getUserUniformValuesFromControls();
+    this._render();
   }
 
   private drawFrame() {
-    this.fps.raf();
     this.kit!.setCurrentContext(this.canvasKitContext);
-    const uniformsArray = this.getUniformValuesFromControls();
-
-    // TODO(jcgregorio) Change this to be event driven.
-    this.shaderNode!.currentUserUniformValues = this.getCurrentUserUniformValues(uniformsArray);
-
-    const shader = this.shaderNode!.getShader(this.getPredefinedUniformValues(uniformsArray));
+    const shader = this.shaderNode!.getShader(this.getPredefinedUniformValuesFromControls());
     if (!shader) {
       errorMessage('Failed to get shader.', 0);
       return;
     }
 
     // Allow uniform controls to update, such as uniform-timer-sk.
-    // TODO(jcgregorio) This is overkill, allow controls to register for a 'raf'
-    //   event if they need to update frequently.
-    this._render();
+    this.uniformControlsNeedingRAF.forEach((element) => {
+      element.onRAF();
+    });
 
     // Draw the shader.
     this.canvas!.clear(this.kit!.BLACK);