USE THIS!

*sweat dripping from my fingers"

by endlessanimal

HTML

<script src="https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/pathseg.js"></script>
<script src="https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/decomp.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.12.0/matter.min.js"></script>
<title>CAT BOUNCE!</title>

          <!-- META -->
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta name="description" content="Cat Bounce! A website of bouncing cats.">
          <meta property="fb:app_id" content="1841401412744959" />
          <meta property="fb:admins" content="502943874" />
          
          <!-- Facebook -->
          <meta property="og:title" content="CAT BOUNCE!"/>
          <meta property="og:url" content="https://www.cat-bounce.com"/>
          <meta property="og:site_name" content="CAT BOUNCE!"/>
          <meta property="og:type" content="website"/>
          <meta property="og:description" content="It's Cat Bounce, what more do you need to know?"/>
          <meta property="og:image" content="https://www.cat-bounce.com/catbounce.png"/>
          
          <!-- Twitter -->
          <meta name="twitter:card" content="summary">
          <meta name="twitter:title" content="CAT BOUNCE!">
          <meta name="twitter:url" content="https://www.cat-bounce.com">
          <meta name="twitter:description" content="It's Cat Bounce, what more do you need to know?">
          <meta name="twitter:image:src" content="https://www.cat-bounce.com/catbounce.png">
          <link rel="image_src" href="catbounce.png" />
          
          <!-- CSS -->
          <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
          <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
          <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
          <link rel="shortcut icon"...

SCSS

@import url('https://fonts.googleapis.com/css?family=Heebo:900|Inconsolata');



body {
  overflow: hidden;
  margin: 0px;
  width: 100vw;
  height: 100vh;
  background: -webkit-gradient(linear, left top, left bottom, from(#ef31f9), to(rgba(125, 185, 232, 0)));
  background: linear-gradient(180deg, #ef31f9, rgba(125, 185, 232, 0));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ef31f9", endColorstr="#007db9e8", GradientType=0)
}

body,
html {
  height: 100vh;
  width: 100vw;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

.modal-content {
    position: relative;
    text-align: center;
    margin: 0 auto;
    text-align: center;
    background-color: #fefefe;
    padding: 0;
    border: 1px solid black;  
    width: 80%;
    box-shadow: 4px 4px 0px rgba(0,0,0,1);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}


.close {
    color: black;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #666;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 0px 16px;
    font-family: 'Heebo', sans-serif;
    text-transform: uppercase;
    background-color: #fefefe;
    color: #000;
    margin-bottom: 15px;
}

h3 {
    font-family: 'Heebo', sans-serif;
    font-size:1.4rem;
    text-align: center;
    text-transform: uppercase;
  ...

Babel + JSX

// WOBBLER

const speed=150; // speed of wobbling, lower is faster
const wobbleheight=3; // height of wobbling in pixels
const alink=""; // page to link text to (set to ="" for no link)

/**********************************

*  Wobbly Text Effect    
*  by http://www.mf2fm.com/rv

**********************************/

let wobtxt;

let wobble;
let wobcnt=0;
window.onload=() => { if (document.getElementById) {
  let i;
  let wobli;
  wobble=document.getElementById("wobble");
  wobtxt=wobble.firstChild.nodeValue;
  while (wobble.childNodes.length) wobble.removeChild(wobble.childNodes[0]);
  for (i=0; i<wobtxt.length; i++) {
    wobli=document.createElement("span");
    wobli.setAttribute("id", `wobb${i}`);
    wobli.style.position="relative";
    wobli.appendChild(document.createTextNode(wobtxt.charAt(i)));
    if (alink) {
      wobli.style.cursor="pointer";
      wobli.onclick=() => { top.location.href=alink; }
    }
    wobble.appendChild(wobli);
  }
  setInterval("wobbler()", speed);
}}

function wobbler() {
  for (let i=0; i<wobtxt.length; i++) document.getElementById(`wobb${i}`).style.top=`${Math.round(wobbleheight*Math.sin(i+wobcnt))}px`
  wobcnt++;
}

const cats = [
  "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_1.png",
  "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_2.png",
  "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_3.png",
  "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_4.png",
  "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_5.png",
  "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/cat_6.png"
];
const rainbow_cats = [
  "https://3681a2d2784956323369-b57f388ffba74a9d5600392ce75da4b1.ssl.cf2.rackcdn.com/cats/rainbow/cat_1.png",
 ...