Skip to main content
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

  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

ModeDescriptionUse case
Server-renderedAsset is fully rendered server-side and returned as a file URLVideos, PDFs, static images
Data-drivenAPI returns parameters that drive a client-side templateLottie, Rive, Three.js, Spline
HybridPre-rendered base with real-time data overlayInteractive 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:
ToolIntegration typeDescription
WebflowEmbed componentDrop-in sustainability widgets
FramerReact componentInteractive data-driven components
Next.jsnpm packageServer-rendered and client components
Nuxt.jsnpm packageSSR and client-side rendering
After EffectsData templateAutomated video rendering pipeline
Unicorn StudioWebGL feedReal-time data-driven visual effects

Output Formats

See detailed specifications for each output format.