### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.5/README.md

Demonstrates initializing a Unicorn Studio scene directly within your HTML. Elements with `data-us-project` or `data-us-project-src` attributes will be automatically initialized when `UnicornStudio.init()` is called. This method handles scene setup and provides a promise that resolves when scenes are ready or rejects on error.

```html
<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"
  data-us-altText="Welcome to Unicorn Studio"
  data-us-ariaLabel="This is a canvas scene"
></div>
<script>
  UnicornStudio.init()
    .then((scenes) => {
      // Scenes are ready
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.3/README.md

This example shows how to initialize a Unicorn Studio scene using inline HTML elements with `data-us-project` and `data-us-project-src` attributes. The `UnicornStudio.init()` function is called to render the scenes. It handles both project IDs and custom JSON file paths. The initialization returns a promise that resolves with the ready scenes or rejects with an error.

```html
<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>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.3.1/README.md

This example shows how to initialize a Unicorn Studio scene directly within your HTML. Elements with the `data-us-project` attribute will be automatically initialized when `UnicornStudio.init()` is called. You can also specify the source of your project JSON using `data-us-project-src`. Various data attributes are available to configure the scene's appearance and behavior, such as scale, DPI, lazy loading, and accessibility.

```html
<div
  class="unicorn-embed"
  data-us-project="YOUR_PROJECT_EMBED_ID"
  data-us-project-src="path/to/your/PROJECT_ID.json (if you're using this, do not use data-us-project)"
  data-us-scale="1"
  data-us-dpi="1.5"
  data-us-lazyload="true"
  data-us-disableMobile="true"
  data-us-alttext="Welcome to Unicorn Studio"
  data-us-arialabel="This is a canvas scene"
></div>
<script>
  UnicornStudio.init()
    .then((scenes) => {
      // Scenes are ready
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Add Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.2/README.md

This example shows how to add a Unicorn Studio scene dynamically using JavaScript. You provide an element ID, project details, and optional configuration like FPS, scale, DPI, and interactivity settings. The `addScene` method returns a promise that resolves with the scene object, which has a `destroy` method.

```javascript
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
    }
  }
}).then(scene => { // scene is ready
  // To remove a scene, you can use:
  // scene.destroy()
}).catch((err) => {
  console.error(err);
});
```

--------------------------------

### Add Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.6/README.md

This example shows how to add a Unicorn Studio scene dynamically using JavaScript. The `UnicornStudio.addScene` function takes an object with configuration options like `elementId`, `projectId`, `filePath`, and various rendering parameters. It returns a promise that resolves with the scene object, which includes a `destroy` method.

```javascript
<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 (do not use both filePath and projectId, only one is required)
    altText: "Welcome to Unicorn Studio", // optional text for SEO, going inside the <canvas> tag
    ariaLabel: "This is a canvas scene", // optional text for the aria-label attribute on the <canvas> element
    production: false // when true, will hit the global edge CDN, learn more in the help docs
    interactivity: {
      // [optional]
      mouse: {
        disableMobile: true, // disable touch movement on mobile
      },
    },
  })
    .then((scene) => {
      // scene is ready
      // To remove a scene, you can use:
      // scene.destroy()
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Add Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.4.1/README.md

This example shows how to add a Unicorn Studio scene dynamically using JavaScript. The `addScene` method allows you to specify the target element, project ID or file path, and various rendering and interactivity options. It returns a promise that resolves with the scene instance, which can be used to destroy the scene later.

```javascript
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)
  lazyLoad: true, // will not initialize the scene until it scrolls into view
  filePath: "path/to/your/PROJECT_ID.json", // if youre hosting your own exported json code, point to it here (do not use both filePath and projectId, only one is required)
  altText: "Welcome to Unicorn Studio", // optional text for SEO, going inside the <canvas> tag
  ariaLabel: "This is a canvas scene", // optional text for the aria-label attribute on the <canvas> element
  production: false // when true, will hit the global edge CDN, learn more in the help docs
  interactivity: {
    // [optional]
    mouse: {
      disableMobile: true, // disable touch / scroll movement on mobile
    },
  },
})
  .then((scene) => {
    // scene is ready
    // To remove a scene, you can use:
    // scene.destroy()
  })
  .catch((err) => {
    console.error(err);
  });
```

--------------------------------

### Add Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.3.1/README.md

This example demonstrates how to add a Unicorn Studio scene dynamically using JavaScript. The `UnicornStudio.addScene` function takes an object with configuration options, including the target element ID, project ID or file path, and various rendering and interactivity settings. The function returns a promise that resolves with the scene object, which can be used to control the scene, such as destroying it.

```javascript
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)
    lazyLoad: true, // will not initialize the scene until it scrolls into view
    filePath: "path/to/your/PROJECT_ID.json", // if youre hosting your own exported json code, point to it here (do not use both filePath and projectId, only one is required)
    altText: "Welcome to Unicorn Studio", // optional text for SEO, going inside the <canvas> tag
    ariaLabel: "This is a canvas scene", // optional text for the aria-label attribute on the <canvas> element
    production: false // when true, will hit the global edge CDN, learn more in the help docs
    interactivity: {
      // [optional]
      mouse: {
        disableMobile: true, // disable touch movement on mobile
      },
    },
  })
    .then((scene) => {
      // scene is ready
      // To remove a scene, you can use:
      // scene.destroy()
    })
    .catch((err) => {
      console.error(err);
    });
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.6/README.md

Demonstrates initializing a Unicorn Studio scene directly in your HTML using data attributes. The `data-us-project` attribute specifies the project ID, and `data-us-project-src` can be used if you host your own JSON file. The `UnicornStudio.init()` function is called to render the scene, with a promise that resolves when scenes are ready or rejects on error.

```html
<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"
  data-us-alttext="Welcome to Unicorn Studio"
  data-us-arialabel="This is a canvas scene"
></div>
<script>
  UnicornStudio.init()
    .then((scenes) => {
      // Scenes are ready
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.2/README.md

Demonstrates initializing a Unicorn Studio scene directly within your HTML. Elements with `data-us-project` attributes will be automatically initialized. You can specify the project source using `data-us-project-src` if hosting your own JSON files. Optional attributes like `data-us-scale` and `data-us-dpi` allow for customization.

```html
<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>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.4.1/README.md

Demonstrates initializing a Unicorn Studio scene directly within your HTML using data attributes. Elements with `data-us-project` or `data-us-project-src` will be automatically initialized when `UnicornStudio.init()` is called. Various attributes control scaling, DPI, lazy loading, and accessibility.

```html
<div
  class="unicorn-embed"
  data-us-project="YOUR_PROJECT_EMBED_ID"
  data-us-project-src="path/to/your/PROJECT_ID.json (if you're using this, do not use data-us-project)"
  data-us-scale="1"
  data-us-dpi="1.5"
  data-us-lazyload="true"
  data-us-disablemobile="true"
  data-us-alttext="Welcome to Unicorn Studio"
  data-us-arialabel="This is a canvas scene"
></div>
<script>
  UnicornStudio.init()
    .then((scenes) => {
      // Scenes are ready
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.3.2/README.md

Demonstrates initializing a Unicorn Studio scene directly within your HTML using data attributes. Elements with `data-us-project` or `data-us-project-src` will be automatically initialized when `UnicornStudio.init()` is called. It supports various configuration options like scale, DPI, lazy loading, and accessibility attributes.

```html
<div
  class="unicorn-embed"
  data-us-project="YOUR_PROJECT_EMBED_ID"
  data-us-project-src="path/to/your/PROJECT_ID.json (if you're using this, do not use data-us-project)"
  data-us-scale="1"
  data-us-dpi="1.5"
  data-us-lazyload="true"
  data-us-disableMobile="true"
  data-us-alttext="Welcome to Unicorn Studio"
  data-us-arialabel="This is a canvas scene"
></div>
<script>
  UnicornStudio.init()
    .then((scenes) => {
      // Scenes are ready
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.1/README.md

Demonstrates initializing a Unicorn Studio scene directly within your HTML. Elements with the `data-us-project` attribute will be automatically initialized. You can specify the project source using `data-us-project-src`. The `UnicornStudio.init()` function is called to process these elements.

```html
<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>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.0/README.md

Initializes a Unicorn Studio scene using HTML elements with `data-us-project` attributes. You can specify the project ID and optionally a source path for your exported JSON file. Customization options like scale, DPI, and mobile disabling can also be set via attributes. The `UnicornStudio.init()` function returns a promise that resolves when scenes are ready or rejects on error.

```html
<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>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.7/README.md

Demonstrates initializing a Unicorn Studio scene using HTML attributes on a target element. The `data-us-project` or `data-us-project-src` attribute is required. Additional attributes control scaling, DPI, lazy loading, and accessibility.

```html
<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-lazyload="true"
  data-us-disableMobile="true"
  data-us-alttext="Welcome to Unicorn Studio"
  data-us-arialabel="This is a canvas scene"
></div>
<script>
  UnicornStudio.init()
    .then((scenes) => {
      // Scenes are ready
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.4.0/README.md

Initialize a Unicorn Studio scene by adding a `div` element with specific `data-us-*` attributes to your HTML. The `data-us-project` attribute specifies the project embed ID, and `data-us-project-src` can be used if you are hosting your own JSON file. The `UnicornStudio.init()` function then initializes all such elements.

```html
<div
  class="unicorn-embed"
  data-us-project="YOUR_PROJECT_EMBED_ID"
  data-us-project-src="path/to/your/PROJECT_ID.json (if you're using this, do not use data-us-project)"
  data-us-scale="1"
  data-us-dpi="1.5"
  data-us-lazyload="true"
  data-us-disablemobile="true"
  data-us-alttext="Welcome to Unicorn Studio"
  data-us-arialabel="This is a canvas scene"
></div>
<script>
  UnicornStudio.init()
    .then((scenes) => {
      // Scenes are ready
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.4/README.md

Initialize a Unicorn Studio scene by adding a `div` with specific `data-us-*` attributes to your HTML. The `data-us-project` attribute is mandatory, while `data-us-project-src` can be used to point to a custom JSON file. The `UnicornStudio.init()` function then processes these elements.

```html
<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>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.8/README.md

Initialize a Unicorn Studio scene directly in your HTML using data attributes. Elements with `data-us-project` or `data-us-project-src` will be automatically initialized when `UnicornStudio.init()` is called. This method is suitable for static content.

```html
<div
  class="unicorn-embed"
  data-us-project="YOUR_PROJECT_EMBED_ID"
  data-us-project-src="path/to/your/PROJECT_ID.json (if you're using this, do not use data-us-project)"
  data-us-scale="1"
  data-us-dpi="1.5"
  data-us-lazyload="true"
  data-us-disableMobile="true"
  data-us-alttext="Welcome to Unicorn Studio"
  data-us-arialabel="This is a canvas scene"
></div>
<script>
  UnicornStudio.init()
    .then((scenes) => {
      // Scenes are ready
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Initialize Scene Inline

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.3.0/README.md

Initializes a Unicorn Studio scene using HTML data attributes on a `div` element. This method is suitable for static content where project IDs or sources are known beforehand. It supports various configuration options like scale, DPI, lazy loading, and accessibility text.

```html
<div
  class="unicorn-embed"
  data-us-project="YOUR_PROJECT_EMBED_ID"
  data-us-project-src="path/to/your/PROJECT_ID.json (if you're using this, do not use data-us-project)"
  data-us-scale="1"
  data-us-dpi="1.5"
  data-us-lazyload="true"
  data-us-disableMobile="true"
  data-us-alttext="Welcome to Unicorn Studio"
  data-us-arialabel="This is a canvas scene"
></div>
<script>
  UnicornStudio.init()
    .then((scenes) => {
      // Scenes are ready
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Initialize Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.3.2/README.md

Shows how to add a Unicorn Studio scene dynamically using JavaScript. The `addScene` method allows you to specify the target element, project ID or file path, and various rendering and interactivity options. It returns a promise that resolves with the scene object, which can be used to destroy the scene later.

```javascript
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)
  lazyLoad: true, // will not initialize the scene until it scrolls into view
  filePath: "path/to/your/PROJECT_ID.json", // if youre hosting your own exported json code, point to it here (do not use both filePath and projectId, only one is required)
  altText: "Welcome to Unicorn Studio", // optional text for SEO, going inside the <canvas> tag
  ariaLabel: "This is a canvas scene", // optional text for the aria-label attribute on the <canvas> element
  production: false // when true, will hit the global edge CDN, learn more in the help docs
  interactivity: {
    // [optional]
    mouse: {
      disableMobile: true, // disable touch movement on mobile
    },
  },
})
  .then((scene) => {
    // scene is ready
    // To remove a scene, you can use:
    // scene.destroy()
  })
  .catch((err) => {
    console.error(err);
  });
```

--------------------------------

### Initialize Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.8/README.md

Add a Unicorn Studio scene dynamically using JavaScript. This method allows for more control and is useful for Single Page Applications or when scenes are added after the initial page load. You can specify various parameters like `projectId`, `filePath`, `scale`, and `fps`.

```javascript
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)
  lazyLoad: true, // will not initialize the scene until it scrolls into view
  filePath: "path/to/your/PROJECT_ID.json", // if youre hosting your own exported json code, point to it here (do not use both filePath and projectId, only one is required)
  altText: "Welcome to Unicorn Studio", // optional text for SEO, going inside the <canvas> tag
  ariaLabel: "This is a canvas scene", // optional text for the aria-label attribute on the <canvas> element
  production: false // when true, will hit the global edge CDN, learn more in the help docs
  interactivity: {
    // [optional]
    mouse: {
      disableMobile: true, // disable touch movement on mobile
    },
  },
})
  .then((scene) => {
    // scene is ready
    // To remove a scene, you can use:
    // scene.destroy()
  })
  .catch((err) => {
    console.error(err);
  });
```

--------------------------------

### Add Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.3/README.md

This snippet illustrates how to dynamically add a Unicorn Studio scene to a specified HTML element. It allows configuration of various parameters like FPS, scale, DPI, project ID, and interactivity settings. The `UnicornStudio.addScene` function returns a promise that resolves with the scene object, which includes a `destroy` method for cleanup.

```html
<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
      }
    }
  }).then(scene => { // scene is ready
    // To remove a scene, you can use:
    // scene.destroy()
  }).catch((err) => {
    console.error(err);
  });
</script>
```

--------------------------------

### Initialize Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.4.0/README.md

Add a Unicorn Studio scene dynamically to a specified HTML element using `UnicornStudio.addScene()`. This method accepts an object with various configuration options such as `elementId`, `projectId`, `filePath`, `scale`, `dpi`, `lazyLoad`, `altText`, `ariaLabel`, and interactivity settings. It returns a promise that resolves with the scene object, which can be used to destroy the scene.

```javascript
<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)
    lazyLoad: true, // will not initialize the scene until it scrolls into view
    filePath: "path/to/your/PROJECT_ID.json", // if youre hosting your own exported json code, point to it here (do not use both filePath and projectId, only one is required)
    altText: "Welcome to Unicorn Studio", // optional text for SEO, going inside the <canvas> tag
    ariaLabel: "This is a canvas scene", // optional text for the aria-label attribute on the <canvas> element
    production: false // when true, will hit the global edge CDN, learn more in the help docs
    interactivity: {
      // [optional]
      mouse: {
        disableMobile: true, // disable touch / scroll movement on mobile
      },
    },
  })
    .then((scene) => {
      // scene is ready
      // To remove a scene, you can use:
      // scene.destroy()
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Initialize Scene Inline with Data Attributes

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.4.2/README.md

Initializes Unicorn Studio scenes using elements with `data-us-project` or `data-us-project-src` attributes. This method is suitable for static HTML integration. Customization options like scale, DPI, lazy loading, and accessibility text can be set directly as data attributes.

```html
<div
  class="unicorn-embed"
  data-us-project="YOUR_PROJECT_EMBED_ID"
  data-us-project-src="path/to/your/PROJECT_ID.json (if you're using this, do not use data-us-project)"
  data-us-scale="1"
  data-us-dpi="1.5"
  data-us-lazyload="true"
  data-us-disablemobile="true"
  data-us-alttext="Welcome to Unicorn Studio"
  data-us-arialabel="This is a canvas scene"
></div>
<script>
  UnicornStudio.init()
    .then((scenes) => {
      // Scenes are ready
    })
    .catch((err) => {
      console.error(err);
    });
</script>
```

--------------------------------

### Dynamically Add Scene with Options

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.4.2/README.md

Adds a Unicorn Studio scene dynamically to a specified HTML element. This method allows for fine-grained control over scene properties such as frame rate, scale, DPI, project ID or file path, lazy loading, accessibility text, and interactivity settings. It returns a promise that resolves with the scene object, which includes a `destroy` method.

```javascript
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)
  lazyLoad: true, // will not initialize the scene until it scrolls into view
  filePath: "path/to/your/PROJECT_ID.json", // if youre hosting your own exported json code, point to it here (do not use both filePath and projectId, only one is required)
  altText: "Welcome to Unicorn Studio", // optional text for SEO, going inside the <canvas> tag
  ariaLabel: "This is a canvas scene", // optional text for the aria-label attribute on the <canvas> element
  production: false // when true, will hit the global edge CDN, learn more in the help docs
  interactivity: {
    // [optional]
    mouse: {
      disableMobile: true, // disable touch / scroll movement on mobile
    },
  },
})
  .then((scene) => {
    // scene is ready
    // To remove a scene, you can use:
    // scene.destroy()
  })
  .catch((err) => {
    console.error(err);
  });
```

--------------------------------

### Import Unicorn Studio Module

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.0/README.md

This snippet demonstrates how to import the Unicorn Studio library as a module in your JavaScript code.

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

--------------------------------

### Import Unicorn Studio

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.4/README.md

Import the Unicorn Studio library into your JavaScript components for programmatic access.

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

--------------------------------

### Add Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.4/README.md

Add a Unicorn Studio scene dynamically to a specified HTML element using `UnicornStudio.addScene()`. This method accepts an object with scene configuration, including `elementId`, `projectId`, and optional parameters like `fps`, `scale`, `dpi`, and `interactivity`. The function returns a promise that resolves with the scene object, which has a `destroy()` method.

```html
<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
      }
    }
  }).then(scene => { // scene is ready
    // To remove a scene, you can use:
    // scene.destroy()
  }).catch((err) => {
    console.error(err);
  });
</script>
```

--------------------------------

### Import Unicorn Studio Module

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.3/README.md

This snippet demonstrates how to import the Unicorn Studio library as a module in your JavaScript code, allowing you to use its functionalities within your components.

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

--------------------------------

### Import Unicorn Studio Module

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.3.1/README.md

This snippet demonstrates how to import the Unicorn Studio library as a module in your JavaScript code, allowing you to use its functionalities within your application.

```javascript
import * as UnicornStudio from "./path/to/unicornStudio.umd.js";
```

--------------------------------

### Import Unicorn Studio in Component

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.3.0/README.md

Demonstrates how to import the Unicorn Studio library as a module within your JavaScript or TypeScript components.

```javascript
import * as UnicornStudio from "./path/to/unicornStudio.umd.js";
```

--------------------------------

### Add Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.7/README.md

Shows how to add a Unicorn Studio scene dynamically using JavaScript. This method allows for more control over scene properties like FPS, scale, DPI, and interactivity. It requires an element ID and either a `projectId` or `filePath`.

```javascript
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)
  lazyLoad: true, // will not initialize the scene until it scrolls into view
  filePath: "path/to/your/PROJECT_ID.json", // if youre hosting your own exported json code, point to it here (do not use both filePath and projectId, only one is required)
  altText: "Welcome to Unicorn Studio", // optional text for SEO, going inside the <canvas> tag
  ariaLabel: "This is a canvas scene", // optional text for the aria-label attribute on the <canvas> element
  production: false // when true, will hit the global edge CDN, learn more in the help docs
  interactivity: {
    // [optional]
    mouse: {
      disableMobile: true, // disable touch movement on mobile
    },
  },
})
  .then((scene) => {
    // scene is ready
    // To remove a scene, you can use:
    // scene.destroy()
  })
  .catch((err) => {
    console.error(err);
  });
