diff --git a/PetMe64.woff b/PetMe64.woff
new file mode 100644
index 0000000..de805c8
Binary files /dev/null and b/PetMe64.woff differ
diff --git a/index.html b/index.html
index 069730f..ee1aa9f 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,6 @@
         Image pause / manual advance
         Different colour palettes
         External respacks
-        Change short blackout to beat length / 1.7 + change image
         Blur into blackout? iunno
     -->
     <head>
@@ -25,7 +24,7 @@
         <script type="text/javascript" src="audioUtils.js"></script>
         <script type="text/javascript">
             //debug
-            var skipPreloader = true;
+            var skipPreloader = false;
             
             var filesLoaded = 0;
             var initialLoad = 0;
@@ -90,6 +89,7 @@
          
             audio.stop = function() {
                 if (audio.current_song && audio.current_song._playing) {
+                    updateBeatView(0);
                     audio.current_song.stop();
                     audio.current_song = null;
                 }
@@ -171,7 +171,8 @@
                 for(var beatTime = audio.beat_pointer * cur._beatWidth; beatTime < now;
                         beatTime = ++audio.beat_pointer * cur._beatWidth) {
                     var beat = getBeat(audio.beat_pointer);
-                    handleBeat(beat, audio.beat_pointer, RequestNextColor(), nCurrentColor, cur);
+                    var c = RequestNextColor();
+                    handleBeat(beat, audio.beat_pointer, cur);
                 }
             }
             
@@ -182,7 +183,7 @@
                 document.getElementById("beetLeft").innerHTML = beatLine.split("").reverse().join("");
             }
             
-            function handleBeat(beat, bp, c, cc, current) {
+            function handleBeat(beat, bp, current) {
                 // we have changed song since we were scheduled
                 if(current != audio.current_song)
                     return;
@@ -197,35 +198,55 @@
                     accent.offsetWidth = accent.offsetWidth;
                     accent.className = "beetView fade";
                     
-                    if(beat == '|') {
-                        shortBlackout = true;
+                    switch(beat) {
+                    case 'X':
+                    case 'x':
+                        waifuCanvas.yBlur();
+                        break;
+                    case 'O':
+                    case 'o':
+                        waifuCanvas.xBlur();
+                        break;
+                    case '+':
+                        waifuCanvas.xBlur();
                         waifuCanvas.blackout();
-                        return;
+                        break;
+                    case '¤':
+                        waifuCanvas.xBlur();
+                        waifuCanvas.blackout(true);
+                        break;
+                    case '|':
+                        waifuCanvas.shortBlackout(current._beatWidth);
+                        waifuCanvas.setColour(RequestNextColor());
+                        document.getElementById("colourName").innerHTML = colors[nCurrentColor];
+                        break;
+                    case ':':
+                        waifuCanvas.setColour(RequestNextColor());
+                        document.getElementById("colourName").innerHTML = colors[nCurrentColor];
+                        break;
+                    case '*':
+                        // if isFullAuto
+                        waifuCanvas.newWaifu();
+                        document.getElementById("waifuName").innerHTML = waifus[nCurrentWaifu].name;
+                        break;
+                    case '=':
+                        // if isFullAuto
+                        waifuCanvas.newWaifu();
+                        document.getElementById("waifuName").innerHTML = waifus[nCurrentWaifu].name;
+                    case '~':
+                        // TODO colour fade
+                        break;
                     }
-                    if(beat == '+') {
-                        waifuCanvas.blackout();
-                        return;
-                    } else {
+                    if ([".", "+", "|", "¤"].indexOf(beat) == -1) {
                         waifuCanvas.clearBlackout();
                     }
-                    if(beat != ':' && beat != 'O' && beat != 'X') {
+                    if([".", "+", ":", "*", "X", "O", "~", "="].indexOf(beat) == -1) {
+                        waifuCanvas.setColour(RequestNextColor());
+                        document.getElementById("colourName").innerHTML = colors[nCurrentColor];
+                        // if isFullAuto
                         waifuCanvas.newWaifu();
                         document.getElementById("waifuName").innerHTML = waifus[nCurrentWaifu].name;
                     }
-                    if(beat != '*' && beat != 'X' && beat != 'O') {
-                        waifuCanvas.setColour(c);
-                        document.getElementById("colourName").innerHTML = colors[cc];
-                    }
-                    if(beat.toLowerCase() == 'o') {
-                        waifuCanvas.xBlur();
-                    }
-                    if(beat.toLowerCase() == 'x') {
-                        waifuCanvas.yBlur();
-                    }
-                }
-                if(shortBlackout) {
-                    waifuCanvas.clearBlackout();
-                    shortBlackout = false;
                 }
             }
             
@@ -265,6 +286,7 @@
                     // get around issues on mobile where pointer-events don't work
                     document.getElementById("preloader").style.display = "none";
                     document.getElementById("waifu").className = "loaded"
+                    updateBeatView(-1);
                     // free dat memory
                     preloaderSong = null;
                 }
@@ -344,7 +366,7 @@
         </div>
         <div class="ui" id="beets">
             <div class="beetView" id="beetLeft"></div>
-            <div class="beetView" id="beetAccent"></div>
+            <div class="beetView fade" id="beetAccent">X</div>
             <div class="beetView" id="beetRight"></div>
         </div>
         <canvas id="waifu" width="1280" height="720"></canvas>
diff --git a/style.css b/style.css
index 8bef540..d8ce6f5 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,13 @@
+@font-face {
+  font-family: 'PetMe64Web';
+  font-style: normal;
+  font-weight: normal;
+  -webkit-font-smoothing: none;
+  font-smooth: never;
+  src: local("PetMe64Web");
+  src: local('Pet Me 64'), local('Pet Me 64'), url("PetMe64.woff") format('woff');
+}
+
 html, body {
     height: 100%;
     margin: 0; padding: 0;
@@ -9,12 +19,14 @@ body {
 }
 
 .ui {
-    background-color:#ffffff;
-    font-family: monospace;
+    border: 3px solid #000;
+    background-color: rgba(200,200,200,0.5);
+    font-family: 'PetMe64Web';
     position: absolute;
     left: 50%;
     transform: translate(-50%, 0);
     z-index: 3;
+    padding: 5px;
 }
 
 #controls {
@@ -23,21 +35,65 @@ body {
 
 #beets {
     top: 0px;
+    height: 20px;
+    overflow:hidden;
+    #display:table-cell;
+    #vertical-align:middle;
+    #padding: 5px;
 }
 
 .beetView {
-    float: left;
+    position: relative;
+    top: -50%;
+    display: inline-block;
+    padding: 0px;
+    background: #333;
+    color: #FFF;
+    #display: table-cell;
+    #vertical-align: middle;
+    #background-color: rgba(0,0,0,0.7);
+    #color: #FFF;
+    #border-radius: 13px 13px 13px 13px;
+    #-moz-border-radius: 13px 13px 13px 13px;
+    #-webkit-border-radius: 13px 13px 13px 13px;
+    #border: 0px none #000000;
+}
+
+#beetLeft {
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-bottom-left-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    -moz-border-radius-bottomleft: 5px;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    padding-right: 10px;
+}
+
+#beetRight {
+    margin-left: -10px;
+    -webkit-border-top-right-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    -moz-border-radius-topright: 5px;
+    -moz-border-radius-bottomright: 5px;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    padding-left: 10px;
 }
 
 #beetAccent {
-    font-size: 50px;
-    opacity: 1;
+    #font-size: 40px;
+    margin-left: -10px;
+    font-size: 2em;
+    color: rgba(255,255,255,1);
+    z-index: 2;
+    padding: 7px;
+    border-radius: 50%;
 }
 
 #beetAccent.fade {
