diff --git a/README.md b/README.md
index 09c527c..a97faa3 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ Missing documentation.
 ### & Typographe
 Missing documentation.
 - Parameters: `Position` `Color` `Value` 
-- Variables: `text` 
+- Variables: `text` `font` 
 
 ### _ Stroke
 Missing documentation.
@@ -78,6 +78,13 @@ Missing documentation.
 - Parameters: 
 - Variables: 
 
+## Filters
+### stencil
+### rotate
+### invert
+### chromatic
+
+
 ## Units
 ```
 5                                 ; value:    5
diff --git a/sources/scripts/filters/_offset.js b/sources/scripts/filters/_offset.js
deleted file mode 100644
index 72b0d07..0000000
--- a/sources/scripts/filters/_offset.js
+++ /dev/null
@@ -1,19 +0,0 @@
-Filter.prototype.filter_offset = function(pixels = this.pixels(),p = null)
-{
-  var v = 255; // defaults to 255 if no parameter specified
-  if (p.length > 0 && p[0]) {
-      v = parseInt(p[0]);
-      // permissible range is 0 <= v <= 255
-      if (v > 255) { v = 255;} 
-      if (v < 0) { v = 0;}
-  }
-  var d = pixels.data;
-
-  for (var i=0; i<d.length; i+=4) {
-      for (var j=0; j<3; j++) {
-          d[i+j] = v - d[i+j];
-      }
-  }
-	ronin.canvas.clear();
-	ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
-}
diff --git a/sources/scripts/filters/stencil.js b/sources/scripts/filters/stencil.js
index 49d420c..7b1e944 100644
--- a/sources/scripts/filters/stencil.js
+++ b/sources/scripts/filters/stencil.js
@@ -1,7 +1,7 @@
 function Filter_Stencil()
 {
   Filter.call(this);
-  this.parameters = [Angle];
+  this.parameters = [Angle,Color];
 
   this.render = function(cmd)
   {
diff --git a/sources/scripts/modules/help.js b/sources/scripts/modules/help.js
index e8af8fc..5e5f2e9 100644
--- a/sources/scripts/modules/help.js
+++ b/sources/scripts/modules/help.js
@@ -7,71 +7,103 @@ function Help(rune)
     var w = window.open('about:blank','image from canvas');
     var html = "";
     html += this.view_intro();
+    html += this.view_controls();
     html += this.view_modules();
+    html += this.view_filters();
     html += this.view_units();
     html += this.view_presets();
-    w.document.write("<title>Help</title><style>body { font-size:11px;background:#fff; color:#000; padding:10px} pre {}</style><pre>"+html+"</pre>");
+    w.document.write("<title>Help</title><style>body { font-size:11px;background:#111; color:#fff; padding:20px} pre { font-family:Monaco,Courier} pre div{ border-left:5px solid #222; padding-left:20px;} pre div b { text-decoration:underline; color:#999; font-weight:normal} pre div i { font-style:normal; color:#72dec2}</style><pre>"+html+"</pre>");
   }
   
   //
 
   this.view_intro = function()
   {
-    var html = "# Ronin\n## Basics\nRonin is a web based drawing application and visual language. Launch Ronin and press **:**(colon) to display the command prompt. \n```\n:\n```\n";
+    var html = "Ronin\n\n";
+    html += "<div>Ronin is a drawing application and visual language. \nLaunch Ronin and press <b>:</b> to display the command prompt.</div>\n";
 
-    html += "### Controls\n";
-    html += "```\nctrl                              ; Draw Overlays\nalt                               ; Drag Surface\nshift                             ; Erase\nshift+ctrl                        ; Eyedrop\nshift+alt                         ; Move Layer\n```\n";
+    return html;
+  }
+
+  this.view_controls = function()
+  {
+    html = "Controls\n\n";
+    html += "<div>";
+    html += pad("ctrl",20)+"Draw Overlays\n";
+    html += pad("alt",20)+"Drag Surface\n";
+    html += pad("shift",20)+"Erase\n";
+    html += pad("shift+ctrl",20)+"Eyedrop\n";
+    html += pad("shift+alt",20)+"Move Layer\n";
+    html += "</div>";
+    html += "\n";
     return html;
   }
   
   this.view_modules = function()
   {
-    html = "## Modules\n";
+    html = "Modules\n\n";
+    html += "<div>";
     Object.keys(ronin.modules).forEach(function (key) {
-      html += "### "+key+" "+ronin.modules[key].constructor.name+"\n";
-      html += ronin.modules[key].docs+"\n";
-      html += "- Parameters: ";
+      var parameters = "";
+      html += pad("<i>"+key+"</i> "+ronin.modules[key].constructor.name,27);
       for (i = 0; i < ronin.modules[key].parameters.length; i++) {
-        html += "`"+ronin.modules[key].parameters[i].name+"` ";
+        html += "<b>"+ronin.modules[key].parameters[i].name+"</b> ";
       }
       html += "\n";
-      html += "- Variables: ";
-      for(var key in ronin.modules[key].variables){
-        html += "`"+key+"` ";
-      }
-      html += "\n\n";
     });
+    html += "</div>";
+    html += "\n";
     
     return html;
   }
 
+  this.view_filters = function()
+  {
+    html = "Filters\n\n";
+    html += "<div>";
+    for(var filter in ronin.modules["%"].collection){
+      html += pad(filter,20);
+      for (i = 0; i < ronin.modules["%"].collection[filter].parameters.length; i++) {
+        html += "<b>"+ronin.modules["%"].collection[filter].parameters[i].name+"</b> ";
+      }
+      html += "\n";
+    }
+    html += "</div>";
+    html += "\n";
+    return html
+  }
+
   this.view_units = function()
   {
-    html = "## Units\n";
-    html += "```\n5                                 ; value:    5\n5,7                               ; position: 5x 7y\n7x9                               ; rect:     7w 9h\n#ff0000                           ; color:    red\n0..5                              ; random:   0.0-5.0\n45'                               ; degree:   45/365\nrate=10                           ; variable: rate = 10\n```\n";
+    html = "Units\n\n";
+    html += "<div>";
+    html += pad("5",20)+"value: 5\n";
+    html += pad("5,7",20)+"position: 5x 7y\n";
+    html += pad("7x9",20)+"rect: 5w 7h\n";
+    html += pad("#ff0000",20)+"color: red\n";
+    html += pad("45'",20)+"degree: 45/365\n";
+    html += pad("rate=10",20)+"variable: rate=10\n";
+    html += "</div>";
+    html += "\n";
     return html;
   }
 
   this.view_presets = function()
   {
-    html = "## Presets\n";
-    html += "### Radial Brush\n";
-    html += "```\n# 8 strands\n> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'\n# 6 strands\n> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'\n```\n"
-    html += "### Symmetry Brush\n";
-    html += "```\n# XY\n> 400x 3\n# Angular brushes\n> 400x 1,1;> 400x 2,2;> 400x 3,3; > 1,1;> 2,2;> 3,3;\n```\n"
-    html += "### Angular Brush\n";
-    html += "```\n# Light\n> 1,1;> 2,2;> 3,3;> 4,4\n# Hard\n> 2,2;> 4,4;> 6,6;> 8,8\n# Symmetric Light\n> 1,1 600x;> 2,2 600x;> 3,3 600x;> 4,4 600x\n```\n";
-    html += "## Templates\n";
-    html += "### Watermark\n";
-    html += "```\n# 1280x720 ; / ../assets/photo.jpg 1280x 0,0 ; / ../assets/logo.png 60x60 20,640\n```\n";
-    html += "## vectors\n";
-    html += "### Ronin Logo\n";
-    html += "```\n+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black\n```\n";
-    html += "### A Circle\n";
-    html += "```\n+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0\n```\n";
-    html += "### Many Circles\n";
-    html += "```\n+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0\n```\n";
+    html = "Presets\n\n";
+    html += "<div>";
+    html += "Brushes\n";
+    html += pad("Radial Brush(8)",20)+"> 600,400 45';> 600,400 90';> 600,400 135';> 600,400 180';> 600,400 225';> 600,400 270';> 600,400 315'\n";
+    html += pad("Radial Brush(6)",20)+"> 600,400 60';> 600,400 120';> 600,400 180';> 600,400 240';> 600,400 300'\n";
+    html += pad("Symmetric Brush(XY)",20)+"> 400x 3\n";
+    html += pad("Angular brush",20)+"> 400x 1,1;> 400x 2,2;> 400x 3,3; > 1,1;> 2,2;> 3,3;\n";
 
+    html += "\nGraphics\n";
+    html += pad("Watermark",20)+"# 1280x720 ; / ../assets/photo.jpg 1280x 0,0 ; / ../assets/logo.png 60x60 20,640\n";
+    html += pad("Ronin Logo",20)+"+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black\n";
+    html += pad("Circle",20)+"+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0\n";
+    html += pad("Multiple Circles",20)+"+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0\n";
+    html += "</div>";
     return html;
   }