Lottie & Rive

mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: LOTTIE
    template: SCORE_GAUGE
    parameters: {
      colorScheme: "brand"
      animationDuration: 3000
    }
  }) {
    templateUrl
    parameters
  }
}

import lottie from 'lottie-web';

const response = await fetch('/api/visualisation', {
  method: 'POST',
  body: JSON.stringify({
    productId: 'prod_abc123',
    format: 'LOTTIE',
    template: 'SCORE_GAUGE',
  }),
});
const { templateUrl, parameters } = await response.json();

const animation = lottie.loadAnimation({
  container: document.getElementById('impact-animation'),
  path: templateUrl,
  renderer: 'svg',
  loop: false,
  autoplay: true,
});

// Apply data-driven parameters
animation.addEventListener('DOMLoaded', () => {
  // Update text layers with impact data
  animation.renderer.elements.forEach((element) => {
    if (element.data?.nm === 'score') {
      element.updateDocumentData({ t: parameters.score.toString() });
    }
  });
});

<dotlottie-player
  src="https://assets.heychocolate.com/lottie/score-gauge.lottie"
  background="transparent"
  speed="1"
  style="width: 300px; height: 300px"
  autoplay
></dotlottie-player>

mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: RIVE
    template: IMPACT_DASHBOARD
  }) {
    templateUrl
    stateMachineInputs
    parameters
  }
}

import { Rive } from '@rive-app/canvas';

const response = await fetch('/api/visualisation', { /* ... */ });
const { templateUrl, stateMachineInputs } = await response.json();

const rive = new Rive({
  src: templateUrl,
  canvas: document.getElementById('impact-canvas'),
  stateMachines: 'ImpactDashboard',
  autoplay: true,
  onLoad: () => {
    const inputs = rive.stateMachineInputs('ImpactDashboard');

    // Set score value (drives gauge animation)
    const scoreInput = inputs.find(i => i.name === 'score');
    scoreInput.value = stateMachineInputs.score;

    // Set category (triggers state change)
    const categoryInput = inputs.find(i => i.name === 'category');
    categoryInput.value = stateMachineInputs.category;
  },
});