Skip to main content

Video & Motion

MP4 Video

Server-rendered video files for certificates, social sharing, and marketing.
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:
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:
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: LOTTIE
    template: SCORE_GAUGE
  }) {
    parameters
    templateUrl
  }
}
Returns parameters to feed into a Lottie player:
{
  "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:
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: RIVE
    template: IMPACT_DASHBOARD
  }) {
    parameters
    templateUrl
    stateMachineInputs
  }
}

3D / Spatial

Three.js

Parameters for Three.js scene configuration:
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:
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.

Framer

React-based components for Framer projects. See Framer Integration.

Unicorn Studio

WebGL-based visual effects driven by sustainability data:
mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: UNICORN_STUDIO
    template: PARTICLE_IMPACT
  }) {
    embedCode
    parameters
  }
}

Template library

TemplateFormatsDescription
SCORE_GAUGELottie, RiveAnimated circular score indicator
IMPACT_BREAKDOWNLottie, MP4Animated breakdown by lifecycle phase
IMPACT_CERTIFICATEMP4, PDFShareable impact certificate
SUPPLY_CHAIN_GLOBEThree.jsInteractive 3D globe with supply chain nodes
PRODUCT_CONFIGURATORSpline, Three.js3D product with material visualization
COMPARISON_CHARTLottie, RiveAnimated side-by-side comparison
SOCIAL_SHARE_VIDEOMP4, After EffectsSocial media-ready impact video
PARTICLE_IMPACTUnicorn StudioParticle-based impact visualization
CARBON_BADGELottie, SVGEmbeddable sustainability badge