embed-unicornstudio's Introduction

Embed your Unicorn Studio projects

Include the script

Add the script tag to the <head> of your page

<script src="https://cdn.unicorn.studio/v1.2.0/unicornStudio.umd.js"></script>

or import into your component

import * as UnicornStudio from './path/to/unicornStudio.umd.js'

Initialize your scene:

Inline

Any element with data-us-project will get initialized by calling UnicornStudio.init(). If you're hosting your own exported JSON file, use data-us-project-src to point to its location. If you host your own JSON, remembder you'll need to update this file when you make changes to your scene in Unicorn.studio.

<div class="unicorn-embed"
  data-us-project="YOUR_PROJECT_EMBED_ID"
  data-us-project-src="path/to/your/PROJECT_ID.json"
  data-us-scale="1"
  data-us-dpi="1.5"
  data-us-disableMobile="true"
></div>
<script>
  UnicornStudio.init().then(scenes => {
    // Scenes are ready
  }).catch((err) => {
    console.error(err);
  });
</script>

Dynamically

You can add a scene dynamically during or after pageload.

<div class="unicorn-embed" id="unicorn"></div>
<script>
  UnicornStudio.addScene({
    elementId: 'unicorn', // id of the HTML element to render your scene in (the scene will use its dimensions)
    fps: 60, // frames per second (0-120) [optional]
    scale: 1, // rendering scale, use smaller values for performance boost (0.25-1) [optional]
    dpi: 1, // pixel ratio [optional]
    projectId: 'YOUR_PROJECT_EMBED_ID', // the id string for your embed (get this from "embed" export)
    filePath: 'path/to/your/PROJECT_ID.json', // if youre hosting your own exported json code, point to it here
    interactivity: { // [optional]
      mouse: {
        disableMobile: true, // disable touch movement on mobile
        momentum: 1.1 // mouse movement momentum
      },
      scroll: {
        disableMobile: true, // disable scroll effects on mobile
        momentum: 1.1 // scroll momentum
      }
    }
  }).then(scene => {
    // Scene is ready
    // To remove a scene, you can use:
    // scene.destroy()
  }).catch((err) => {
    console.error(err);
  });
</script>

Any values set in the UI will be overridden by values defined in the optional params.

Destroy all scenes:

  UnicornStudio.destroy();

Live example

https://codepen.io/georgehastings/pen/ExGrqMJ

embed-unicornstudio's People

Contributors

Stargazers

Watchers

embed-unicornstudio's Issues

Interactivity Settings disableMobile Not Working for Mobile Devices

(Love your product) However, seems to be a problem with:

UnicornStudio.addScene({
// These params are required;
elementId: 'id',
projectId: 'pid',

  // These params are optional;
  fps: 60,
  scale: 1,
  dpi: 1,
  interactivity: {
    mouse: {
      disableMobile: true,
      momentum: 1.1
    },
    scroll: {
      disableMobile: true,
      momentum: 1.1
    }
  }
}).then(() => {
  // Scene is ready
}).catch((err) => {
  console.error(err);
});

As it still are interactions on mobile even when set to false. Could not find out why this happens or how to fix this.

Recommend Projects