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

# Output Formats

> Detailed specifications for each visualisation output format supported by the API.

## Video & Motion

### MP4 Video

Server-rendered video files for certificates, social sharing, and marketing.

```graphql theme={null}
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: MP4
    template: IMPACT_CERTIFICATE
    parameters: {
      resolution: "1920x1080"
      fps: 30
      duration: 10000
      branding: { logo: true, colors: "custom", primaryColor: "#F83B00" }
    }
  }) {
    url
    format
    fileSize
    duration
    expiresAt
  }
}
```

### After Effects (Data-Driven Rendering)

Push data into After Effects templates for automated video production:

```graphql theme={null}
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: AFTER_EFFECTS
    template: SOCIAL_SHARE_VIDEO
    parameters: {
      templateId: "ae_tmpl_impact_story"
      dataMapping: {
        productName: "{{product.name}}"
        co2Score: "{{product.impactScore.co2Equivalent}}"
        equivalency: "{{product.impactScore.equivalencies[0].description}}"
      }
    }
  }) {
    url
    renderJobId
    status
    estimatedCompletion
  }
}
```

## Interactive UI

### Lottie / LottieFiles

JSON parameters to drive Lottie animations client-side:

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

Returns parameters to feed into a Lottie player:

```json theme={null}
{
  "parameters": {
    "score": 87,
    "maxScore": 100,
    "label": "Sustainability Score",
    "color": "#4CAF50",
    "segments": [
      { "name": "Materials", "value": 45, "color": "#2196F3" },
      { "name": "Transport", "value": 25, "color": "#FF9800" },
      { "name": "Production", "value": 17, "color": "#9C27B0" }
    ]
  },
  "templateUrl": "https://assets.heychocolate.com/lottie/score-gauge.json"
}
```

### Rive

State-machine-driven animations with real-time data:

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

## 3D / Spatial

### Three.js

Parameters for Three.js scene configuration:

```graphql theme={null}
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: THREEJS
    template: SUPPLY_CHAIN_GLOBE
  }) {
    sceneData {
      nodes { id position label value }
      edges { from to weight }
      camera { position lookAt }
    }
  }
}
```

### Spline

Spline scene parameters for 3D product configurators:

```graphql theme={null}
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: SPLINE
    template: PRODUCT_CONFIGURATOR
  }) {
    sceneUrl
    variables {
      name
      type
      value
    }
  }
}
```

## No-Code Tools

### Webflow

Embeddable components for Webflow sites. See [Webflow Integration](/apps/integrations/webflow).

### Framer

React-based components for Framer projects. See [Framer Integration](/apps/integrations/framer).

## Unicorn Studio

WebGL-based visual effects driven by sustainability data:

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

## Template library

| Template               | Formats            | Description                                  |
| ---------------------- | ------------------ | -------------------------------------------- |
| `SCORE_GAUGE`          | Lottie, Rive       | Animated circular score indicator            |
| `IMPACT_BREAKDOWN`     | Lottie, MP4        | Animated breakdown by lifecycle phase        |
| `IMPACT_CERTIFICATE`   | MP4, PDF           | Shareable impact certificate                 |
| `SUPPLY_CHAIN_GLOBE`   | Three.js           | Interactive 3D globe with supply chain nodes |
| `PRODUCT_CONFIGURATOR` | Spline, Three.js   | 3D product with material visualization       |
| `COMPARISON_CHART`     | Lottie, Rive       | Animated side-by-side comparison             |
| `SOCIAL_SHARE_VIDEO`   | MP4, After Effects | Social media-ready impact video              |
| `PARTICLE_IMPACT`      | Unicorn Studio     | Particle-based impact visualization          |
| `CARBON_BADGE`         | Lottie, SVG        | Embeddable sustainability badge              |