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

# Visualisation Engine

> Transform sustainability data into rich visual assets across multiple output formats.

The Visualisation Engine generates high-quality visual assets from sustainability data. Instead of only returning JSON, the API can produce animated graphics, videos, 3D scenes, and interactive components — ready to embed in any platform.

## Supported output formats

<CardGroup cols={2}>
  <Card title="Lottie & LottieFiles" icon="play" href="/apps/visualisation/lottie-rive">
    Dynamic JSON-driven animations controlled by impact scores.
  </Card>

  <Card title="Rive" icon="bezier-curve" href="/apps/visualisation/lottie-rive">
    State-machine-driven interactive animations.
  </Card>

  <Card title="Three.js & Spline" icon="cube" href="/apps/visualisation/threejs-spline">
    3D scenes and configurators driven by sustainability data.
  </Card>

  <Card title="MP4 Video & After Effects" icon="film" href="/apps/visualisation/video-motion">
    Data-driven video rendering for certificates and social sharing.
  </Card>

  <Card title="Unicorn Studio" icon="wand-magic-sparkles" href="/apps/visualisation/unicorn-studio">
    WebGL-based visual effects and interactive experiences.
  </Card>
</CardGroup>

## How it works

1. **Request an asset** — Specify the product, data points, and desired output format
2. **Engine renders** — The visualisation pipeline processes the data and generates the asset
3. **Receive the result** — Get a URL to the rendered asset or real-time parameters to drive client-side rendering

## Render modes

| Mode                | Description                                                    | Use case                                    |
| ------------------- | -------------------------------------------------------------- | ------------------------------------------- |
| **Server-rendered** | Asset is fully rendered server-side and returned as a file URL | Videos, PDFs, static images                 |
| **Data-driven**     | API returns parameters that drive a client-side template       | Lottie, Rive, Three.js, Spline              |
| **Hybrid**          | Pre-rendered base with real-time data overlay                  | Interactive widgets with cached backgrounds |

## Quick example

Generate a Lottie animation showing a product's impact breakdown:

```graphql theme={null}
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: LOTTIE
    template: IMPACT_BREAKDOWN
    parameters: {
      colorScheme: "brand"
      animationDuration: 3000
      showEquivalency: true
    }
  }) {
    format
    url
    parameters
    expiresAt
  }
}
```

## Platform integrations

The visualisation engine integrates with popular design and development tools:

| Tool               | Integration type | Description                           |
| ------------------ | ---------------- | ------------------------------------- |
| **Webflow**        | Embed component  | Drop-in sustainability widgets        |
| **Framer**         | React component  | Interactive data-driven components    |
| **Next.js**        | npm package      | Server-rendered and client components |
| **Nuxt.js**        | npm package      | SSR and client-side rendering         |
| **After Effects**  | Data template    | Automated video rendering pipeline    |
| **Unicorn Studio** | WebGL feed       | Real-time data-driven visual effects  |

<Card title="Output Formats" icon="images" href="/visualisation/output-formats">
  See detailed specifications for each output format.
</Card>