diff --git a/public/fonts/KFOkCnqEu92Fr1Mu51xIIzI.woff2 b/public/fonts/KFOkCnqEu92Fr1Mu51xIIzI.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..3791c883e8d0e8d3d5331b60584cf3869276cd43
Binary files /dev/null and b/public/fonts/KFOkCnqEu92Fr1Mu51xIIzI.woff2 differ
diff --git a/public/fonts/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 b/public/fonts/KFOlCnqEu92Fr1MmEU9fBBc4.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..8dceabcf6bdfdb0f09be31878c1ebfdd0be943ff
Binary files /dev/null and b/public/fonts/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 differ
diff --git a/public/theme.css b/public/theme.css
index f90784a53e1633bf97fa3d6a5376e812b6615f3f..a795d88100c0d9aacb37a59a8566058d13620b53 100644
--- a/public/theme.css
+++ b/public/theme.css
@@ -1,3 +1,29 @@
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Roboto Italic'), local('Roboto-Italic'), url(fonts/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(fonts/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(fonts/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+
 body, html {
   width: 100%;
   height: 100%;
@@ -6,7 +32,7 @@ body {
   background:white;
   font-size: 10pt;
   color: #000;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: "Roboto", "Helvetica Neue",Helvetica,Arial,sans-serif;
   line-height: 1.1;
   overflow: hidden;
   width: 100%;
@@ -191,8 +217,8 @@ div.eqn {
   width: 0.3em;
 }
 
-h1 {
-  
+h1, h2, b, h3, h4, .kw {
+  font-weight: 500;
 }
 h2:before {
   counter-increment: h2counter;
@@ -218,7 +244,6 @@ h3:before {
   counter-increment: h3counter;
 }
 .kw {
-  font-weight: bold;
   color: green;
 }
 .katex {
@@ -236,7 +261,7 @@ p, h4, .example {
   margin-top: 2px;
   margin-bottom: 0;
 }
-#reg02axis2{
+#reg02b1axis2{
   transform: rotate(150deg);
   transform-origin: 49.5% 50%;
 }
diff --git a/public/tsbb06.html b/public/tsbb06.html
index f6f9c06064e32f349294febc3ec522ded2181ec3..179237499f1d5efa59c6598d9c24349baff4e83c 100644
--- a/public/tsbb06.html
+++ b/public/tsbb06.html
@@ -301,38 +301,46 @@
                     <path d="M0,0 L0,6 L9,3 z" vector-effect="non-scaling-stroke"></path>
                   </marker>
                 </defs>
-                <g id="reg02axis">
-                  <line x1="0" y1="80%" x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
-                  <line x1="20%" y1="100%" x2="20%" y2="10" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>  
-                  <line x1="20%" y1="50%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line>
-                  <line x1="50%" y1="80%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line>
-                  <circle cx="20%" cy="80%" r="3" fill="#000"></circle>
-                  <foreignObject x="21%" y="80%"><span class="keq fltl">o</span></foreignObject>
-                  <foreignObject x="19%" y="45%"><span class="keq fltr">x_2</span></foreignObject>
-                  <foreignObject x="48%" y="80%"><span class="keq fltm">x_1</span></foreignObject>
+                <g id="reg02b1axis1">
+                  <g id="reg02b1axes">
+                    <line x1="0" y1="80%" x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
+                    <line x1="20%" y1="100%" x2="20%" y2="10" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>  
+                  </g>
+                  <g id="reg02b1ptax1">
+                    <line x1="20%" y1="50%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line>
+                    <line x1="50%" y1="80%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line>
+                    <foreignObject x="19%" y="45%"><span class="keq fltr">x_2</span></foreignObject>
+                    <foreignObject x="48%" y="80%"><span class="keq fltm">x_1</span></foreignObject>
+                    <foreignObject x="48%" y="50%"><span class="keq fltr">[x_1, x_2]</span></foreignObject>
+                  </g>
+                  <g id="reg02b1o">
+                    <circle cx="20%" cy="80%" r="3" fill="#000"></circle>
+                    <foreignObject id="reg02b1o" x="21%" y="80%"><span class="keq fltl">o</span></foreignObject>
+                  </g>
+
+                  <foreignObject id="reg02b1axis2lbl1" x="66%" y="10%"><span class="keq">o'</span></foreignObject>
+                  <foreignObject id="reg02b1axis2lbl2" x="71%" y="24%"><span class="keq">x_2'</span></foreignObject>
+                  <foreignObject id="reg02b1axis2lbl3" x="44%" y="20%"><span class="keq">x_1'</span></foreignObject>
+                  <foreignObject id="reg02b1axis2lbl4" x="52%" y="50%"><span class="keq">[x_1', x_2']</span></foreignObject>
+
                 </g>
-                <g id="reg02axis2">
+                <g id="reg02b1axis2">
                   <line x1="25%" y1="70%" x2="55%" y2="70%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
                   <line x1="30%" y1="80%" x2="30%" y2="45%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>  
                   <line x1="30%" y1="50%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line>
                   <line x1="50%" y1="70%" x2="50%" y2="50%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line>
                   <circle cx="30%" cy="70%" r="3" fill="#000"></circle>
                   
-                </g>
-                <foreignObject x="66%" y="10%"><span class="keq">o'</span></foreignObject>
-                <foreignObject x="71%" y="24%"><span class="keq">x_2'</span></foreignObject>
-                <foreignObject x="44%" y="20%"><span class="keq">x_1'</span></foreignObject>
-                <foreignObject x="52%" y="50%"><span class="keq">[x_1', x_2']</span></foreignObject>
-                <foreignObject x="48%" y="50%"><span class="keq fltr">[x_1, x_2]</span></foreignObject>
+                </g>                
+                <circle id="reg02b1pt" cx="50%" cy="50%" r="3" fill="#000"></circle>
                 
-                <circle cx="50%" cy="50%" r="3" fill="#000"></circle>
               </svg>
             </div>
             <div class="figcaption"><span class="kw">Cartesian coordinate system</span></div>
           </div>
           <div id="reg02b2" class="block row2 col2">
             <div class="figure"><img src="figs/handedness.svg"></div>
-            <div class="figcaption"><span class="kw">Handedness</span> (right hand = clockwise)</div>
+            <div class="figcaption"><span class="kw">Handedness</span> (right hand = counter-clockwise)</div>
           </div>
           <div id="reg02b3" class="block row2 col2">
             <div class="figure"><img src="figs/righthand.svg"></div>
@@ -346,48 +354,64 @@
         <h3 id="reg021h">Points in <span class="keq">\mathbb{E}^2</span></h3>
         <div id="reg021b" class="blocks">
           <div id="reg021b1" class="block row3 col3">
-            <p><span class="kw">Point</span> in <span class="keq">\mathbb{E}^2\Rightarrow</span> <span class="kw">Vector</span> <span class="keq">\vec{x}\in \mathbb{R}^2</span></p>
-            <div class="center keq">\vec{x}\hspace{-2px}=\hspace{-2px}\begin{bmatrix}x_1\\x_2\end{bmatrix}</div>
-            <p class="elevquarter"><span class="kw">Vector sum</span>: <span class="keq">\vec{z}=\vec{x}\hspace{-2px}+\hspace{-2px}\vec{y}\hspace{-2px}=\hspace{-4px}\begin{bmatrix}\hspace{-4px}x_1\hspace{-2px}+\hspace{-2px}y_1\hspace{-5px}\\\hspace{-4px}x_2\hspace{-2px}+\hspace{-2px}y_2\hspace{-5px}\end{bmatrix}</span></p>
-            <p class="elevquarter"><span class="kw">Scalar multiple</span>: <span class="keq">c\vec{x}=\begin{bmatrix}cx_1\\cx_2\end{bmatrix}</span></p>
-            <p><span class="kw">Linear combination</span>:</p>
-            <div class="eq keq">\vec{z}=c_1\vec{x}+c_2\vec{y}=\begin{bmatrix}c_1x_1+c_2y_1\\c_1x_2+c_2y_2\end{bmatrix}</div>
-            <p><span class="kw">Scalar (or dot) product</span>:</p>
-            <div class="eq keq">\vec{x}\cdot \vec{y} = \vec{x}^T\vec{y} = x_1y_1+x_2y_2</div>
-            <p><span class="kw">Vector norm (or length)</span>:</p>
-            <div class="eq keq">\|\vec{x}\|=(\vec{x}\cdot \vec{x})^\frac{1}{2}=\sqrt{x_1^2+x_2^2}</div>
-            
-            <p><span class="kw">Unit vector</span>: <span class="keq">\hat{x}=\displaystyle\frac{\vec{x}}{\|\vec{x}\|}, \|\hat{x}\|=1</span></p>
+            <p><span class="kw">Point</span> in <span class="keq">\mathbb{E}^2\Rightarrow</span> <span id="reg021b1ptvt"><span class="kw">Vector</span> <span class="keq">\vec{x}\in \mathbb{R}^2</span></span></p>
+            <div id="reg021b1vtx" class="center keq">\vec{x}\hspace{-2px}=\hspace{-2px}\begin{bmatrix}x_1\\x_2\end{bmatrix}</div>
+            <p id="reg021b1vtsum" class="elevquarter"><span class="kw">Vector sum</span>: <span class="keq">\vec{z}=\vec{x}\hspace{-2px}+\hspace{-2px}\vec{y}\hspace{-2px}=\hspace{-4px}\begin{bmatrix}\hspace{-4px}x_1\hspace{-2px}+\hspace{-2px}y_1\hspace{-5px}\\\hspace{-4px}x_2\hspace{-2px}+\hspace{-2px}y_2\hspace{-5px}\end{bmatrix}</span></p>
+            <p id="reg021b1vtmult" class="elevquarter"><span class="kw">Scalar multiple</span>: <span class="keq">c\vec{x}=\begin{bmatrix}cx_1\\cx_2\end{bmatrix}</span></p>
+            <div id="reg021b1vtcomb">
+              <p><span class="kw">Linear combination</span>:</p>
+              <div class="eq keq">\vec{z}=c_1\vec{x}+c_2\vec{y}=\begin{bmatrix}c_1x_1+c_2y_1\\c_1x_2+c_2y_2\end{bmatrix}</div>
+            </div>
+            <div id="reg021b1vtdot">
+              <p><span class="kw">Scalar (or dot) product</span>:</p>
+              <div class="eq keq">\vec{x}\cdot \vec{y} = \vec{x}^T\vec{y} = x_1y_1+x_2y_2</div>
+            </div>
+            <div id="reg021b1vtnorm">
+              <p><span class="kw">Vector norm (or length)</span>:</p>
+              <div class="eq keq">\|\vec{x}\|=(\vec{x}\cdot \vec{x})^\frac{1}{2}=\sqrt{x_1^2+x_2^2}</div>
+            </div>
+            <p id="reg021b1vtunit"><span class="kw">Unit vector</span>: <span class="keq">\hat{x}=\displaystyle\frac{\vec{x}}{\|\vec{x}\|}, \|\hat{x}\|=1</span></p>
           </div>
           <div id="reg021b2" class="block col3 row2 full">
             <svg class="full">
               <line x1="0" y1="80%" x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
               <line x1="20%" y1="100%" x2="20%" y2="10" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
 
-              <line x1="20%" y1="80%" x2="60%" y2="70%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
-              <line x1="20%" y1="68%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line>
-              <line x1="63%" y1="80%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line>
-
-              <line x1="20%" y1="80%" x2="80%" y2="65%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
+              <g id="reg021b2vx">
+                <line x1="20%" y1="80%" x2="60%" y2="70%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
+                <foreignObject x="55%" y="72%"><span class="keq">\vec{x}</span></foreignObject>
+                
+                <g id="reg021b2vxc">
+                  <line x1="20%" y1="68%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line>
+                  <line x1="63%" y1="80%" x2="63%" y2="68%" stroke="#999" stroke-width="1" stroke-dasharray="4"></line>
+                  <foreignObject x="58%" y="80%"><span class="keq">x_1</span></foreignObject>
+                  <foreignObject x="18%" y="65%"><span class="keq fltr">x_2</span></foreignObject>
+                </g>
+                
+              </g>
+              <g id="reg021b2vy">
+                <line x1="20%" y1="80%" x2="35%" y2="50%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
+                <foreignObject x="28%" y="45%"><span class="keq">\vec{y}</span></foreignObject>
+                <line x1="37%" y1="48%" x2="77%" y2="38%" stroke="#666" stroke-dasharray="4" stroke-width="1" vector-effect="non-scaling-stroke"></line>
+                <line x1="63%" y1="68%" x2="78%" y2="38%" stroke="#666" fill="#666" stroke-width="1" stroke-dasharray="4" vector-effect="non-scaling-stroke"></line>
+                <line x1="20%" y1="80%" x2="75%" y2="40%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
+                <foreignObject x="36%" y="48%" width="100%" transform="rotate(-42)" transform-origin="50% 50%"><div class="keq">\vec{x}+\vec{y}</div></foreignObject>
+              </g>
 
-              <line x1="20%" y1="80%" x2="35%" y2="50%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
+              <g id="reg021b2cvx">
+                <line x1="20%" y1="80%" x2="80%" y2="65%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
+                <foreignObject x="75%" y="68%"><span class="keq">c\vec{x}</span></foreignObject>
+              </g>
               
-              
-              <line x1="37%" y1="48%" x2="77%" y2="38%" stroke="#666" stroke-dasharray="4" stroke-width="1" vector-effect="non-scaling-stroke"></line>
-              <line x1="63%" y1="68%" x2="78%" y2="38%" stroke="#666" fill="#666" stroke-width="1" stroke-dasharray="4" vector-effect="non-scaling-stroke"></line>
-              <line x1="20%" y1="80%" x2="75%" y2="40%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke"></line>
-              <foreignObject x="55%" y="72%"><span class="keq">\vec{x}</span></foreignObject>
-              <foreignObject x="75%" y="68%"><span class="keq">c\vec{x}</span></foreignObject>
-              <foreignObject x="36%" y="48%" width="100%" transform="rotate(-42)" transform-origin="50% 50%"><div class="keq">\vec{x}+\vec{y}</div></foreignObject>
-              <foreignObject x="28%" y="45%"><span class="keq">\vec{y}</span></foreignObject>
-              <foreignObject x="58%" y="80%"><span class="keq">x_1</span></foreignObject>
-              <foreignObject x="18%" y="65%"><span class="keq fltr">x_2</span></foreignObject>
             </svg>
           </div>
           <div id="reg021b3" class="block col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
           </div>
-          <div id="reg021b4" class="block col4 row2">
+          <div id="reg021b4" class="block col2">
+            <div class="figure"><img src="figs/placeholder.svg"></div>
+          </div>
+          <div id="reg021b5" class="block col4 row2">
             <p><b>Scalar product and angles</b> (<span class="keq">\theta=\angle(\vec{x}, \vec{y})</span>): </p>
             <div class="keq eq">\vec{x}\cdot \vec{y} = \|\vec{x}\|\|\vec{y}\|\cos\theta</div>
             <p><span class="kw">Perpendicularity</span> (<span class="kw">Orthogonality</span>):</p>
@@ -401,10 +425,6 @@
             </div>
           </div>
           
-          <div id="reg021b5" class="block col2">
-            <div class="figure"><img src="figs/placeholder.svg"></div>
-            <div class="figcaption">Left hand system</div>
-          </div>
           <div id="reg021b6" class="block col2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Left hand system</div>
@@ -417,6 +437,10 @@
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Left hand system</div>
           </div>
+          <div id="reg021b9" class="block col2">
+            <div class="figure"><img src="figs/placeholder.svg"></div>
+            <div class="figcaption">Left hand system</div>
+          </div>
         </div>
         <h3 class="hidden">Lines in <span class="keq">\mathbb{E}^2</span></h3>
         <div class="blocks hidden">
@@ -985,8 +1009,7 @@
             <p><span class="kw">Projective Plane</span>: <span class="keq">\mathbb{P}^2</span></p>
             <p class="center"><span class="keq">\mathbb{E}^2\cup</span> set of points at infinity</p>
           </div>
-          <div class="block"></div>
-
+          
           <div class="block col2 row2">
             <div class="figure"><img src="figs/placeholder.svg"></div>
             <div class="figcaption">Parallel lines and point at infinity</div>
diff --git a/public/tsbb06.js b/public/tsbb06.js
index 0975ce3bad3a71d9c6bead39627692482a593275..ad4d6c3af3597b17be9fbf5afb29295451b7b0f6 100644
--- a/public/tsbb06.js
+++ b/public/tsbb06.js
@@ -116,7 +116,7 @@ var Scrubber = (function () {
                 nextPause = this._pauses.find(function (pause) { return pause > _this.time; });
             else
                 nextPause = this._pausesR.find(function (pause) { return pause < _this.time; });
-            //console.log(nextPause, this._pausesR);
+            console.log(nextPause, this._pausesR);
             if (nextPause !== undefined) {
                 //console.log(nextPause, time);
                 if (time !== null) {
@@ -146,11 +146,33 @@ var Scrubber = (function () {
 document.addEventListener("DOMContentLoaded", function () {
     var kFormula = document.querySelectorAll(".keq");
     [].forEach.call(kFormula, function (kFormulai) { return katex.render(kFormulai.innerHTML.replace(/&amp;/g, '&'), kFormulai); });
-    var reg02b = document.getElementById("reg021b");
+    // var reg02b=document.getElementById("reg021b");
     var reg02b1 = document.getElementById("reg02b1");
     var reg02b2 = document.getElementById("reg02b2");
     var reg02b3 = document.getElementById("reg02b3");
     var reg02b4 = document.getElementById("reg02b4");
+    var reg02b1axis2 = document.getElementById("reg02b1axis2");
+    var reg02b1axis1 = document.getElementById("reg02b1axis1");
+    var reg02b1axes = document.getElementById("reg02b1axes");
+    var reg02b1o = document.getElementById("reg02b1o");
+    var reg02b1pt = document.getElementById("reg02b1pt");
+    var reg02b1ptax1 = document.getElementById("reg02b1ptax1");
+    var reg02b1axis2lbl1 = document.getElementById("reg02b1axis2lbl1");
+    var reg02b1axis2lbl2 = document.getElementById("reg02b1axis2lbl2");
+    var reg02b1axis2lbl3 = document.getElementById("reg02b1axis2lbl3");
+    var reg02b1axis2lbl4 = document.getElementById("reg02b1axis2lbl4");
+    var reg021b1ptvt = document.getElementById("reg021b1ptvt");
+    var reg021b1vtx = document.getElementById("reg021b1vtx");
+    var reg021b2vx = document.getElementById("reg021b2vx");
+    var reg021b1vtsum = document.getElementById("reg021b1vtsum");
+    var reg021b2vy = document.getElementById("reg021b2vy");
+    var reg021b2vxc = document.getElementById("reg021b2vxc");
+    var reg021b2cvx = document.getElementById("reg021b2cvx");
+    var reg021b1vtmult = document.getElementById("reg021b1vtmult");
+    var reg021b1vtcomb = document.getElementById("reg021b1vtcomb");
+    var reg021b1vtdot = document.getElementById("reg021b1vtdot");
+    var reg021b1vtnorm = document.getElementById("reg021b1vtnorm");
+    var reg021b1vtunit = document.getElementById("reg021b1vtunit");
     var reg021h = document.getElementById("reg021h");
     var reg021b = document.getElementById("reg021b");
     var reg021b1 = document.getElementById("reg021b1");
@@ -162,19 +184,32 @@ document.addEventListener("DOMContentLoaded", function () {
     var reg021b7 = document.getElementById("reg021b7");
     var reg021b8 = document.getElementById("reg021b8");
     var fadeIn = [{ opacity: 0 }, { opacity: 1 }];
+    var fadeOut = [{ opacity: 1 }, { opacity: 0 }];
     var scrubber = new Scrubber("scrubber-touch", "scrubber-cur");
     scrubber.activate();
     var times = [
-        [1000, 0], [1000, 1000], [1000, 2000], [1000, 3000], [1000, 4000],
-        [1000, 5000], [1000, 6000], [1000, 7000], [1000, 8000], [1000, 9000], [1000, 10000], [1000, 11000], [1000, 12000], [1000, 13000], [1000, 14000],
+        //               1            2              3             4              5              6               7                8              9           10               11            12               13
+        /* REG 02 */ [500, 0], [500, 500], [500, 1000], [500, 1500], [500, 2000], [500, 2500], [500, 2500], [500, 2500], [500, 2500], [500, 2500], [500, 3000], [500, 3500], [500, 4000],
+        //                  1               2              3             4              5              6               7                8              9               10             11            12               13            14             15               16             17            18             19               20                 21
+        /* REG 02 B */ [500, 4500], [500, 4500], [500, 4500], [500, 5000], [500, 5000], [500, 5000], [500, 5500], [500, 5500], [500, 5500], [500, 6000], [500, 6000], [500, 6500], [500, 7000], [500, 7500], [500, 8000], [500, 6500], [500, 7500], [500, 8500], [500, 10000], [500, 13000], [500, 14000],
+    ];
+    var fx = [
+        // 1        2        3         4        5         6        7         8       9        10        11       12        13
+        fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn,
+        // 1        2        3         4        5         6        7         8       9        10        11       12        13
+        fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeOut, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn,
     ];
     var effects = [];
-    var items = [reg02b, reg02b1, reg02b2, reg02b3, reg02b4, reg021h, reg021b, reg021b1, reg021b2, reg021b3, reg021b4, reg021b5, reg021b6, reg021b7, reg021b8];
+    var items = [
+        // 1         2             3              4           5                 6                 7                     8                     9                   10                11     12           13
+        reg02b1, reg02b1o, reg02b1axes, reg02b1pt, reg02b1ptax1, reg02b1axis2, reg02b1axis2lbl1, reg02b1axis2lbl2, reg02b1axis2lbl3, reg02b1axis2lbl4, reg02b2, reg02b3, reg02b4,
+        // 1         2             3              4           5                6              7               8               9            10                11             12                  13                  14                15               16        17          18         19        20           21
+        reg021h, reg021b1, reg021b2, reg021b1ptvt, reg021b2vx, reg021b1vtx, reg021b1vtsum, reg021b2vy, reg021b2vxc, reg021b2cvx, reg021b1vtmult, reg021b1vtcomb, reg021b1vtdot, reg021b1vtnorm, reg021b1vtunit, reg021b3, reg021b4, reg021b5, reg021b6, reg021b7, reg021b8];
     var total = 15000;
     for (var i = 0; i < items.length; i++) {
-        effects.push(new KeyframeEffect(items[i], fadeIn, { duration: times[i][0], easing: "ease-in-out", delay: times[i][1], endDelay: total - (times[i][1] + times[i][0]), fill: "both" }));
+        effects.push(new KeyframeEffect(items[i], fx[i], { duration: times[i][0], easing: "ease-in-out", delay: times[i][1], endDelay: total - (times[i][1] + times[i][0]), fill: "both" }));
     }
-    scrubber.pauses = [0, 1000, 2000, 3000, 4000, 5000];
+    scrubber.pauses = [0, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000, 6500, 7000, 7500, 8000, 8500, 9000, 9500, 10000, 10500, 11000, 11500, 12000, 12500, 13000, 13500, 14000, 14500, 15000, 15500, 16000, 16500, 17000, 17500, 18000, 18500, 19000, 19500];
     scrubber.animations = effects.map(function (effect) { return new Animation(effect, document.timeline); });
     scrubber.time_max = 10000;
     scrubber.playForwards();
diff --git a/scrubber.ts b/scrubber.ts
index 47926a0b7cd1c2091a12db7f2f8959dd26869e48..9fbc6fa4240b0267e0dfedcc25924d712af3aaad 100644
--- a/scrubber.ts
+++ b/scrubber.ts
@@ -118,7 +118,7 @@ export class Scrubber {
       let nextPause: number | undefined;
       if(!this.reversed) nextPause = this._pauses.find((pause) => pause > this.time);
       else               nextPause = this._pausesR.find((pause) => pause < this.time);
-      //console.log(nextPause, this._pausesR);
+      console.log(nextPause, this._pausesR);
       if (nextPause !== undefined) {
         //console.log(nextPause, time);
         if (time !== null) {
diff --git a/tsbb06.mr b/tsbb06.mr
index 9e58a8284db187e9ad243ccda43482d153135db0..11c3eb1bc8a3c4ef5adee583b28ea2bfecebad58 100644
--- a/tsbb06.mr
+++ b/tsbb06.mr
@@ -301,38 +301,46 @@
                     \path(d="M0,0 L0,6 L9,3 z" vector-effect="non-scaling-stroke")
                   }
                 }
-                \g#reg02axis{
-                  \line(x1="0"   y1="80%"  x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
-                  \line(x1="20%" y1="100%" x2="20%" y2="10"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")  
-                  \line(x1="20%" y1="50%" x2="50%" y2="50%"  stroke="#999" stroke-width="1" stroke-dasharray="4")
-                  \line(x1="50%" y1="80%" x2="50%" y2="50%"  stroke="#999" stroke-width="1" stroke-dasharray="4")
-                  \circle(cx="20%" cy="80%" r="3" fill="#000")
-                  \foreignObject(x="21%" y="80%"){\span.keq.fltl{o}}
-                  \foreignObject(x="19%" y="45%"){\span.keq.fltr{x_2}}
-                  \foreignObject(x="48%" y="80%"){\span.keq.fltm{x_1}}
+                \g#reg02b1axis1{
+                  \g#reg02b1axes{
+                    \line(x1="0"   y1="80%"  x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
+                    \line(x1="20%" y1="100%" x2="20%" y2="10"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")  
+                  }
+                  \g#reg02b1ptax1{
+                    \line(x1="20%" y1="50%" x2="50%" y2="50%"  stroke="#999" stroke-width="1" stroke-dasharray="4")
+                    \line(x1="50%" y1="80%" x2="50%" y2="50%"  stroke="#999" stroke-width="1" stroke-dasharray="4")
+                    \foreignObject(x="19%" y="45%"){\span.keq.fltr{x_2}}
+                    \foreignObject(x="48%" y="80%"){\span.keq.fltm{x_1}}
+                    \foreignObject(x="48%" y="50%"){\span.keq.fltr{[x_1, x_2]}}
+                  }
+                  \g#reg02b1o{
+                    \circle(cx="20%" cy="80%" r="3" fill="#000")
+                    \foreignObject#reg02b1o(x="21%" y="80%"){\span.keq.fltl{o}}
+                  }
+
+                  \foreignObject#reg02b1axis2lbl1(x="66%" y="10%"){\span.keq{o'}}
+                  \foreignObject#reg02b1axis2lbl2(x="71%" y="24%"){\span.keq{x_2'}}
+                  \foreignObject#reg02b1axis2lbl3(x="44%" y="20%"){\span.keq{x_1'}}
+                  \foreignObject#reg02b1axis2lbl4(x="52%" y="50%"){\span.keq{[x_1', x_2']}}
+
                 }
-                \g#reg02axis2{
+                \g#reg02b1axis2{
                   \line(x1="25%" y1="70%"  x2="55%" y2="70%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
                   \line(x1="30%" y1="80%" x2="30%" y2="45%"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")  
                   \line(x1="30%" y1="50%" x2="50%" y2="50%"  stroke="#999" stroke-width="1" stroke-dasharray="4")
                   \line(x1="50%" y1="70%" x2="50%" y2="50%"  stroke="#999" stroke-width="1" stroke-dasharray="4")
                   \circle(cx="30%" cy="70%" r="3" fill="#000")
                   
-                }
-                \foreignObject(x="66%" y="10%"){\span.keq{o'}}
-                \foreignObject(x="71%" y="24%"){\span.keq{x_2'}}
-                \foreignObject(x="44%" y="20%"){\span.keq{x_1'}}
-                \foreignObject(x="52%" y="50%"){\span.keq{[x_1', x_2']}}
-                \foreignObject(x="48%" y="50%"){\span.keq.fltr{[x_1, x_2]}}
+                }                
+                \circle#reg02b1pt(cx="50%" cy="50%" r="3" fill="#000")
                 
-                \circle(cx="50%" cy="50%" r="3" fill="#000")
               }
             }
             \div.figcaption{\span.kw{Cartesian coordinate system}}
           }
           \div#reg02b2.block.row2.col2{
             \div.figure{\img(src="figs/handedness.svg")}
-            \div.figcaption{\span.kw{Handedness} (right hand = clockwise)}
+            \div.figcaption{\span.kw{Handedness} (right hand = counter-clockwise)}
           }
           \div#reg02b3.block.row2.col2{
             \div.figure{\img(src="figs/righthand.svg")}
@@ -346,48 +354,64 @@
         \h3#reg021h{Points in \span.keq{\\mathbb\{E\}^2}}
         \div#reg021b.blocks{
           \div#reg021b1.block.row3.col3{
-            \p{\span.kw{Point} in \span.keq{\\mathbb\{E\}^2\\Rightarrow} \span.kw{Vector} \span.keq{\\vec\{x\}\\in \\mathbb\{R\}^2}}
-            \div.center.keq{\\vec\{x\}\\hspace\{-2px\}=\\hspace\{-2px\}\\begin\{bmatrix\}x_1\\\\x_2\\end\{bmatrix\}}
-            \p.elevquarter{\span.kw{Vector sum}: \span.keq{\\vec\{z\}=\\vec\{x\}\\hspace\{-2px\}+\\hspace\{-2px\}\\vec\{y\}\\hspace\{-2px\}=\\hspace\{-4px\}\\begin\{bmatrix\}\\hspace\{-4px\}x_1\\hspace\{-2px\}+\\hspace\{-2px\}y_1\\hspace\{-5px\}\\\\\\hspace\{-4px\}x_2\\hspace\{-2px\}+\\hspace\{-2px\}y_2\\hspace\{-5px\}\\end\{bmatrix\}}}
-            \p.elevquarter{\span.kw{Scalar multiple}: \span.keq{c\\vec\{x\}=\\begin\{bmatrix\}cx_1\\\\cx_2\\end\{bmatrix\}}}
-            \p{\span.kw{Linear combination}:}
-            \div.eq.keq{\\vec\{z\}=c_1\\vec\{x\}+c_2\\vec\{y\}=\\begin\{bmatrix\}c_1x_1+c_2y_1\\\\c_1x_2+c_2y_2\\end\{bmatrix\}}
-            \p{\span.kw{Scalar (or dot) product}:}
-            \div.eq.keq{\\vec\{x\}\\cdot \\vec\{y\} = \\vec\{x\}^T\\vec\{y\} = x_1y_1+x_2y_2}
-            \p{\span.kw{Vector norm (or length)}:}
-            \div.eq.keq{\\|\\vec\{x\}\\|=(\\vec\{x\}\\cdot \\vec\{x\})^\\frac\{1\}\{2\}=\\sqrt\{x_1^2+x_2^2\}}
-            
-            \p{\span.kw{Unit vector}: \span.keq{\\hat\{x\}=\\displaystyle\\frac\{\\vec\{x\}\}\{\\|\\vec\{x\}\\|\}, \\|\\hat\{x\}\\|=1}}
+            \p{\span.kw{Point} in \span.keq{\\mathbb\{E\}^2\\Rightarrow} \span#reg021b1ptvt{\span.kw{Vector} \span.keq{\\vec\{x\}\\in \\mathbb\{R\}^2}}}
+            \div#reg021b1vtx.center.keq{\\vec\{x\}\\hspace\{-2px\}=\\hspace\{-2px\}\\begin\{bmatrix\}x_1\\\\x_2\\end\{bmatrix\}}
+            \p#reg021b1vtsum.elevquarter{\span.kw{Vector sum}: \span.keq{\\vec\{z\}=\\vec\{x\}\\hspace\{-2px\}+\\hspace\{-2px\}\\vec\{y\}\\hspace\{-2px\}=\\hspace\{-4px\}\\begin\{bmatrix\}\\hspace\{-4px\}x_1\\hspace\{-2px\}+\\hspace\{-2px\}y_1\\hspace\{-5px\}\\\\\\hspace\{-4px\}x_2\\hspace\{-2px\}+\\hspace\{-2px\}y_2\\hspace\{-5px\}\\end\{bmatrix\}}}
+            \p#reg021b1vtmult.elevquarter{\span.kw{Scalar multiple}: \span.keq{c\\vec\{x\}=\\begin\{bmatrix\}cx_1\\\\cx_2\\end\{bmatrix\}}}
+            \div#reg021b1vtcomb{
+              \p{\span.kw{Linear combination}:}
+              \div.eq.keq{\\vec\{z\}=c_1\\vec\{x\}+c_2\\vec\{y\}=\\begin\{bmatrix\}c_1x_1+c_2y_1\\\\c_1x_2+c_2y_2\\end\{bmatrix\}}
+            }
+            \div#reg021b1vtdot{
+              \p{\span.kw{Scalar (or dot) product}:}
+              \div.eq.keq{\\vec\{x\}\\cdot \\vec\{y\} = \\vec\{x\}^T\\vec\{y\} = x_1y_1+x_2y_2}
+            }
+            \div#reg021b1vtnorm{
+              \p{\span.kw{Vector norm (or length)}:}
+              \div.eq.keq{\\|\\vec\{x\}\\|=(\\vec\{x\}\\cdot \\vec\{x\})^\\frac\{1\}\{2\}=\\sqrt\{x_1^2+x_2^2\}}
+            }
+            \p#reg021b1vtunit{\span.kw{Unit vector}: \span.keq{\\hat\{x\}=\\displaystyle\\frac\{\\vec\{x\}\}\{\\|\\vec\{x\}\\|\}, \\|\\hat\{x\}\\|=1}}
           }
           \div#reg021b2.block.col3.row2.full{
             \svg.full{
               \line(x1="0"   y1="80%"  x2="95%" y2="80%" stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
               \line(x1="20%" y1="100%" x2="20%" y2="10"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
 
-              \line(x1="20%" y1="80%" x2="60%" y2="70%"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
-              \line(x1="20%" y1="68%" x2="63%" y2="68%"  stroke="#999" stroke-width="1" stroke-dasharray="4")
-              \line(x1="63%" y1="80%" x2="63%" y2="68%"  stroke="#999" stroke-width="1" stroke-dasharray="4")
-
-              \line(x1="20%" y1="80%" x2="80%" y2="65%"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
+              \g#reg021b2vx{
+                \line(x1="20%" y1="80%" x2="60%" y2="70%"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
+                \foreignObject(x="55%" y="72%"){\span.keq{\\vec\{x\}}}
+                
+                \g#reg021b2vxc{
+                  \line(x1="20%" y1="68%" x2="63%" y2="68%"  stroke="#999" stroke-width="1" stroke-dasharray="4")
+                  \line(x1="63%" y1="80%" x2="63%" y2="68%"  stroke="#999" stroke-width="1" stroke-dasharray="4")
+                  \foreignObject(x="58%" y="80%"){\span.keq{x_1}}
+                  \foreignObject(x="18%" y="65%"){\span.keq.fltr{x_2}}
+                }
+                
+              }
+              \g#reg021b2vy{
+                \line(x1="20%" y1="80%" x2="35%" y2="50%"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
+                \foreignObject(x="28%" y="45%"){\span.keq{\\vec\{y\}}}
+                \line(x1="37%" y1="48%" x2="77%" y2="38%"  stroke="#666" stroke-dasharray="4" stroke-width="1" vector-effect="non-scaling-stroke")
+                \line(x1="63%" y1="68%" x2="78%" y2="38%" stroke="#666" fill="#666" stroke-width="1" stroke-dasharray="4" vector-effect="non-scaling-stroke")
+                \line(x1="20%" y1="80%" x2="75%" y2="40%"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
+                \foreignObject(x="36%" y="48%" width="100%" transform="rotate(-42)" transform-origin="50% 50%"){\div.keq{\\vec\{x\}+\\vec\{y\}}}
+              }
 
-              \line(x1="20%" y1="80%" x2="35%" y2="50%"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
-              
+              \g#reg021b2cvx{
+                \line(x1="20%" y1="80%" x2="80%" y2="65%"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
+                \foreignObject(x="75%" y="68%"){\span.keq{c\\vec\{x\}}}
+              }
               
-              \line(x1="37%" y1="48%" x2="77%" y2="38%"  stroke="#666" stroke-dasharray="4" stroke-width="1" vector-effect="non-scaling-stroke")
-              \line(x1="63%" y1="68%" x2="78%" y2="38%" stroke="#666" fill="#666" stroke-width="1" stroke-dasharray="4" vector-effect="non-scaling-stroke")
-              \line(x1="20%" y1="80%" x2="75%" y2="40%"  stroke="#000" stroke-width="1" marker-end="url(#arrow)" vector-effect="non-scaling-stroke")
-              \foreignObject(x="55%" y="72%"){\span.keq{\\vec\{x\}}}
-              \foreignObject(x="75%" y="68%"){\span.keq{c\\vec\{x\}}}
-              \foreignObject(x="36%" y="48%" width="100%" transform="rotate(-42)" transform-origin="50% 50%"){\div.keq{\\vec\{x\}+\\vec\{y\}}}
-              \foreignObject(x="28%" y="45%"){\span.keq{\\vec\{y\}}}
-              \foreignObject(x="58%" y="80%"){\span.keq{x_1}}
-              \foreignObject(x="18%" y="65%"){\span.keq.fltr{x_2}}
             }
           }
           \div#reg021b3.block.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
           }
-          \div#reg021b4.block.col4.row2{
+          \div#reg021b4.block.col2{
+            \div.figure{\img(src="figs/placeholder.svg")}
+          }
+          \div#reg021b5.block.col4.row2{
             \p{\b{Scalar product and angles} (\span.keq{\\theta=\\angle(\\vec\{x\}, \\vec\{y\})}): }
             \div.keq.eq{\\vec\{x\}\\cdot \\vec\{y\} = \\|\\vec\{x\}\\|\\|\\vec\{y\}\\|\\cos\\theta}
             \p{\span.kw{Perpendicularity} (\span.kw{Orthogonality}):}
@@ -401,10 +425,6 @@
             }
           }
           
-          \div#reg021b5.block.col2{
-            \div.figure{\img(src="figs/placeholder.svg")}
-            \div.figcaption{Left hand system}
-          }
           \div#reg021b6.block.col2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Left hand system}
@@ -417,6 +437,10 @@
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Left hand system}
           }
+          \div#reg021b9.block.col2{
+            \div.figure{\img(src="figs/placeholder.svg")}
+            \div.figcaption{Left hand system}
+          }
         }
         \h3.hidden{Lines in \span.keq{\\mathbb\{E\}^2}}
         \div.blocks.hidden{
@@ -985,8 +1009,7 @@
             \p{\span.kw{Projective Plane}: \span.keq{\\mathbb\{P\}^2}}
             \p.center{\span.keq{\\mathbb\{E\}^2\\cup} set of points at infinity}
           }
-          \div.block{}
-
+          
           \div.block.col2.row2{
             \div.figure{\img(src="figs/placeholder.svg")}
             \div.figcaption{Parallel lines and point at infinity}
diff --git a/tsbb06.ts b/tsbb06.ts
index 6560f2d2fb3932e6dfdffb0f4fc64b328f0a3b1b..dab1845be410945d552b82558913fddfea3b0c74 100644
--- a/tsbb06.ts
+++ b/tsbb06.ts
@@ -35,11 +35,34 @@ document.addEventListener("DOMContentLoaded", () => {
   var kFormula = document.querySelectorAll(".keq");
   [].forEach.call(kFormula, kFormulai => katex.render(kFormulai.innerHTML.replace(/&amp;/g, '&'), kFormulai));
 
-  var reg02b=document.getElementById("reg021b");
+  // var reg02b=document.getElementById("reg021b");
   var reg02b1=document.getElementById("reg02b1");
   var reg02b2=document.getElementById("reg02b2");
   var reg02b3=document.getElementById("reg02b3");
   var reg02b4=document.getElementById("reg02b4");
+  var reg02b1axis2=document.getElementById("reg02b1axis2");
+  var reg02b1axis1=document.getElementById("reg02b1axis1");
+  var reg02b1axes=document.getElementById("reg02b1axes");
+  var reg02b1o=document.getElementById("reg02b1o");
+  var reg02b1pt=document.getElementById("reg02b1pt");
+  var reg02b1ptax1=document.getElementById("reg02b1ptax1");
+  var reg02b1axis2lbl1=document.getElementById("reg02b1axis2lbl1");
+  var reg02b1axis2lbl2=document.getElementById("reg02b1axis2lbl2");
+  var reg02b1axis2lbl3=document.getElementById("reg02b1axis2lbl3");
+  var reg02b1axis2lbl4=document.getElementById("reg02b1axis2lbl4");
+  var reg021b1ptvt=document.getElementById("reg021b1ptvt");
+  var reg021b1vtx=document.getElementById("reg021b1vtx");
+  var reg021b2vx=document.getElementById("reg021b2vx");
+  var reg021b1vtsum=document.getElementById("reg021b1vtsum");
+  var reg021b2vy=document.getElementById("reg021b2vy");
+  var reg021b2vxc=document.getElementById("reg021b2vxc");
+  var reg021b2cvx=document.getElementById("reg021b2cvx");
+  var reg021b1vtmult=document.getElementById("reg021b1vtmult");
+  var reg021b1vtcomb=document.getElementById("reg021b1vtcomb");
+  var reg021b1vtdot=document.getElementById("reg021b1vtdot");
+  var reg021b1vtnorm=document.getElementById("reg021b1vtnorm");
+  var reg021b1vtunit=document.getElementById("reg021b1vtunit");
+
   var reg021h=document.getElementById("reg021h");
   var reg021b=document.getElementById("reg021b");
   var reg021b1=document.getElementById("reg021b1");
@@ -55,16 +78,29 @@ document.addEventListener("DOMContentLoaded", () => {
   var scrubber = new Scrubber("scrubber-touch", "scrubber-cur");
   scrubber.activate();
   var times = [
-    [1000, 0], [1000, 1000], [1000, 2000], [1000, 3000], [1000, 4000],
-    [1000, 5000], [1000, 6000], [1000, 7000], [1000, 8000], [1000, 9000], [1000, 10000], [1000, 11000], [1000, 12000], [1000, 13000], [1000, 14000],
+    //               1            2              3             4              5              6               7                8              9           10               11            12               13
+    /* REG 02 */ [500, 0], [500, 500], [500, 1000], [500, 1500], [500, 2000], [500, 2500], [500, 2500], [500, 2500], [500, 2500], [500, 2500], [500, 3000], [500, 3500], [500, 4000],
+    //                  1               2              3             4              5              6               7                8              9               10             11            12               13            14             15               16             17            18             19               20                 21
+    /* REG 02 B */ [500, 4500], [500, 4500], [500, 4500], [500, 5000], [500, 5000], [500, 5000], [500, 5500], [500, 5500], [500, 5500], [500, 6000], [500, 6000], [500, 6500], [500, 7000], [500, 7500], [500, 8000], [500, 6500], [500, 7500], [500, 8500], [500, 10000], [500, 13000], [500, 14000],
   ];
+  var fx = [
+    // 1        2        3         4        5         6        7         8       9        10        11       12        13
+    fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, 
+    // 1        2        3         4        5         6        7         8       9        10        11       12        13
+    fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeOut, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, fadeIn, 
+  ]
+  
   var effects:KeyframeEffect[] = [];
-  var items = [reg02b, reg02b1, reg02b2, reg02b3, reg02b4, reg021h, reg021b, reg021b1, reg021b2, reg021b3, reg021b4, reg021b5, reg021b6, reg021b7, reg021b8];
+  var items = [
+    // 1         2             3              4           5                 6                 7                     8                     9                   10                11     12           13
+    reg02b1, reg02b1o, reg02b1axes, reg02b1pt, reg02b1ptax1, reg02b1axis2, reg02b1axis2lbl1, reg02b1axis2lbl2, reg02b1axis2lbl3, reg02b1axis2lbl4, reg02b2, reg02b3, reg02b4, 
+    // 1         2             3              4           5                6              7               8               9            10                11             12                  13                  14                15               16        17          18         19        20           21
+    reg021h, reg021b1, reg021b2, reg021b1ptvt, reg021b2vx, reg021b1vtx, reg021b1vtsum, reg021b2vy, reg021b2vxc, reg021b2cvx, reg021b1vtmult, reg021b1vtcomb, reg021b1vtdot, reg021b1vtnorm, reg021b1vtunit, reg021b3, reg021b4, reg021b5, reg021b6, reg021b7, reg021b8];
   var total = 15000;
   for(let i=0; i < items.length; i++) {
-    effects.push(new KeyframeEffect(items[i], fadeIn, {duration: times[i][0], easing:"ease-in-out", delay: times[i][1], endDelay: total-(times[i][1]+times[i][0]), fill: "both"}));
+    effects.push(new KeyframeEffect(items[i], fx[i], {duration: times[i][0], easing:"ease-in-out", delay: times[i][1], endDelay: total-(times[i][1]+times[i][0]), fill: "both"}));
   }
-  scrubber.pauses=[0, 1000, 2000, 3000, 4000, 5000];
+  scrubber.pauses=[0, 500, 1000, 1500, 2000, 2500, 3000, 3500, 4000, 4500, 5000, 5500, 6000, 6500, 7000, 7500, 8000, 8500, 9000, 9500, 10000, 10500, 11000, 11500, 12000, 12500, 13000, 13500, 14000, 14500, 15000, 15500, 16000, 16500, 17000, 17500, 18000, 18500, 19000, 19500];
   scrubber.animations=effects.map(effect => new Animation(effect, document.timeline));
   scrubber.time_max = 10000;
   scrubber.playForwards();