diff --git a/pch/name-color-promo.toml b/pch/name-color-promo.toml
new file mode 100644
index 0000000..5c66b91
--- /dev/null
+++ b/pch/name-color-promo.toml
@@ -0,0 +1,73 @@
+version = 1
+
+[[modules]]
+plugin = 'source.text'
+data.contents = '''
+drag to see the wonderful, magical, beautiful, awesome and transformative awesome wonder of the <span style="font-family: serif">name-color</span> system that is wonderful:
+<div id=main>
+  <div id=example>
+  <p>did you know that <span style="color: #3eba73">@webark</span> was originally created by <span style="color: #008282">@mehbark</span>? it's true! nowadays, <span style="color: #3eba73">@webark</span> has many members, commonly referred to internally as "shards," such as <span style="color: #ff007b">@auramgold</span>, <span style="color: #008282">@mehbark</span>, and <span style="color: #134c93">@testbark</span> (okay, not that last one).</p>
+  <p>
+    due to their inevitably tumultuous nature, <span style="color: #3eba73">@webark</span> and its spinoffs, such as @webark-meta and <span style="color: #ffdddd">@diarrhea-dogblast</span>, are known to change handles often. they have even swapped in the past. not many accounts have name-colors so uh shout out to <span style="color: #39B366">@LemmaEOF</span>
+  </p>
+  </div>
+    <div id=slider-holder>
+    <div id=ungrey></div>
+    <div id=greyer></div>
+  </div>
+</div>'''
+data.language = 'html'
+sends = [2]
+title = 'html'
+
+[[modules]]
+plugin = 'source.lesscss'
+data.contents = '''
+#main {
+  display: grid;
+  width: min(80%, 12cm);
+  max-width: auto;
+  margin: 0 auto;
+}
+
+#main > * {
+  grid-area: 1/1;
+}
+
+#slider-holder {
+  height: 100%;
+  display: flex;
+  max-width: 100%;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+#ungrey {
+  width: 10%;
+  height: 100%;
+  overflow: hidden;
+  resize: horizontal;
+  border-right: 2px solid rgb(var(--color-cherry));
+  max-width: 100%;
+  min-width: 0;
+  pointer-events: all;
+}
+
+#greyer {
+  backdrop-filter: grayscale(1);
+  height: 100%;
+  flex: 1;
+  max-width: auto;
+  min-width: 0;
+}'''
+sends = [2]
+
+[[modules]]
+plugin = 'transform.style-inliner'
+data.mode = 'attr'
+sends = ['output']
+
+[[modules]]
+plugin = 'source.lesscss'
+data.contents = ''
+graphPos = [-120, 192]