diff --git a/www/hown/README.md b/www/hown/README.md
new file mode 100644
index 0000000..ebb9434
--- /dev/null
+++ b/www/hown/README.md
@@ -0,0 +1,2 @@
+# Html With Nix (HOWN/hown)
+Hown is a system for static html/css compilation with the NixExpr language.
diff --git a/www/hown/default.nix b/www/hown/default.nix
new file mode 100644
index 0000000..fc335f0
--- /dev/null
+++ b/www/hown/default.nix
@@ -0,0 +1,6 @@
+{mix, ...} @ inputs:
+mix.newMixture inputs (mixture: {
+  includes.public = [
+    ./tty.nix
+  ];
+})
diff --git a/www/hown/index.html b/www/hown/index.html
new file mode 100644
index 0000000..4e161b4
--- /dev/null
+++ b/www/hown/index.html
@@ -0,0 +1,8 @@
+      <!-->
+        {Text, mkTypingEffect, ...}:
+        mkTypingEffect {
+          head = Text "$ Do butterflies cry when they're sad?";
+          body = Text "Segmentation fault (core dumped)";
+        }
+      <-->
+
diff --git a/www/hown/tty.nix b/www/hown/tty.nix
new file mode 100644
index 0000000..34741b6
--- /dev/null
+++ b/www/hown/tty.nix
@@ -0,0 +1,100 @@
+# XXX: TODO: The howl.Div, howl.Text, ... types implement
+# XXX: TODO: the HtmlTag' typeclass, which in turn implements
+# XXX: TODO: a morphism to the nt.String type. This makes compiling
+# XXX: TODO: to html super duper simple!!
+{
+  nt,
+  howl,
+  ...
+}: let
+  inherit
+    (nt)
+    projectOnto
+    ;
+
+  inherit
+    (howl)
+    # HTML
+    Div
+    Text
+    # CSS
+    StyleClass
+    StyleSheet
+    ContinuousAnimation
+    DiscreteAnimation
+    ;
+in {
+  typing = StyleSheet {
+    include = [./tty.css];
+
+    classes = {
+      typing-wrapper = null;
+      typing-prompt = promptLength: commandLength: duration: period:
+        StyleClass {
+          width = promptLength + commandLength; # ignore cursor
+          border.right = "TODO"; # cursor
+
+          # hide what the animation hasn't shown yet
+          whitespace = "nowrap";
+          overflow = "hidden";
+
+          # run typing animation then start cursor blink
+          animations = [
+            (DiscreteAnimation {
+              inherit duration;
+              keyframes = {
+                "0"
+              };
+            })
+          ];
+        };
+      typing-result = typingDuration: delay:
+        StyleClass {
+          visibility = "hidden";
+          whitespace = "pre-wrap"; # preserve linebreaks
+
+          # show result once typing duration + delay is over
+          animations = [
+            (ContinuousAnimation {
+              name = "unhide-result";
+              duration = 1; # animation-duration
+              # timingFn = ; # animation-timing-function
+              delay = typingDuration + delay; # animation-delay
+              # animation-iteration-count
+              direction = "forwards"; # animation-direction
+              # animation-fill-mode
+              # animation-play-state
+              keyframes = {
+                "100" = {
+                  visibility = "visible";
+                };
+              };
+            })
+          ];
+        };
+    };
+  };
+
+  mkTypingEffect = decl': let
+    decl =
+      decl'
+      |> projectOnto
+      {
+        head = "";
+        body = "";
+      };
+  in
+    Div {
+      id = "typing-wrapper";
+      content = [
+        (Div {
+          id = "typing-prompt";
+          content = Text decl.head;
+        })
+        (Div {
+          id = "typing-result";
+          content = Text decl.body;
+        })
+      ];
+    };
+}