diff --git a/light9/fade/Light9EffectFader.ts b/light9/fade/Light9EffectFader.ts
new file mode 100644
--- /dev/null
+++ b/light9/fade/Light9EffectFader.ts
@@ -0,0 +1,124 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { NamedNode } from "n3";
+import { getTopGraph } from "../web/RdfdbSyncedGraph";
+import { showRoot } from "../web/show_specific";
+import { SyncedGraph } from "../web/SyncedGraph";
+import { meter } from "./Light9FadeUi";
+export { Light9Fader } from "./Light9Fader";
+
+
+@customElement("light9-effect-fader")
+export class Light9EffectFader extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: inline-block;
+        border: 2px gray outset;
+        background: #272727;
+      }
+      light9-fader {
+        margin: 4px;
+        width: 100%;
+      }
+    `,
+  ];
+  render() {
+    return html`
+      <light9-fader .value=${this.value} @change=${this.onSliderInput}></light9-fader>
+      <div>${this.value.toPrecision(3)}</div>
+      <div>eff: <edit-choice nounlink .uri=${this.effect} @edited=${this.onEffectChange}></edit-choice></div>
+      <div>attr: <edit-choice nounlink .uri=${this.effectAttr} @edited=${this.onEffectAttrChange}></edit-choice></div>
+      <div>Slider ${this.column}</div>
+    `;
+  }
+
+  graph?: SyncedGraph;
+  ctx: NamedNode = new NamedNode(showRoot + "/fade");
+  @property() uri!: NamedNode;
+  @property() column!: string;
+  @property() effect?: NamedNode;
+  @property() effectAttr?: NamedNode;
+  @state() setting?: NamedNode;
+
+  @property() value: number = 0.0;
+
+  constructor() {
+    super();
+    getTopGraph().then((g) => {
+      this.graph = g;
+      this.graph.runHandler(this.compile.bind(this, this.graph), `config ${this.uri.value}`);
+      this.graph.runHandler(this.compileValue.bind(this, this.graph), `valueSync ${this.uri.value}`);
+    });
+  }
+
+  private compile(graph: SyncedGraph) {
+    const U = graph.U();
+    if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
+      // not loaded yet, perhaps
+      this.column = "unset";
+      this.effect = undefined;
+      this.effectAttr = undefined;
+      return;
+    }
+    this.column = graph.stringValue(this.uri, U(":column"));
+    this.effect = graph.uriValue(this.uri, U(":effect"));
+    this.setting = graph.uriValue(this.uri, U(":setting"));
+    if (this.setting !== undefined) {
+      try {
+        this.effectAttr = graph.uriValue(this.setting, U(":effectAttr"));
+      } catch (e) {
+        this.effectAttr = undefined;
+      }
+    }
+  }
+
+  private compileValue(graph: SyncedGraph) {
+    const U = graph.U();
+    if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
+      // not loaded yet
+      // console.timeEnd(`valueSync ${this.uri.value}`)
+      return;
+    }
+    const st = graph.uriValue(this.uri, U(":setting"));
+    this.value = graph.floatValue(st, graph.Uri(":value"));
+  }
+
+  onSliderInput(ev: CustomEvent) {
+    if (this.graph === undefined) {
+      return;
+    }
+    const U = this.graph.U();
+    const prev = this.value;
+    const v: number = ev.detail.value;
+    this.value = parseFloat(v.toPrecision(3)); // rewrite pls
+    if (this.value == prev) {
+      return;
+    }
+    meter.tick();
+    if (!this.setting) {
+      throw new Error("can't make new settings yet");
+    }
+    this.graph.patchObject(this.setting, this.graph.Uri(":value"), this.graph.LiteralRoundedFloat(this.value), this.ctx);
+  }
+
+  onEffectChange(ev: CustomEvent) {
+    if (this.graph === undefined) {
+      return;
+    }
+    const { newValue } = ev.detail;
+    this.graph.patchObject(this.uri, this.graph.Uri(":effect"), newValue, this.ctx);
+  }
+
+  onEffectAttrChange(ev: CustomEvent) {
+    if (this.graph === undefined) {
+      return;
+    }
+    const { newValue } = ev.detail;
+    if (this.setting === undefined) {
+      this.setting = this.graph.nextNumberedResource(this.graph.Uri(":fade_set"));
+      this.graph.patchObject(this.uri, this.graph.Uri(":setting"), this.setting, this.ctx);
+    }
+    this.graph.patchObject(this.setting, this.graph.Uri(":effectAttr"), newValue, this.ctx);
+  }
+}
diff --git a/light9/fade/Light9FadeUi.ts b/light9/fade/Light9FadeUi.ts
--- a/light9/fade/Light9FadeUi.ts
+++ b/light9/fade/Light9FadeUi.ts
@@ -1,16 +1,16 @@
 import debug from "debug";
 import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { NamedNode } from "n3";
 import { getTopGraph } from "../web/RdfdbSyncedGraph";
-import { shortShow, showRoot } from "../web/show_specific";
+import { shortShow } from "../web/show_specific";
 import { SyncedGraph } from "../web/SyncedGraph";
 export { EditChoice } from "../web/EditChoice";
-export { Light9Fader } from "./Light9Fader";
+export { Light9EffectFader } from "./Light9EffectFader";
 
 debug.enable("*");
 const log = debug("fade");
-let meter: FPSMeter;
+export let meter: FPSMeter;
 
 @customElement("light9-fade-ui")
 export class Light9FadeUi extends LitElement {
@@ -62,117 +62,4 @@ export class Light9FadeUi extends LitEle
   }
 }
 
-@customElement("light9-effect-fader")
-export class Light9EffectFader extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: inline-block;
-        border: 2px gray outset;
-        background: #272727;
-      }
-      light9-fader {
-        margin: 4px;
-        width: 100%;
-      }
-    `,
-  ];
-  render() {
-    return html`
-      <light9-fader .value=${this.value} @change=${this.onSliderInput}></light9-fader>
-      <div>${this.value.toPrecision(3)}</div>
-      <div>eff: <edit-choice .uri=${this.effect} @edited=${this.onEffectChange}></edit-choice></div>
-      <div>attr: <edit-choice .uri=${this.effectAttr} @edited=${this.onEffectAttrChange}></edit-choice></div>
-      <div>&lt;=&gt; Slider ${this.column}</div>
-    `;
-  }
 
