<div id="mount"></div>
<script src="https://code.haiku.ai/scripts/core/HaikuCore.3.0.21.min.js"></script>
<script>
const definition = {
  timelines: {
    Default: {
      '#box': {
        'style.width': {0: {value: '100px'}},
        'style.height': {0: {value: '100px'}},
        'style.backgroundColor': {0: {value: 'steelblue'}},
        'rotation.z': {
          0: {value: 0, curve: 'linear'},
          2000: {value: 2 * Math.PI}
        }
      }
    }
  },
  template: `
    <div id="box">Hello Animation!</div>
  `
};
</script>
// create a new factory
const factory = HaikuDOMAdapter.default(definition);
// draw our component in the DOM
const component = factory(
  document.getElementById('mount'),
  {loop: true}
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.