> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heychocolate.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Lottie & Rive

> Drive Lottie and Rive animations with real-time sustainability data.

The Hey Chocolate API can drive Lottie and Rive animations with real-time sustainability data, creating dynamic visual experiences that respond to product impact scores.

Our API can also deliver personalised lottie jsons (with audio), ready to be embedded in your app or web app, and enable a video-like experience without server-side rendering involved.

## Lottie integration

### Getting animation parameters

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

### Using with lottie-web

```javascript theme={null}
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() });
    }
  });
});
```

### Using with LottieFiles

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

## Rive integration

### Getting state machine inputs

```graphql theme={null}
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: RIVE
    template: IMPACT_DASHBOARD
  }) {
    templateUrl
    stateMachineInputs
    parameters
  }
}
```

### Using with @rive-app/canvas

```javascript theme={null}
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;
  },
});
```

## Available templates

| Template           | Format       | Description                                 |
| ------------------ | ------------ | ------------------------------------------- |
| `SCORE_GAUGE`      | Lottie, Rive | Animated circular score indicator           |
| `IMPACT_BREAKDOWN` | Lottie       | Animated pie/bar chart of lifecycle phases  |
| `IMPACT_DASHBOARD` | Rive         | Interactive dashboard with multiple metrics |
| `COMPARISON_CHART` | Lottie, Rive | Animated side-by-side comparison            |
| `CARBON_BADGE`     | Lottie       | Animated sustainability badge               |
| `SAVINGS_COUNTER`  | Lottie       | Counter animation showing CO2 savings       |