> ## 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.

# Unicorn Studio

> WebGL-based visual effects driven by sustainability data.

Unicorn Studio enables creating WebGL-based visual effects and interactive experiences driven by Hey Chocolate sustainability data.

## Integration

### Getting embed parameters

```graphql theme={null}
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: UNICORN_STUDIO
    template: PARTICLE_IMPACT
  }) {
    embedCode
    parameters
    sceneId
  }
}
```

### Embedding in your page

```html theme={null}
<div id="unicorn-container" style="width: 100%; height: 400px;"></div>

<script src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.0.5/dist/unicornStudio.umd.js"></script>
<script>
  UnicornStudio.addScene({
    elementId: 'unicorn-container',
    projectId: 'hc_particle_impact',
  }).then(scene => {
    // scene.destroy() — remove scene when done
    // scene.resize() — call when container size changes
    // scene.paused = true — pause playback
  });
</script>
```

## Available templates

| Template          | Description                                                             |
| ----------------- | ----------------------------------------------------------------------- |
| `PARTICLE_IMPACT` | Particle system visualizing CO2 volume — fewer particles = lower impact |
| `GRADIENT_SCORE`  | Dynamic gradient background that shifts based on sustainability score   |
| `WAVE_COMPARISON` | Wave effect comparing two products                                      |
| `ORB_DASHBOARD`   | Floating orb with rotating metrics                                      |

## Data mapping

| Variable         | Type   | Description                                         |
| ---------------- | ------ | --------------------------------------------------- |
| `co2Score`       | Float  | CO2 equivalent value                                |
| `mkiScore`       | Float  | MKI score                                           |
| `scoreCategory`  | String | `low`, `medium`, `high` — controls visual intensity |
| `primaryColor`   | String | Hex color for the visual effect                     |
| `particleCount`  | Int    | Number of particles (derived from impact)           |
| `animationSpeed` | Float  | Animation speed multiplier                          |

## Performance

Unicorn Studio uses WebGL. For optimal performance:

* Set a fixed container height to prevent layout shifts
* Use `loading="lazy"` for below-the-fold scenes
* The SDK automatically falls back to a static image on unsupported browsers