<div id="mount"></div>
<script src="https://code.haiku.ai/scripts/core/HaikuCore.3.1.23.min.js"></script>
<script src="https://cdn.haiku.ai/f9c8a544-33fd-45ab-8767-3b4cb09606a2/e7e8e1f1351d14b06c83080133153d72264d5be0/index.embed.js"></script>

<!-- BANNER -->
<a href="https://share.haiku.ai/taylor-iPreview" target="_blank" id="share-link" rel="noopener noreferrer">
  <img id="icon" src="//www.haiku.ai/favicon.ico" />
  <div><strong>Crafted with Haiku</strong><br>
    Get the component, the code, and more!
  </div>
</a>
<!-- END BANNER -->

body {
  margin: 20px;
}

/* BANNER */
#share-link {
  padding: 9px;
  color: #222;
  background-color: white;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  bottom: 0;
  left: 20px;
  position: fixed;
  font-size: 12px;
  width: 275px;
  border-radius: 5px;
  margin: 20px auto ;
  box-shadow: 0 0 54px 0 rgba(0,0,0,0.3);
  border-radius: 5px;
  display: flex;
  text-decoration: none;
  transition: all 247ms ease;
}

#share-link:hover {
  box-shadow: 0 0 54px 0 rgba(0,0,0,0.6);
}

#share-link:active {
  transform: scale(.94);
}

#icon {
  margin-right: 10px;
}
/* END BANNER */

var component = HaikuComponentEmbed_taylor_iPreview(
  document.getElementById('mount'),
  {loop: true}
);
var timeline = component.getDefaultTimeline();

// Check out the docs:  https://docs.haiku.ai

// Example: control playback
// timeline.gotoAndPlay(1200)

// Example: control states
// component.assignConfig({
//   states: {
//     someState: {value: 0},
//     anotherState: {value: 0}
//   }
// })