From a36c61c92c9f3f0f5ad0b7d19d037c29963675df Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <jordan@jordanvidrine.com>
Date: Fri, 3 Jan 2025 11:44:06 -0600
Subject: [PATCH] animations

---
 .../components/reports/reactions.gjs          |   9 +-
 .../components/reports/reading-time.gjs       |   1 +
 .../components/reports/word-cloud.gjs         |  16 +-
 assets/stylesheets/common/card.scss           | 138 ++++++++++++++++--
 assets/stylesheets/common/index.scss          |   2 +
 5 files changed, 150 insertions(+), 16 deletions(-)

diff --git a/assets/javascripts/discourse/components/reports/reactions.gjs b/assets/javascripts/discourse/components/reports/reactions.gjs
index 222220c..4a8cab8 100644
--- a/assets/javascripts/discourse/components/reports/reactions.gjs
+++ b/assets/javascripts/discourse/components/reports/reactions.gjs
@@ -16,6 +16,10 @@ export default class Reactions extends Component {
     ).reduce((acc, count) => acc + count, 0);
   }
 
+  get randomModifier() {
+    return Math.random();
+  }
+
   @action
   computePercentage(count) {
     return `${((count / this.totalPostUsedReactions) * 100).toFixed(2)}%`;
@@ -31,7 +35,10 @@ export default class Reactions extends Component {
       <h3 class="rewind-report-title">Most received reactions in topics</h3>
       <div class="rewind-report-container">
         {{#each-in @report.data.post_received_reactions as |emojiName count|}}
-          <div class="rewind-card scale">
+          <div
+            class="rewind-card scale"
+            style="--rand: {{this.randomModifier}}"
+          >
             <span class="rewind-card__emoji">{{replaceEmoji
                 (concat ":" emojiName ":")
               }}</span>
diff --git a/assets/javascripts/discourse/components/reports/reading-time.gjs b/assets/javascripts/discourse/components/reports/reading-time.gjs
index c16be52..d93c8a3 100644
--- a/assets/javascripts/discourse/components/reports/reading-time.gjs
+++ b/assets/javascripts/discourse/components/reports/reading-time.gjs
@@ -1,5 +1,6 @@
 import Component from "@glimmer/component";
 
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class ReadingTime extends Component {
   <template>
     <div class="rewind-report-page">
diff --git a/assets/javascripts/discourse/components/reports/word-cloud.gjs b/assets/javascripts/discourse/components/reports/word-cloud.gjs
index b142598..62a37c3 100644
--- a/assets/javascripts/discourse/components/reports/word-cloud.gjs
+++ b/assets/javascripts/discourse/components/reports/word-cloud.gjs
@@ -1,15 +1,23 @@
 import Component from "@glimmer/component";
 
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class WordCloud extends Component {
+  get randomModifier() {
+    return Math.random();
+  }
+
   <template>
     <div class="rewind-report-page -word-cloud">
       <h3 class="rewind-report-title">Most used words</h3>
       <div class="rewind-report-container">
         {{#each-in @report.data as |word count|}}
-          <div class="rewind-card">
-            <span class="rewind-card__title">{{word}}</span>
-            <span class="rewind-card__data">{{count}} times</span>
+          <div
+            class="rewind-card__wrapper"
+            style="--rand: {{this.randomModifier}}"
+          >
+            <div class="rewind-card">
+              <span class="rewind-card__title">{{word}}</span>
+              <span class="rewind-card__data">{{count}} times</span>
+            </div>
           </div>
         {{/each-in}}
       </div>
diff --git a/assets/stylesheets/common/card.scss b/assets/stylesheets/common/card.scss
index 9b04838..2e624c5 100644
--- a/assets/stylesheets/common/card.scss
+++ b/assets/stylesheets/common/card.scss
@@ -1,12 +1,128 @@
-.rewind-card {
-  box-shadow: 0 0 0 1px var(--primary-200);
-  border-radius: var(--d-border-radius);
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  padding: 1em;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  background: var(--secondary);
+body {
+  --ambientAmount: 0.1;
+  --easeAmount: 0;
+  animation: ambientMovement;
+  animation-duration: 24s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+
+.rewind-report-container {
+  perspective: 1000px;
+  transform-style: preserve-3d;
+}
+
+.rewind-card__wrapper {
+  will-change: transform;
+  transform-style: preserve-3d;
+  background-color: hsla(0deg, 0%, 0%, 10%);
+  border-radius: 0.25vw;
+  cursor: pointer;
+  animation-name: ambientMovement;
+  animation-duration: 4000ms;
+  animation-delay: calc(-4000ms * var(--rand));
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  transform: rotateZ(calc(var(--ambientAmount) * 10deg));
+  &__title {
+    font-weight: 600;
+  }
+  &__data {
+    font-family: monospace;
+    font-weight: normal;
+    font-size: 14px;
+  }
+  .rewind-card {
+    box-shadow: 0 0 0 1px var(--primary-200);
+    border-radius: var(--d-border-radius);
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    padding: 1em;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    background: var(--secondary);
+    will-change: transform;
+    position: relative;
+    transform-style: preserve-3d;
+  }
+  &:hover .rewind-card {
+    animation-name: easeOutElastic;
+    animation-duration: 400ms;
+    animation-fill-mode: forwards;
+    transform: translateZ(calc(var(--easeAmount) * 50px));
+    box-shadow: 0 0.15em calc(0.5em + (var(--easeAmount) * 0.5em))
+      calc(-0.25em - (var(--easeAmount) * 0.25em)) currentColor;
+    z-index: 1;
+  }
+}
+
+@keyframes ambientMovement {
+  0% {
+    --ambientAmount: 0.1;
+  }
+  50% {
+    --ambientAmount: -0.1;
+  }
+  100% {
+    --ambientAmount: 0.1;
+  }
+}
+
+@keyframes card-hover {
+  0% {
+    transform: translateY(0) rotate(0);
+  }
+  25% {
+    transform: translateY(-2px) rotate(2deg);
+  }
+  50% {
+    transform: translateY(-4px) rotate(-1deg);
+  }
+  75% {
+    transform: translateY(2px) rotate(-2deg);
+  }
+  100% {
+    transform: translateY(0) rotate(0);
+  }
+}
+
+@keyframes easeOutElastic {
+  0% {
+    --easeAmount: 0;
+  }
+  16% {
+    --easeAmount: 1.3227;
+  }
+  28% {
+    --easeAmount: 0.8688;
+  }
+  44% {
+    --easeAmount: 1.0463;
+  }
+  59% {
+    --easeAmount: 0.9836;
+  }
+  73% {
+    --easeAmount: 1.0058;
+  }
+  88% {
+    --easeAmount: 0.998;
+  }
+  100% {
+    --easeAmount: 1;
+  }
+}
+
+@property --easeAmount {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --ambientAmount {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.1;
 }
diff --git a/assets/stylesheets/common/index.scss b/assets/stylesheets/common/index.scss
index 4c13e68..01796d0 100644
--- a/assets/stylesheets/common/index.scss
+++ b/assets/stylesheets/common/index.scss
@@ -7,3 +7,5 @@
 @import "best-posts";
 @import "best-topics";
 @import "word-cloud";
+@import "favorite-tags";
+@import "favorite-categories";