Skip to main content
Unicorn Studio enables creating WebGL-based visual effects and interactive experiences driven by Hey Chocolate sustainability data.

​
Integration

​
Getting embed parameters

mutation {
  renderVisualisation(input: {
    productId: "prod_abc123"
    format: UNICORN_STUDIO
    template: PARTICLE_IMPACT
  }) {
    embedCode
    parameters
    sceneId
  }
}

​
Embedding in your page

<div id="unicorn-container" style="width: 100%; height: 400px;"></div>

<script src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v2.0.5/dist/unicornStudio.umd.js"></script>
<script>
  UnicornStudio.addScene({
    elementId: 'unicorn-container',
    projectId: 'hc_particle_impact',
  }).then(scene => {
    // scene.destroy() — remove scene when done
    // scene.resize() — call when container size changes
    // scene.paused = true — pause playback
  });
</script>

​
Available templates

TemplateDescription
PARTICLE_IMPACTParticle system visualizing CO2 volume — fewer particles = lower impact
GRADIENT_SCOREDynamic gradient background that shifts based on sustainability score
WAVE_COMPARISONWave effect comparing two products
ORB_DASHBOARDFloating orb with rotating metrics

​
Data mapping

VariableTypeDescription
co2ScoreFloatCO2 equivalent value
mkiScoreFloatMKI score
scoreCategoryStringlow, medium, high — controls visual intensity
primaryColorStringHex color for the visual effect
particleCountIntNumber of particles (derived from impact)
animationSpeedFloatAnimation speed multiplier

​
Performance

Unicorn Studio uses WebGL. For optimal performance:
  • Set a fixed container height to prevent layout shifts
  • Use loading="lazy" for below-the-fold scenes
  • The SDK automatically falls back to a static image on unsupported browsers