```

--------------------------------

### Import Unicorn Studio in Component

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.4.2/README.md

This snippet demonstrates how to import the Unicorn Studio library as a module within your JavaScript components, allowing for modular integration.

```javascript
import * as UnicornStudio from "./path/to/unicornStudio.umd.js";
```

--------------------------------

### Add Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.1/README.md

This snippet shows how to add a Unicorn Studio scene dynamically using JavaScript. The `UnicornStudio.addScene` function allows you to configure various parameters such as the target element, frames per second, scale, DPI, project ID, file path, and interactivity settings. It returns a promise that resolves with the scene object, which has a `destroy` method.

```html
<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>
```

--------------------------------

### Add Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.5/README.md

This snippet illustrates how to add a Unicorn Studio scene dynamically using JavaScript. The `addScene` method allows you to specify various configuration options such as the target element, frame rate, scale, DPI, project ID or file path, and accessibility attributes. It returns a promise that resolves with the scene object, which includes a `destroy` method.

```javascript
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 (do not use both filePath and projectId, only one is required)
  altText: "Welcome to Unicorn Studio", // optional text for SEO, going inside the <canvas> tag
  ariaLabel: "This is a canvas scene", // optional text for the aria-label attribute on the <canvas> element
  interactivity: {
    // [optional]
    mouse: {
      disableMobile: true, // disable touch movement on mobile
    },
  },
})
  .then((scene) => {
    // scene is ready
    // To remove a scene, you can use:
    // scene.destroy()
  })
  .catch((err) => {
    console.error(err);
  });
