code: function addStateModifier() {
      var modifier = new StateModifier({
          size: [undefined, 100],
          align: [0.7, 0.5],
          origin: [0.5, 0.5],
          proportions: [0.2, 1],
          opacity: 0.5
          //transform: Transform.thenMove(Transform.rotateZ(Math.PI / 3), [200, 50, 0])
      });
  
      modifier.setAlign(
          [0.5, 0.5],
          { duration: 1000, curve: Easing.inExpo },
          function() {
              modifier.setTransform(
                  Transform.thenMove(Transform.rotateZ(Math.PI / 3), [50, 50, 0]),
                  { duration: 800, curve: Easing.inExpo }
              );
          }
      );
  
      var surface = new Surface({
          content: 'HI',
          properties: {
              backgroundColor: 'red',
              color: 'white',
              textAlign: 'center',
              fontSize: '40px',
              borderRadius: '10px'
          }
      });
  
      ctx.add(modifier).add(surface);
  }
docs: /*
  StateModifier