themes/default/layouts/shortcodes/animate: Add animate

3 files changed, 236 insertions, 0 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index a923d4b..dc5acfb 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -2048,3 +2048,209 @@ main micro-card:first-of-type reaction-tip img {
     display: none;
   }
 }
+
+/* ----- Animations ----- */
+
+text-animation {
+  height: 0;
+}
+
+text-animation,
+text-animation span {
+  display: inline-block;
+}
+
+text-animation[rattle],
+text-animation[default] {
+  animation: tilt-rightward 0.15s infinite, tilt-leftward 0.2s infinite;
+}
+
+text-animation[roll] span {
+  animation: rotateY 2s infinite;
+  animation-delay: calc(0.2s * var(--frame));
+}
+
+text-animation[flip] span {
+  animation: rotateX 2.35s infinite;
+  animation-delay: calc(0.2s * var(--frame));
+}
+
+text-animation[twirl] span {
+  animation: rotateZ 3s infinite;
+  animation-delay: calc(0.2s * var(--frame));
+}
+
+text-animation[wave] span {
+  animation: up 1s infinite;
+  animation-delay: calc(0.1s * var(--frame));
+}
+
+text-animation[skip] span {
+  animation: skip 1s infinite;
+  animation-delay: calc(0.1s * var(--frame));
+}
+
+text-animation[jiggle] span {
+  animation: up 0.2s infinite, down 0.3s infinite, leftward 0.25s infinite;
+  animation-delay: calc(0.1s * var(--frame));
+}
+
+text-animation[float] span {
+  animation: up 1s infinite;
+}
+
+text-animation[hop] span {
+  animation: hop 1s infinite;
+}
+
+text-animation[twitch] {
+  animation: quiver 2.25s infinite, quiver 1.45s infinite;
+}
+
+text-animation[tremble] {
+  animation: quiver 0.15s infinite, quiver 0.25s infinite, quiver 0.35s infinite;
+}
+
+text-animation[shake] span {
+  animation: left 0.15s infinite;
+}
+
+text-animation[waggle] span {
+  animation: left 0.5s infinite;
+}
+
+text-animation[jump] span {
+  animation: up 0.15s infinite;
+}
+
+text-animation[vibrate] span {
+  animation: up 0.125s infinite, left 0.15s infinite;
+}
+
+text-animation[grow] span {
+  animation: maximize 1s infinite;
+}
+
+text-animation[shrink] span {
+  animation: minimize 1s infinite;
+}
+
+text-animation[distort] span {
+  animation: distort 1.5s infinite;
+}
+
+@keyframes rotateY {
+  0%,
+  50% {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes rotateX {
+  0%,
+  50% {
+    transform: rotateX(360deg);
+  }
+}
+
+@keyframes rotateZ {
+  0%,
+  50% {
+    transform: rotateZ(360deg);
+  }
+}
+
+@keyframes tilt-rightward {
+  50% {
+    transform: rotateZ(7.5deg);
+  }
+}
+
+@keyframes tilt-leftward {
+  50% {
+    transform: rotateZ(-7.5deg);
+  }
+}
+
+@keyframes up {
+  50% {
+    transform: translateY(-0.15rem);
+  }
+}
+
+@keyframes down {
+  50% {
+    transform: translateY(0.15rem);
+  }
+}
+
+@keyframes left {
+  50% {
+    transform: translateX(-0.15rem);
+  }
+}
+
+@keyframes leftward {
+  50% {
+    transform: translateX(-0.05rem);
+  }
+}
+
+@keyframes maximize {
+  50% {
+    transform: scale(1.15);
+  }
+}
+
+@keyframes minimize {
+  50% {
+    transform: scale(0.85);
+  }
+}
+
+@keyframes skip {
+  0%,
+  50%,
+  100% {
+    transform: translateY(0);
+  }
+  10% {
+    transform: translateY(-0.25rem);
+  }
+}
+
+@keyframes hop {
+  0%,
+  30%,
+  50% {
+    transform: translateY(0);
+  }
+  10%,
+  40% {
+    transform: translateY(-0.25rem);
+  }
+}
+
+@keyframes quiver {
+  5% {
+    transform: translateY(-0.025rem) skewX(-5deg) scale(0.9);
+  }
+  10% {
+    transform: none;
+  }
+}
+
+@keyframes distort {
+  0% {
+    text-shadow: 1px 1px var(--danger), -1px -1px var(--link);
+  }
+  10% {
+    text-shadow: -1px -2px var(--danger), 1px 1px var(--link);
+  }
+  15% {
+    text-shadow: 1px -1px var(--danger), -1px 1px var(--link);
+  }
+  100% {
+    text-shadow: none;
+  }
+}
diff --git a/content/canory/messages/animations.md b/content/canory/messages/animations.md
new file mode 100644
index 0000000..f298b8b
--- /dev/null
+++ b/content/canory/messages/animations.md
@@ -0,0 +1,19 @@
++++
+date     = "2022-03-16T05:41:52+00:00"
+lastmod  = "2022-03-16T05:41:52+00:00"
+tags    = [ "docs", "animate" ]
+author  = "canory"
++++
+
+Text animations are out of style. Wait.. {{< animate waggle "nu-uh" >}}, just
+checked the clock --- and would ya know they're back in {{< animate twirl style
+>}}.
+
+- Observe the {{< animate roll signs. >}} Reality {{< animate flip bingo >}}.
+- We are {{< animate float floating >}} on magic pixie dust. Very {{< animate tremble scary. >}}
+- My ego is under {{< animate vibrate attack >}}. Oh {{< animate jiggle "noo!" >}}
+- Just pick {{< animate hop me >}} please, {{< animate twitch pretty >}} please..
+- It's all just an {{< animate skip animation >}}. Frames per second: {{< animate rattle "Infinite!" >}}
+- Command line {{< animate wave flags. >}} Sorcery and {{< animate distort runes. >}}
+- Resist the {{< animate shake struggle >}}. You must {{< animate jump fight >}}.
+- Big {{< animate shrink weak >}}, Little {{< animate grow strong. >}}
diff --git a/themes/default/layouts/shortcodes/animate.html b/themes/default/layouts/shortcodes/animate.html
new file mode 100644
index 0000000..15b0fbc
--- /dev/null
+++ b/themes/default/layouts/shortcodes/animate.html
@@ -0,0 +1,11 @@
+{{- $type := default "default" (.Get "type" | default (.Get 0)) -}}
+{{- $text := default "animate" (.Get "text" | default (.Get 1)) -}}
+
+{{- $letters := split ($text | markdownify) "" -}}
+
+<text-animation {{ $type }}>
+{{- range $value, $letter := $letters -}}
+  <span style="--frame:{{ $value }}">{{ $letter }}</span>
+{{- end -}}
+</text-animation>
+{{- /* This comment removes trailing newlines and white spaces. */ -}}