refactor(less): add three lost files

less/_dot-emoji.less → less/_dot-bouncing.less

@@ -1,38 +1,50 @@
 /**
  * ==============================================
- * Experiment
- * Dot Emoji ⚽ 🏀 🏐
+ * Experimental: Emoji
+ * Dot Bouncing
  * ==============================================
  */
 
 @d: 20px;
 
-.dot-emoji {
-  font-size: 10px;
-  height: @dot-height;
+.dot-bouncing {
   position: relative;
+  height: @dot-height;
+  font-size: 10px;
 
   &::before {
-    animation: dot-emoji 1s infinite;
-    content: "⚽🏀🏐";
+    content: '⚽🏀🏐';
     display: inline-block;
     position: relative;
+    animation: dot-bouncing 1s infinite;
   }
 }
 
-@keyframes dot-emoji {
+@keyframes dot-bouncing {
   0% {
-    animation-timing-function: ease-in;
     top: -@d;
+    animation-timing-function: ease-in;
+  }
+
+  34% {
+    transform: scale(1, 1);
   }
-  34% { transform: scale(1, 1); }
 
   35% {
-    animation-timing-function: ease-out;
     top: @d;
+    animation-timing-function: ease-out;
     transform: scale(1.5, .5);
   }
-  45% { transform: scale(1, 1); }
-  90% { top: -@d; }
-  100% { top: -@d; }
+
+  45% {
+    transform: scale(1, 1);
+  }
+
+  90% {
+    top: -@d;
+  }
+
+  100% {
+    top: -@d;
+  }
 }

less/_dot-gathering.less

@@ -0,0 +1,56 @@
+/**
+ * ==============================================
+ * Experimental: Gooey Effect
+ * Dot Gathering
+ * ==============================================
+ */
+
+@dot-color-hsl: hsl(0, 100%, 0%);
+
+@d: 50px;
+
+.dot-gathering {
+  position: relative;
+
+  .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
+
+  margin: -1px 0;
+  filter: blur(2px);
+
+  &::before,
+  &::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: -@d;
+
+    .dot(@width: 12px, @height: 12px, @radius: 6px, @bg-color: @dot-color-hsl, @color: transparent);
+
+    opacity: 0;
+    filter: blur(2px);
+    animation: dot-gathering 2s infinite ease-in;
+  }
+
+  &::after {
+    animation-delay: .5s;
+  }
+}
+
+@keyframes dot-gathering {
+  0% {
+    opacity: 0;
+    transform: translateX(0);
+  }
+
+  35%,
+  60% {
+    opacity: 1;
+    transform: translateX(@d);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(@d * 2);
+  }
+}

less/_dot-rolling.less

@@ -0,0 +1,69 @@
+/**
+ * ==============================================
+ * Experimental: Emoji
+ * Dot Rolling
+ * ==============================================
+ */
+
+@d: 20px;
+
+.dot-rolling {
+  position: relative;
+  height: @dot-height;
+  font-size: 10px;
+
+  &::before {
+    content: '⚽';
+    display: inline-block;
+    position: relative;
+    transform: translateX(-25px);
+    animation: dot-rolling 3s infinite;
+  }
+}
+
+@keyframes dot-rolling {
+  0% {
+    content: '⚽';
+    transform: translateX(-25px) rotateZ(0deg);
+  }
+
+  16.667% {
+    content: '⚽';
+    transform: translateX(25px) rotateZ(720deg);
+  }
+
+  33.333% {
+    content: '⚽';
+    transform: translateX(-25px) rotateZ(0deg);
+  }
+
+  34.333% {
+    content: '🏀';
+    transform: translateX(-25px) rotateZ(0deg);
+  }
+
+  50% {
+    content: '🏀';
+    transform: translateX(25px) rotateZ(720deg);
+  }
+
+  66.667% {
+    content: '🏀';
+    transform: translateX(-25px) rotateZ(0deg);
+  }
+
+  67.667% {
+    content: '🏐';
+    transform: translateX(-25px) rotateZ(0deg);
+  }
+
+  83.333% {
+    content: '🏐';
+    transform: translateX(25px) rotateZ(720deg);
+  }
+
+  100% {
+    content: '🏐';
+    transform: translateX(-25px) rotateZ(0deg);
+  }
+}