Visualisation Engine

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

Lottie & LottieFiles

Dynamic JSON-driven animations controlled by impact scores.

Rive

State-machine-driven interactive animations.

Three.js & Spline

3D scenes and configurators driven by sustainability data.

MP4 Video & After Effects

Data-driven video rendering for certificates and social sharing.

Unicorn Studio

WebGL-based visual effects and interactive experiences.

How it works

Request an asset — Specify the product, data points, and desired output format
Engine renders — The visualisation pipeline processes the data and generates the asset
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:

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

Output Formats

See detailed specifications for each output format.

Getting Started

Core Concepts

Compliance & Intelligence

Visualisation Engine

Supported output formats

Lottie & LottieFiles

Rive

Three.js & Spline

MP4 Video & After Effects

Unicorn Studio

How it works

Render modes

Quick example

Platform integrations

Output Formats

​Supported output formats

Lottie & LottieFiles

Rive

Three.js & Spline

MP4 Video & After Effects

Unicorn Studio

​How it works

​Render modes

​Quick example

​Platform integrations

Output Formats

Supported output formats

How it works

Render modes

Quick example

Platform integrations