```

--------------------------------

### Include Unicorn Studio Script

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.3/README.md

This snippet shows how to include the Unicorn Studio script in your HTML. You can either add it directly to the `<head>` section using a CDN link or import it into your JavaScript components.

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

--------------------------------

### Include Unicorn Studio Script

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.3.0/README.md

This snippet shows how to include the Unicorn Studio JavaScript library in your HTML, either via a CDN link or by importing it into your JavaScript components.

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

--------------------------------

### Add Scene Dynamically

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.0/README.md

Adds a Unicorn Studio scene dynamically to a specified HTML element. This method allows for fine-grained control over scene properties such as frames per second, scale, DPI, project ID, and file path. Interactivity options for mouse and scroll, including mobile disabling and momentum, can also be configured. The `UnicornStudio.addScene()` function returns a promise that resolves with the scene object or rejects on error. The scene object has a `destroy()` method to remove it.

```javascript
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);
  });
```

--------------------------------

### Include Unicorn Studio Script

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.4/README.md

Add the Unicorn Studio script to your HTML's head section or import it into your JavaScript components to enable project embedding.

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

--------------------------------

### Include Unicorn Studio Script

Source: https://github.com/georgehastings/embed-unicornstudio/blob/main/v1.2.0/README.md

This snippet shows how to include the Unicorn Studio JavaScript library in your HTML. You can add it to the `<head>` section of your page or import it into your JavaScript components.

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