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.
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
}
}
{
"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
}
}
}
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
| 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 |