-  graph?: SyncedGraph;
-  ctx: NamedNode = new NamedNode(showRoot + "/fade");
-  @property() uri!: NamedNode;
-  @property() column!: string;
-  @property() effect?: NamedNode;
-  @property() effectAttr?: NamedNode
-  @state() setting?: NamedNode;
-
-  @property() value: number = 0.0;
-
-  constructor() {
-    super();
-    getTopGraph().then((g) => {
-      this.graph = g;
-      this.graph.runHandler(this.compile.bind(this, this.graph), `config ${this.uri.value}`);
-      this.graph.runHandler(this.compileValue.bind(this, this.graph), `valueSync ${this.uri.value}`);
-    });
-  }
-
-  private compile(graph: SyncedGraph) {
-    const U = graph.U();
-    if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
-      // not loaded yet, perhaps
-      this.column = "unset";
-      this.effect = undefined;
-      this.effectAttr = undefined;
-      return;
-    }
-    this.column = graph.stringValue(this.uri, U(":column"));
-    this.effect = graph.uriValue(this.uri, U(":effect"));
-    this.setting = graph.uriValue(this.uri, U(":setting"));
-    if (this.setting !== undefined) {
-      try {
-        this.effectAttr = graph.uriValue(this.setting, U(":effectAttr"));
-      } catch (e) {
-        this.effectAttr = undefined;
-      }
-    }
-  }
-
-  private compileValue(graph: SyncedGraph) {
-    const U = graph.U();
-    if (!graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
-      // not loaded yet
-      // console.timeEnd(`valueSync ${this.uri.value}`)
-      return;
-    }
-    const st = graph.uriValue(this.uri, U(":setting"));
-    this.value = graph.floatValue(st, graph.Uri(":value"));
-  }
-
-  onSliderInput(ev: CustomEvent) {
-    if (this.graph === undefined) {
-      return;
-    }
-    const U = this.graph.U();
-    const prev = this.value;
-    const v: number = ev.detail.value;
-    this.value = parseFloat(v.toPrecision(3)); // rewrite pls
-    if (this.value == prev) {
-      return;
-    }
-    meter.tick();
-    if (!this.setting) {
-      throw new Error("can't make new settings yet");
-    }
-    this.graph.patchObject(this.setting, this.graph.Uri(":value"), this.graph.LiteralRoundedFloat(this.value), this.ctx);
-  }
-
-  onEffectChange(ev: CustomEvent) {
-    if (this.graph === undefined) {
-      return;
-    }
-    const { newValue } = ev.detail;
-    this.graph.patchObject(this.uri, this.graph.Uri(":effect"), newValue, this.ctx);
-  }
-
-  onEffectAttrChange(ev: CustomEvent) {
-    if (this.graph === undefined) {
-      return;
-    }
-    const { newValue } = ev.detail;
-    if (this.setting === undefined) {
-      this.setting = this.graph.nextNumberedResource(this.graph.Uri(":fade_set"));
-      this.graph.patchObject(this.uri, this.graph.Uri(":setting"), this.setting, this.ctx);
-    }
-    this.graph.patchObject(this.setting, this.graph.Uri(":effectAttr"), newValue, this.ctx);
-  }
-}