-    animation-name: fadeout;
+    animation-name: textfadeout;
     animation-duration: 0.2s;
-    opacity: 0;
+    color: rgba(255,255,255,0);
 }
 
 #waifu {
@@ -66,7 +122,7 @@ body {
     display:flex;
     justify-content:center;
     align-items:center;
-    font-family: monospace;
+    font-family: 'PetMe64Web';
     font-size: 30pt;
     
     position: absolute;
@@ -90,4 +146,8 @@ body {
 @keyframes fadeout {
     from {opacity: 1;}
     to {opacity: 0;}
+}
+@keyframes textfadeout {
+    from {color: rgba(255,255,255,1);}
+    to {color: rgba(255,255,255,0);}
 }
\ No newline at end of file
diff --git a/waifuCanvas.js b/waifuCanvas.js
index 697ac92..060e21d 100644
--- a/waifuCanvas.js
+++ b/waifuCanvas.js
@@ -4,13 +4,7 @@ var needsRedraw = false;
 var waifuImgs = new Array();
 var waifuColour = "#FFF";
 
-// constant
-var blurIterations = 20; // quality
-var blurMin = -blurIterations/2;
-var blurMax = blurIterations/2;
-var blurAlpha = 1/(blurIterations/2);
-var blurDecay = 25;
-var blurAmount = 15;
+var blurDecay, blurAmount, blurIterations, blurMin, blurMax, blurDelta; // set later
 // dynamic
 var blurStart = 0;
 var blurDistance = 0;
@@ -19,10 +13,16 @@ var yBlur = false;
 
 var blackout = false;
 var shortBlackout = false;
+var blackoutColour = "#000"; // for the whiteout character
+var blackoutTimeout;
 
 waifuCanvas = {};
 
 waifuCanvas.init = function() {
+    waifuCanvas.blendMode = "hard-light";
+    waifuCanvas.setBlurAmount(15);
+    waifuCanvas.setBlurIterations(31);
+    waifuCanvas.setBlurDecay(25);
     canvas = document.getElementById("waifu").getContext("2d");
     window.addEventListener('resize', waifuCanvas.resize);
     waifuCanvas.resize();
@@ -47,16 +47,22 @@ waifuCanvas.preload = function() {
 
 waifuCanvas.redraw = function() {
     var offset; // for centering/right/left align
+    var bOpacity;
     var width = canvas.canvas.width;
     var image = waifuImgs[nCurrentWaifu];
+    
+    var cTime = audio.context.currentTime;
     // white BG for the hard light filter
     canvas.globalAlpha = 1;
     canvas.globalCompositeOperation = "source-over";
     if(blackout) {
-        canvas.fillStyle = "#000";
-        canvas.fillRect(0,0,width,720);
-        needsRedraw = false;
-        return;
+        bOpacity = (cTime - blackoutStart)*10; // original is 3 frames, this is close
+        if(bOpacity > 1) { // optimise the draw
+            canvas.fillStyle = blackoutColour;
+            canvas.fillRect(0,0,width,720);
+            needsRedraw = false;
+            return;
+        }
     } else {
         canvas.fillStyle = "#FFF";
         canvas.fillRect(0,0,width,720);
@@ -75,15 +81,15 @@ waifuCanvas.redraw = function() {
     }
     if(xBlur || yBlur) {
         canvas.globalAlpha = blurAlpha;
-        var delta = audio.context.currentTime - blurStart;
+        var delta = cTime - blurStart;
         blurDistance = blurAmount * Math.exp(-blurDecay * delta);
     }
     if(xBlur) {
-        for(var i=blurMin; i<=blurMax; i++) {
+        for(var i=blurMin; i<=blurMax; i+= blurDelta) {
             canvas.drawImage(image, Math.floor(blurDistance * i) + offset, 0);
         }
     } else if(yBlur) {
-        for(var i=blurMin; i<=blurMax; i++) {
+        for(var i=blurMin; i<=blurMax; i+= blurDelta) {
             canvas.drawImage(image, offset, Math.floor(blurDistance * i));
         }
     } else {
@@ -92,13 +98,22 @@ waifuCanvas.redraw = function() {
     }
     canvas.globalAlpha = 0.7;
     canvas.fillStyle = waifuColour;
-    canvas.globalCompositeOperation = "hard-light";
+    canvas.globalCompositeOperation = waifuCanvas.blendMode;
     canvas.fillRect(0,0,width,720);
-    
-    needsRedraw = false;
+    if(blackout) {
+        canvas.globalAlpha = bOpacity;
+        canvas.fillStyle = blackoutColour;
+        canvas.fillRect(0,0,width,720);
+        needsRedraw = true;
+    } else {
+        needsRedraw = false;
+    }
 }
 
 waifuCanvas.animationLoop = function() {
+    if(blackoutTimeout && audio.context.currentTime > blackoutTimeout) {
+        waifuCanvas.clearBlackout();
+    }
     if(blurStart && blurDistance < 0.3) {
         blurDistance = 0;
         blurStart = 0;
@@ -121,7 +136,15 @@ waifuCanvas.setColour = function(colour) {
     needsRedraw = true;
 }
 
-waifuCanvas.blackout = function() {
+waifuCanvas.blackout = function(whiteout) {
+    if (typeof(whiteout)==='undefined') whiteout = false;
+    if(whiteout) {
+        blackoutColour = "#FFF";
+    } else {
+        blackoutColour = "#000";
+    }
+    blackoutTimeout = 0; // indefinite
+    blackoutStart = audio.context.currentTime;
     blackout = true;
     needsRedraw = true;
 }
@@ -129,9 +152,18 @@ waifuCanvas.blackout = function() {
 // for song changes
 waifuCanvas.clearBlackout = function() {
     blackout = false;
+    blackoutTimeout = 0;
     needsRedraw = true;
 }
 
+waifuCanvas.shortBlackout = function(beatTime) {
+    waifuCanvas.blackout();
+    GetRandomWaifu();
+    blackoutTimeout = audio.context.currentTime + beatTime / 1.7;
+    // looks better if we go right to black
+    blackoutStart = 0;
+}
+
 waifuCanvas.xBlur = function() {
     blurStart = audio.context.currentTime;
     blurDistance = blurAmount;
@@ -146,4 +178,20 @@ waifuCanvas.yBlur = function() {
     xBlur = false;
     yBlur = true;
     needsRedraw = true;
+}
+
+waifuCanvas.setBlurDecay = function(decay) {
+    blurDecay = decay;
+}
+
+waifuCanvas.setBlurIterations = function(iterations) {
+    blurIterations = iterations;
+    blurDelta = blurAmount / blurIterations;
+    blurAlpha = 1/(blurIterations/2);
+}
+
+waifuCanvas.setBlurAmount = function(amount) {
+    blurAmount = amount;
+    blurMin = -blurAmount/2;
+    blurMax = blurAmount/2;
 }
\ No newline at end of file
