diff --git a/playground/collections-white-48dp.svg b/playground/collections-white-48dp.svg
new file mode 100644
index 0000000..5d16c45
--- /dev/null
+++ b/playground/collections-white-48dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="48px" height="48px"><path d="M0 0h24v24H0z" fill="none"/><path d="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-11-4l2.03 2.71L16 11l4 5H8l3-4zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"/></svg>
\ No newline at end of file
diff --git a/playground/index.html b/playground/index.html
index 8df8341..fc4b697 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -93,29 +93,7 @@
         <button class="delete" aria-label="close"></button>
       </header>
       <section class="modal-card-body">
-        <!-- 
-          Title
-          Url
-          Code
-        -->
         <div class="snippet-container">
-          <!-- <div>
-            <span>drawBox</span>
-            <img src="https://reanimate.clozecards.com/EwyRzmx8zxM/30.svg">
-          </div>
-          <div>
-            <span>drawCircle</span>
-            <img src="https://reanimate.clozecards.com/EwyRzmx8zxM/50.svg">
-          </div>
-          <div>2</div>
-          <div>3</div>
-          <div>4</div>
-          <div>5</div>
-          <div>6</div>
-          <div>7</div>
-          <div>8</div>
-          <div>9</div>
-          <div>10</div> -->
         </div>
       </section>
       <!-- <footer class="modal-card-foot">
@@ -136,66 +114,57 @@
 
     app.newCode(myCodeMirror.getValue());
 
+    const mediaButtons = document.querySelector('.media-buttons');
+
     myCodeMirror.on('change', function () {
-      document.querySelector('.media-buttons').classList.remove('paused');
+      mediaButtons.classList.remove('paused');
+      app.pause();
       app.newCode(myCodeMirror.getValue());
     });
 
     renderSnippets(document.querySelector('.snippet-container'), myCodeMirror);
 
     document.getElementById('play').onclick = function () {
-      document.querySelector('.media-buttons').classList.toggle('paused');
+      mediaButtons.classList.toggle('paused');
       app.play();
     };
     document.getElementById('pause').onclick = function () {
-      document.querySelector('.media-buttons').classList.toggle('paused');
+      mediaButtons.classList.toggle('paused');
       app.pause();
     };
     document.getElementById('seek1').onclick = function () {
-      document.querySelector('.media-buttons').classList.add('paused');
+      mediaButtons.classList.add('paused');
       app.pause();
       app.seek1();
     };
     document.getElementById('seek10').onclick = function () {
-      document.querySelector('.media-buttons').classList.add('paused');
+      mediaButtons.classList.add('paused');
       app.pause();
       app.seek10();
     };
     document.getElementById('seek-1').onclick = function () {
-      document.querySelector('.media-buttons').classList.add('paused');
+      mediaButtons.classList.add('paused');
       app.pause();
       app.seek_1();
     };
     document.getElementById('seek-10').onclick = function () {
-      document.querySelector('.media-buttons').classList.add('paused');
+      mediaButtons.classList.add('paused');
       app.pause();
       app.seek_10();
     };
