Animation on hover w/ Gleam Logo

app/components/gleam-logo.hbs

@@ -0,0 +1,9 @@
+<div
+  class="gleam-logo-container"
+  {{did-insert this.setupRive}}
+  {{will-destroy this.cleanupRive}}
+  {{on "mouseenter" this.handleMouseEnter}}
+  {{on "mouseleave" this.handleMouseLeave}}
+>
+  {{! The canvas will be inserted here by Rive }}
+</div>

app/components/gleam-logo.ts

@@ -0,0 +1,124 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { Rive } from '@rive-app/canvas';
+
+interface GleamLogoSignature {
+  Element: HTMLDivElement;
+  Args: {
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+  };
+  Blocks: Record<string, never>;
+}
+
+export default class GleamLogoComponent extends Component<GleamLogoSignature> {
+  @tracked riveInstance: Rive | null = null;
+  container: HTMLElement | null = null;
+  animationInterval: number | null = null;
+
+  @action
+  cleanupRive() {
+    if (this.animationInterval) {
+      clearInterval(this.animationInterval);
+      this.animationInterval = null;
+    }
+
+    if (this.riveInstance) {
+      this.riveInstance.stop();
+      this.riveInstance = null;
+    }
+  }
+
+  @action
+  handleMouseEnter() {
+    if (this.riveInstance) {
+      const stateMachines = this.riveInstance.stateMachineNames;
+
+      if (stateMachines && stateMachines.length > 0) {
+        const stateMachineName = 'State Machine 1';
+
+        if (stateMachines.includes(stateMachineName)) {
+          this.riveInstance.reset();
+          this.riveInstance.play(stateMachineName);
+        }
+      }
+    }
+  }
+
+  @action
+  handleMouseLeave() {
+    if (this.riveInstance) {
+      this.riveInstance.stop();
+      this.riveInstance.reset();
+    }
+  }
+
+  @action
+  setupRive(element: HTMLDivElement) {
+    this.container = element;
+
+    try {
+      const canvas = document.createElement('canvas');
+      canvas.width = 141;
+      canvas.height = 144;
+      canvas.style.width = '100%';
+      canvas.style.height = '100%';
+      element.appendChild(canvas);
+
+      this.riveInstance = new Rive({
+        src: '/assets/animations/gleam_logo_animation.riv',
+        canvas: canvas,
+        autoplay: true,
+        automaticallyHandleEvents: true,
+        onLoad: () => {
+          // Set up interval to play animation every 15 seconds
+          this.animationInterval = window.setInterval(() => {
+            if (this.riveInstance) {
+              const stateMachines = this.riveInstance.stateMachineNames;
+
+              if (stateMachines && stateMachines.length > 0) {
+                const stateMachineName = 'State Machine 2';
+
+                if (stateMachines.includes(stateMachineName)) {
+                  this.riveInstance.reset();
+                  this.riveInstance.play(stateMachineName);
+                }
+              }
+            }
+
+            // Simulate mouse leave after a short delay
+            setTimeout(() => {
+              this.handleMouseLeave();
+            }, 2000);
+          }, 15000);
+          // Play initial animation with State Machine 2
+          setTimeout(() => {
+            if (this.riveInstance) {
+              const stateMachines = this.riveInstance.stateMachineNames;
+
+              if (stateMachines && stateMachines.length > 0) {
+                const stateMachine2 = 'State Machine 2';
+
+                if (stateMachines.includes(stateMachine2)) {
+                  this.riveInstance.reset();
+                  this.riveInstance.play(stateMachine2);
+
+                  // Then after 800ms, reset State Machine 2
+                  setTimeout(() => {
+                    if (this.riveInstance) {
+                      this.riveInstance.reset();
+                    }
+                  }, 800);
+                }
+              }
+            }
+          }, 500);
+        },
+      });
+    } catch (error: unknown) {
+      console.error('Error setting up Rive:', error);
+    }
+  }
+}

app/components/language-logo.hbs

@@ -1,4 +1,6 @@
-{{#if (eq @variant "color")}}
+{{#if (and (eq @language.slug "gleam") (eq @variant "color"))}}
+  <GleamLogo ...attributes />
+{{else if (eq @variant "color")}}
   <img alt={{@language.name}} src="{{@language.colorLogoUrl}}" ...attributes />
 {{else if (eq @variant "gray")}}
   <img alt={{@language.name}} src="{{@language.grayLogoUrl}}" ...attributes />

app/components/language-logo.ts

@@ -15,5 +15,6 @@ export default class LanguageLogoComponent extends Component<Signature> {}
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {
     LanguageLogo: typeof LanguageLogoComponent;
+    GleamLogo: typeof import('./gleam-logo').default;
   }
 }

app/styles/components/gleam-logo.css

@@ -0,0 +1,12 @@
+.gleam-logo-container {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.gleam-logo-container canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

package.json

@@ -202,6 +202,7 @@
   },
   "dependencies": {
     "@rails/actioncable": "^8.0.200",
+    "@rive-app/canvas": "^2.27.0",
     "@stripe/stripe-js": "^5.5.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.16",