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,123 @@
+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;
+
+  @action
+  cleanupRive() {
+    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 = stateMachines[0];
+        console.log('Playing hover animation with state machine:', stateMachineName);
+        this.riveInstance.reset();
+        this.riveInstance.play(stateMachineName);
+      }
+    }
+  }
+
+  @action
+  handleMouseLeave() {
+    if (this.riveInstance) {
+      // Stop the animation and reset to initial state
+      this.riveInstance.stop();
+      this.riveInstance.reset();
+    }
+  }
+
+  @action
+  setupRive(element: HTMLDivElement) {
+    this.container = element;
+
+    try {
+      // Create canvas element
+      const canvas = document.createElement('canvas');
+      canvas.width = 141; // Fixed size for crisp rendering
+      canvas.height = 144;
+      canvas.style.width = '100%';
+      canvas.style.height = '100%';
+      canvas.style.border = '1px solid red'; // Visual debugging
+      element.appendChild(canvas);
+
+      // Initialize Rive
+      this.riveInstance = new Rive({
+        src: '/assets/animations/gleam_logo_animation.riv',
+        canvas: canvas,
+        autoplay: false,
+        onLoad: () => {
+          console.log('Gleam logo animation loaded');
+
+          // Log available state machines
+          const stateMachines = this.riveInstance?.stateMachineNames;
+          console.log('All State Machines:', stateMachines);
+
+          if (stateMachines && stateMachines.length > 0) {
+            // Log details about each state machine
+            stateMachines.forEach((name, index) => {
+              console.log(`State Machine ${index + 1}:`, {
+                name,
+                inputs: this.riveInstance?.stateMachineInputs(name),
+              });
+            });
+          }
+
+          // Play initial animation directly with longer delay
+          setTimeout(() => {
+            if (this.riveInstance) {
+              const stateMachines = this.riveInstance.stateMachineNames;
+
+              if (stateMachines && stateMachines.length > 0) {
+                // Try each state machine
+                stateMachines.forEach((stateMachineName) => {
+                  console.log('Attempting to play with state machine:', stateMachineName);
+
+                  // Reset and play
+                  this.riveInstance?.reset();
+                  this.riveInstance?.play(stateMachineName);
+
+                  // Log animation state after a short delay
+                  setTimeout(() => {
+                    if (this.riveInstance) {
+                      console.log('Animation state after play:', {
+                        stateMachine: stateMachineName,
+                        isPlaying: this.riveInstance.isPlaying,
+                        isPaused: this.riveInstance.isPaused,
+                        isStopped: this.riveInstance.isStopped,
+                        allStateMachines: this.riveInstance.stateMachineNames,
+                      });
+                    }
+                  }, 500);
+                });
+              }
+            }
+          }, 2000);
+        },
+      });
+    } 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",