Unicorn Studio - Hey Chocolate

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

Template	Description
`PARTICLE_IMPACT`	Particle system visualizing CO2 volume — fewer particles = lower impact
`GRADIENT_SCORE`	Dynamic gradient background that shifts based on sustainability score
`WAVE_COMPARISON`	Wave effect comparing two products
`ORB_DASHBOARD`	Floating orb with rotating metrics

Data mapping

Variable	Type	Description
`co2Score`	Float	CO2 equivalent value
`mkiScore`	Float	MKI score
`scoreCategory`	String	`low`, `medium`, `high` — controls visual intensity
`primaryColor`	String	Hex color for the visual effect
`particleCount`	Int	Number of particles (derived from impact)
`animationSpeed`	Float	Animation 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