animations

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>

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">

assets/javascripts/discourse/components/reports/word-cloud.gjs

@@ -1,16 +1,24 @@
 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__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>
     </div>

assets/stylesheets/common/card.scss

@@ -1,3 +1,37 @@
+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);
@@ -9,4 +43,86 @@
     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;
 }

assets/stylesheets/common/index.scss

@@ -7,3 +7,5 @@
 @import "best-posts";
 @import "best-topics";
 @import "word-cloud";
+@import "favorite-tags";
+@import "favorite-categories";