-    document.getElementById('help').onclick = function () {
-      document.querySelector('#help-modal').classList.add('is-active');
-    };
-    document.querySelector('#help-modal .modal-background').onclick = function () {
-      document.querySelector('#help-modal').classList.remove('is-active');
-    };
-    document.querySelector('#help-modal .modal-close').onclick = function () {
-      document.querySelector('#help-modal').classList.remove('is-active');
-    };
-    document.querySelector('#help-modal .delete').onclick = function () {
-      document.querySelector('#help-modal').classList.remove('is-active');
+    const helpIcon = document.getElementById('help');
+    const helpModal = document.querySelector('#help-modal');
+    helpIcon.onclick = function () {
+      openModal(helpModal);
     };
+    configureModal(helpModal);
 
-    document.getElementById('examples').onclick = function () {
-      document.querySelector('#examples-modal').classList.add('is-active');
-    };
-    document.querySelector('#examples-modal .modal-background').onclick = function () {
-      document.querySelector('#examples-modal').classList.remove('is-active');
-    };
-    document.querySelector('#examples-modal .modal-close').onclick = function () {
-      document.querySelector('#examples-modal').classList.remove('is-active');
-    };
-    document.querySelector('#examples-modal .delete').onclick = function () {
-      document.querySelector('#examples-modal').classList.remove('is-active');
+    const examplesIcon = document.getElementById('examples')
+    const examplesModal = document.getElementById('examples-modal')
+    examplesIcon.onclick = function () {
+      openModal(examplesModal);
     };
+    configureModal(examplesModal)
 
   </script>
   <script>
diff --git a/playground/playground.js b/playground/playground.js
index 80230fd..408cffd 100644
--- a/playground/playground.js
+++ b/playground/playground.js
@@ -22,6 +22,7 @@ function playgroundInit(elt) {
         if( cmd === "frame_count" ) {
           frames = {};
         } else if ( cmd === "frame") {
+          // Prefetch image.
           const nth = parseInt(lines[1]);
           const url = lines[2];
           frames[nth] = new Image();
@@ -95,8 +96,28 @@ function renderSnippets(elt, myCodeMirror) {
     div.appendChild(img)
     div.onclick = function () {
       myCodeMirror.setValue(code);
-      document.querySelector('#examples-modal').classList.remove('is-active');
+      closeModal(document.querySelector('#examples-modal'));
     };
     elt.appendChild(div)
   }
 }
+
+function closeModal(modal) {
+  modal.classList.remove('is-active');
+}
+function openModal(modal) {
+  modal.classList.add('is-active');
+}
+
+// Add javascript handlers to modal for closing.
+function configureModal(modal) {
+  modal.querySelector('.modal-background').onclick = function () {
+    modal.classList.remove('is-active');
+  };
+  modal.querySelector('.modal-close').onclick = function () {
+    modal.classList.remove('is-active');
+  };
+  modal.querySelector('.delete').onclick = function () {
+    modal.classList.remove('is-active');
+  };
+}
diff --git a/playground/style.css b/playground/style.css
index 8b460a2..b4fc5c6 100644
--- a/playground/style.css
+++ b/playground/style.css
@@ -133,6 +133,9 @@ pre {
   margin: 1em;
   position: relative;
 }
+.snippet-container > div:hover {
+  cursor: pointer;
+}
 .snippet-container > div > span {
   position: absolute;
   display: block;
diff --git a/reanimate-0.4.1.0-inplace/Paths_reanimate.hs.html b/reanimate-0.4.1.0-inplace/Paths_reanimate.hs.html
index 1cdf16b..8fb5f89 100644
--- a/reanimate-0.4.1.0-inplace/Paths_reanimate.hs.html
+++ b/reanimate-0.4.1.0-inplace/Paths_reanimate.hs.html
@@ -49,10 +49,10 @@ span.spaces    { background: white }
 <span class="lineno">   30 </span>bindir, libdir, dynlibdir, datadir, libexecdir, sysconfdir :: FilePath
 <span class="lineno">   31 </span>
 <span class="lineno">   32 </span><span class="decl"><span class="nottickedoff">bindir     = &quot;/home/runner/.cabal/bin&quot;</span></span>
-<span class="lineno">   33 </span><span class="decl"><span class="nottickedoff">libdir     = &quot;/home/runner/.cabal/lib/x86_64-linux-ghc-8.8.2/reanimate-0.4.1.0-inplace&quot;</span></span>
-<span class="lineno">   34 </span><span class="decl"><span class="nottickedoff">dynlibdir  = &quot;/home/runner/.cabal/lib/x86_64-linux-ghc-8.8.2&quot;</span></span>
-<span class="lineno">   35 </span><span class="decl"><span class="nottickedoff">datadir    = &quot;/home/runner/.cabal/share/x86_64-linux-ghc-8.8.2/reanimate-0.4.1.0&quot;</span></span>
-<span class="lineno">   36 </span><span class="decl"><span class="nottickedoff">libexecdir = &quot;/home/runner/.cabal/libexec/x86_64-linux-ghc-8.8.2/reanimate-0.4.1.0&quot;</span></span>
+<span class="lineno">   33 </span><span class="decl"><span class="nottickedoff">libdir     = &quot;/home/runner/.cabal/lib/x86_64-linux-ghc-8.8.3/reanimate-0.4.1.0-inplace&quot;</span></span>
+<span class="lineno">   34 </span><span class="decl"><span class="nottickedoff">dynlibdir  = &quot;/home/runner/.cabal/lib/x86_64-linux-ghc-8.8.3&quot;</span></span>
+<span class="lineno">   35 </span><span class="decl"><span class="nottickedoff">datadir    = &quot;/home/runner/.cabal/share/x86_64-linux-ghc-8.8.3/reanimate-0.4.1.0&quot;</span></span>
+<span class="lineno">   36 </span><span class="decl"><span class="nottickedoff">libexecdir = &quot;/home/runner/.cabal/libexec/x86_64-linux-ghc-8.8.3/reanimate-0.4.1.0&quot;</span></span>
 <span class="lineno">   37 </span><span class="decl"><span class="nottickedoff">sysconfdir = &quot;/home/runner/.cabal/etc&quot;</span></span>
 <span class="lineno">   38 </span>
 <span class="lineno">   39 </span>getBinDir, getLibDir, getDynLibDir, getDataDir, getLibexecDir, getSysconfDir :: IO FilePath