animl-cli 0.0.0-stage → 0.1.0

package/examples/bell.ani

@@ -0,0 +1,359 @@
+{
+  "anima": "0.1",
+  "name": "bell",
+  "title": "Bell",
+  "grid": 20,
+  "viewBox": [-2, -2, 24, 24],
+  "colors": {
+    "ink": "currentColor",
+    "accent": "#d97757"
+  },
+  "glyphs": {
+    "bell": {
+      "source": "glyphy",
+      "sha256": "866d168f0377ff78a07856f02ba519771ec8b8f9389695d32b338bb8b86a04ae",
+      "d": "M9.493 4.473C9.423 4.49 9.326 4.517 9.256 4.493L8.602 4.66C8.543 4.675 8.464 4.703 8.409 4.73L7.835 5.016L7.366 5.328L6.888 5.748L6.485 6.211C6.428 6.277 6.354 6.377 6.313 6.452L6.009 6.998C5.984 7.043 5.955 7.099 5.939 7.147L5.714 7.805C5.692 7.871 5.666 7.981 5.659 8.05L5.605 8.614L5.605 10.357C5.605 10.417 5.589 10.486 5.579 10.545C5.532 10.817 5.449 11.086 5.338 11.338C5.317 11.387 5.297 11.444 5.27 11.488L4.972 11.98C4.945 12.023 4.907 12.062 4.876 12.102C4.846 12.139 4.818 12.183 4.788 12.218L4.223 12.866C3.945 13.187 3.76 13.793 3.974 14.186C4.04 14.307 4.138 14.394 4.25 14.469C4.326 14.519 4.484 14.621 4.575 14.621L15.38 14.621C15.516 14.621 15.657 14.542 15.762 14.463C16.203 14.128 16.199 13.552 15.949 13.102C15.905 13.022 15.841 12.912 15.778 12.849L15.262 12.333C15.21 12.281 15.161 12.215 15.114 12.156C14.893 11.882 14.696 11.575 14.579 11.241C14.538 11.125 14.522 11.001 14.487 10.883C14.477 10.847 14.455 10.811 14.447 10.776C14.441 10.749 14.445 10.722 14.434 10.697C14.428 10.684 14.398 10.661 14.398 10.658L14.374 8.304C14.35 8.276 14.373 8.247 14.367 8.216L14.24 7.579C14.222 7.485 14.157 7.3 14.115 7.214L13.8 6.572C13.72 6.411 13.607 6.256 13.495 6.115C13.47 6.084 13.444 6.043 13.417 6.017L12.947 5.547C12.927 5.526 12.92 5.529 12.898 5.516C12.883 5.507 12.878 5.481 12.865 5.471L12.413 5.133L11.93 4.86L11.457 4.664L10.924 4.514C10.806 4.481 10.672 4.484 10.551 4.467L10.551 2.953C10.551 2.912 10.512 2.871 10.497 2.835C10.474 2.782 10.458 2.725 10.417 2.681C10.372 2.631 10.297 2.601 10.236 2.578C9.97 2.476 9.694 2.537 9.563 2.807C9.549 2.835 9.494 2.901 9.494 2.929L9.494 4.444C9.494 4.454 9.494 4.463 9.493 4.473ZM4.988 13.492L5.57 12.823L5.897 12.351L6.137 11.92L6.358 11.384C6.407 11.263 6.477 11.018 6.489 10.891L6.545 10.312L6.545 8.664C6.545 8.614 6.568 8.563 6.573 8.512C6.58 8.444 6.573 8.313 6.587 8.257L6.71 7.763C6.721 7.718 6.738 7.661 6.758 7.62L7.019 7.091C7.058 7.011 7.125 6.899 7.182 6.833L7.559 6.399L7.966 6.043C8.038 5.979 8.127 5.927 8.209 5.876C8.503 5.697 8.827 5.552 9.16 5.462C9.221 5.446 9.292 5.422 9.355 5.416L10.001 5.357L10.614 5.413C10.668 5.418 10.728 5.436 10.781 5.449C11.13 5.532 11.472 5.678 11.777 5.869C11.84 5.908 11.913 5.949 11.968 5.997L12.49 6.456C12.575 6.53 12.646 6.628 12.713 6.719C12.983 7.089 13.202 7.524 13.324 7.966C13.343 8.033 13.369 8.111 13.374 8.18L13.422 8.861L13.422 10.639C13.422 10.953 13.543 11.337 13.66 11.626C13.685 11.687 13.709 11.758 13.741 11.815L14.074 12.399L14.402 12.831C14.43 12.868 14.462 12.899 14.492 12.932L14.939 13.423C14.958 13.444 15.03 13.561 15.033 13.584L4.974 13.584L4.988 13.492ZM10.173 17.469C10.219 17.457 10.27 17.455 10.317 17.447C10.414 17.431 10.51 17.412 10.605 17.387C10.759 17.347 10.907 17.289 11.051 17.224C11.154 17.178 11.26 17.133 11.355 17.073C11.622 16.905 11.838 16.646 12.005 16.382C12.185 16.099 12.376 15.685 12.262 15.346C12.18 15.101 11.838 14.963 11.598 15.035C11.507 15.062 11.439 15.133 11.367 15.19C11.348 15.204 11.322 15.216 11.306 15.233C11.289 15.25 11.282 15.299 11.274 15.322C11.231 15.45 11.196 15.587 11.14 15.71C11.101 15.796 11.036 15.869 10.973 15.939C10.712 16.229 10.312 16.462 9.908 16.385C9.864 16.377 9.821 16.362 9.777 16.355C9.721 16.346 9.663 16.346 9.609 16.328C9.567 16.314 9.529 16.285 9.49 16.264C9.432 16.233 9.368 16.208 9.313 16.171C9.28 16.149 9.256 16.115 9.226 16.089C9.2 16.068 9.17 16.053 9.144 16.032C9.08 15.981 9.027 15.917 8.982 15.849C8.89 15.713 8.848 15.547 8.795 15.393C8.777 15.341 8.764 15.275 8.73 15.231C8.676 15.16 8.597 15.123 8.517 15.089C8.441 15.056 8.361 15.024 8.278 15.02C8.155 15.015 8.045 15.079 7.945 15.141C7.929 15.151 7.896 15.183 7.878 15.185C7.831 15.281 7.747 15.389 7.735 15.497C7.722 15.609 7.777 15.702 7.803 15.807C7.818 15.871 7.823 15.939 7.844 16.002C7.873 16.085 7.93 16.162 7.972 16.24C8.027 16.344 8.067 16.457 8.136 16.554C8.356 16.859 8.86 17.208 9.212 17.339C9.521 17.454 9.849 17.458 10.173 17.469Z"
+    }
+  },
+  "a11y": {
+    "role": "button",
+    "label": "Ring the bell",
+    "activate": "ring",
+    "held": "down"
+  },
+  "inputs": {
+    "ring": {
+      "type": "trigger"
+    },
+    "hover": {
+      "type": "bool"
+    },
+    "down": {
+      "type": "bool"
+    }
+  },
+  "hit": {
+    "circle": [10, 10, 10.8]
+  },
+  "nodes": [
+    {
+      "id": "icon",
+      "type": "group",
+      "pivot": [10, 10],
+      "children": [
+        {
+          "id": "waves",
+          "type": "group",
+          "children": [
+            {
+              "id": "wave-r1",
+              "type": "arc",
+              "center": [10, 7],
+              "r": 6.6,
+              "from": -46,
+              "to": -18,
+              "pivot": [10, 7],
+              "opacity": 0,
+              "stroke": {
+                "color": "ink",
+                "width": 1,
+                "cap": "round"
+              }
+            },
+            {
+              "id": "wave-r2",
+              "type": "arc",
+              "center": [10, 7],
+              "r": 8.2,
+              "from": -46,
+              "to": -18,
+              "pivot": [10, 7],
+              "opacity": 0,
+              "stroke": {
+                "color": "ink",
+                "width": 1,
+                "cap": "round"
+              }
+            },
+            {
+              "id": "wave-l1",
+              "type": "arc",
+              "center": [10, 7],
+              "r": 6.6,
+              "from": -162,
+              "to": -134,
+              "pivot": [10, 7],
+              "opacity": 0,
+              "stroke": {
+                "color": "ink",
+                "width": 1,
+                "cap": "round"
+              }
+            },
+            {
+              "id": "wave-l2",
+              "type": "arc",
+              "center": [10, 7],
+              "r": 8.2,
+              "from": -162,
+              "to": -134,
+              "pivot": [10, 7],
+              "opacity": 0,
+              "stroke": {
+                "color": "ink",
+                "width": 1,
+                "cap": "round"
+              }
+            }
+          ]
+        },
+        {
+          "id": "swing",
+          "type": "group",
+          "pivot": [10, 2.5],
+          "children": [
+            {
+              "id": "body",
+              "type": "path",
+              "glyph": "bell",
+              "subpaths": [0, 1],
+              "fill": {
+                "color": "ink",
+                "rule": "evenodd"
+              }
+            },
+            {
+              "id": "clapper",
+              "type": "path",
+              "glyph": "bell",
+              "subpaths": [2],
+              "pivot": [10, 9],
+              "fill": {
+                "color": "ink",
+                "rule": "evenodd"
+              }
+            },
+            {
+              "id": "dot",
+              "type": "circle",
+              "center": [14.9, 4.6],
+              "r": 1.5,
+              "pivot": [14.9, 4.6],
+              "scale": 0,
+              "fill": {
+                "color": "accent"
+              },
+              "knockout": 1.2
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "timelines": {
+    "ring": {
+      "$comment": "Times are the Rive version's 60 fps frames in seconds (frame / 60, 6 decimals); angles are its radians in degrees.",
+      "duration": 1.4,
+      "reducedMotion": "end",
+      "tracks": {
+        "swing.rotate": [
+          [0, 0, "cubic(0.2, 0, 0.3, 1)"],
+          [0.116667, 17.1887, "cubic(0.45, 0, 0.55, 1)"],
+          [0.283333, -13.751, "cubic(0.45, 0, 0.55, 1)"],
+          [0.45, 9.1673, "cubic(0.45, 0, 0.55, 1)"],
+          [0.616667, -5.7296, "cubic(0.45, 0, 0.55, 1)"],
+          [0.783333, 3.1513, "cubic(0.45, 0, 0.55, 1)"],
+          [0.95, -1.1459, "cubic(0.45, 0, 0.55, 1)"],
+          [1.1, 0]
+        ],
+        "clapper.rotate": [
+          [0, 0, "cubic(0.2, 0, 0.3, 1)"],
+          [0.083333, -6.8755, "cubic(0.45, 0, 0.55, 1)"],
+          [0.216667, 9.7403, "cubic(0.45, 0, 0.55, 1)"],
+          [0.383333, -7.4485, "cubic(0.45, 0, 0.55, 1)"],
+          [0.55, 5.1566, "cubic(0.45, 0, 0.55, 1)"],
+          [0.716667, -2.8648, "cubic(0.45, 0, 0.55, 1)"],
+          [0.883333, 1.1459, "cubic(0.45, 0, 0.55, 1)"],
+          [1.05, 0]
+        ],
+        "dot.scale": [
+          [0, 0, "hold"],
+          [0.666667, 0, "elastic(1, 0.45)"],
+          [0.966667, 1]
+        ],
+        "wave-r1.opacity": [
+          [0, 0, "hold"],
+          [0.016667, 0, "cubic(0.2, 0, 0.3, 1)"],
+          [0.133333, 1, "cubic(0.2, 0, 0.3, 1)"],
+          [0.516667, 0]
+        ],
+        "wave-r1.scale": [
+          [0, 0.82, "hold"],
+          [0.016667, 0.82, "cubic(0.2, 0, 0.3, 1)"],
+          [0.516667, 1.08]
+        ],
+        "wave-l1.opacity": [
+          [0, 0, "hold"],
+          [0.016667, 0, "cubic(0.2, 0, 0.3, 1)"],
+          [0.133333, 1, "cubic(0.2, 0, 0.3, 1)"],
+          [0.516667, 0]
+        ],
+        "wave-l1.scale": [
+          [0, 0.82, "hold"],
+          [0.016667, 0.82, "cubic(0.2, 0, 0.3, 1)"],
+          [0.516667, 1.08]
+        ],
+        "wave-r2.opacity": [
+          [0, 0, "hold"],
+          [0.116667, 0, "cubic(0.2, 0, 0.3, 1)"],
+          [0.233333, 1, "cubic(0.2, 0, 0.3, 1)"],
+          [0.616667, 0]
+        ],
+        "wave-r2.scale": [
+          [0, 0.82, "hold"],
+          [0.116667, 0.82, "cubic(0.2, 0, 0.3, 1)"],
+          [0.616667, 1.08]
+        ],
+        "wave-l2.opacity": [
+          [0, 0, "hold"],
+          [0.116667, 0, "cubic(0.2, 0, 0.3, 1)"],
+          [0.233333, 1, "cubic(0.2, 0, 0.3, 1)"],
+          [0.616667, 0]
+        ],
+        "wave-l2.scale": [
+          [0, 0.82, "hold"],
+          [0.116667, 0.82, "cubic(0.2, 0, 0.3, 1)"],
+          [0.616667, 1.08]
+        ]
+      }
+    }
+  },
+  "machine": {
+    "layers": {
+      "ring": {
+        "initial": "idle",
+        "states": {
+          "idle": {
+            "pose": {
+              "dot.scale": 0
+            },
+            "on": [
+              {
+                "when": "ring",
+                "to": "ringing"
+              }
+            ]
+          },
+          "ringing": {
+            "play": "ring",
+            "emit": "rang",
+            "on": [
+              {
+                "when": "@end",
+                "to": "rested"
+              }
+            ]
+          },
+          "rested": {
+            "pose": {
+              "dot.scale": 1
+            },
+            "on": [
+              {
+                "when": "ring",
+                "to": "ringing"
+              }
+            ]
+          }
+        }
+      },
+      "hover": {
+        "initial": "rest",
+        "states": {
+          "rest": {
+            "pose": {},
+            "on": [
+              {
+                "when": "hover",
+                "to": "hover",
+                "blend": 0.18,
+                "interruptible": false
+              }
+            ]
+          },
+          "hover": {
+            "pose": {
+              "icon.scale": 1.05,
+              "icon.rotate": -2.0054
+            },
+            "on": [
+              {
+                "when": "!hover",
+                "to": "rest",
+                "blend": 0.22,
+                "interruptible": false
+              },
+              {
+                "when": "down",
+                "to": "press",
+                "blend": 0.09,
+                "interruptible": false
+              }
+            ]
+          },
+          "press": {
+            "pose": {
+              "icon.scale": 0.95,
+              "icon.rotate": -0.8594
+            },
+            "on": [
+              {
+                "when": "!hover",
+                "to": "rest",
+                "blend": 0.22,
+                "interruptible": false
+              },
+              {
+                "when": "!down",
+                "to": "hover",
+                "blend": 0.16,
+                "interruptible": false
+              }
+            ]
+          }
+        }
+      }
+    }
+  },
+  "listeners": [
+    {
+      "on": "click",
+      "fire": "ring"
+    },
+    {
+      "on": "enter",
+      "set": {
+        "hover": true
+      }
+    },
+    {
+      "on": "leave",
+      "set": {
+        "hover": false,
+        "down": false
+      }
+    },
+    {
+      "on": "down",
+      "set": {
+        "down": true
+      }
+    },
+    {
+      "on": "up",
+      "set": {
+        "down": false
+      }
+    }
+  ]
+}

package/examples/bell.animl

@@ -0,0 +1,114 @@
+<!--
+  The reference document: a bell that tilts on hover and rings on click, reproducing the Rive
+  version in fixtures/bell/rive-reference/. Build it with: anima build examples/bell.animl
+-->
+<anima version="0.1" name="bell" title="Bell" grid="20" viewBox="-2 -2 24 24">
+  <import src="lib/ui.animl" as="ui"/>
+  <color name="ink" value="currentColor"/>
+  <color name="accent" value="#d97757"/>
+
+  <glyph name="bell"
+      d="M9.493 4.473C9.423 4.49 9.326 4.517 9.256 4.493L8.602 4.66C8.543 4.675 8.464 4.703 8.409 4.73L7.835 5.016L7.366 5.328L6.888 5.748L6.485 6.211C6.428 6.277 6.354 6.377 6.313 6.452L6.009 6.998C5.984 7.043 5.955 7.099 5.939 7.147L5.714 7.805C5.692 7.871 5.666 7.981 5.659 8.05L5.605 8.614L5.605 10.357C5.605 10.417 5.589 10.486 5.579 10.545C5.532 10.817 5.449 11.086 5.338 11.338C5.317 11.387 5.297 11.444 5.27 11.488L4.972 11.98C4.945 12.023 4.907 12.062 4.876 12.102C4.846 12.139 4.818 12.183 4.788 12.218L4.223 12.866C3.945 13.187 3.76 13.793 3.974 14.186C4.04 14.307 4.138 14.394 4.25 14.469C4.326 14.519 4.484 14.621 4.575 14.621L15.38 14.621C15.516 14.621 15.657 14.542 15.762 14.463C16.203 14.128 16.199 13.552 15.949 13.102C15.905 13.022 15.841 12.912 15.778 12.849L15.262 12.333C15.21 12.281 15.161 12.215 15.114 12.156C14.893 11.882 14.696 11.575 14.579 11.241C14.538 11.125 14.522 11.001 14.487 10.883C14.477 10.847 14.455 10.811 14.447 10.776C14.441 10.749 14.445 10.722 14.434 10.697C14.428 10.684 14.398 10.661 14.398 10.658L14.374 8.304C14.35 8.276 14.373 8.247 14.367 8.216L14.24 7.579C14.222 7.485 14.157 7.3 14.115 7.214L13.8 6.572C13.72 6.411 13.607 6.256 13.495 6.115C13.47 6.084 13.444 6.043 13.417 6.017L12.947 5.547C12.927 5.526 12.92 5.529 12.898 5.516C12.883 5.507 12.878 5.481 12.865 5.471L12.413 5.133L11.93 4.86L11.457 4.664L10.924 4.514C10.806 4.481 10.672 4.484 10.551 4.467L10.551 2.953C10.551 2.912 10.512 2.871 10.497 2.835C10.474 2.782 10.458 2.725 10.417 2.681C10.372 2.631 10.297 2.601 10.236 2.578C9.97 2.476 9.694 2.537 9.563 2.807C9.549 2.835 9.494 2.901 9.494 2.929L9.494 4.444C9.494 4.454 9.494 4.463 9.493 4.473ZM4.988 13.492L5.57 12.823L5.897 12.351L6.137 11.92L6.358 11.384C6.407 11.263 6.477 11.018 6.489 10.891L6.545 10.312L6.545 8.664C6.545 8.614 6.568 8.563 6.573 8.512C6.58 8.444 6.573 8.313 6.587 8.257L6.71 7.763C6.721 7.718 6.738 7.661 6.758 7.62L7.019 7.091C7.058 7.011 7.125 6.899 7.182 6.833L7.559 6.399L7.966 6.043C8.038 5.979 8.127 5.927 8.209 5.876C8.503 5.697 8.827 5.552 9.16 5.462C9.221 5.446 9.292 5.422 9.355 5.416L10.001 5.357L10.614 5.413C10.668 5.418 10.728 5.436 10.781 5.449C11.13 5.532 11.472 5.678 11.777 5.869C11.84 5.908 11.913 5.949 11.968 5.997L12.49 6.456C12.575 6.53 12.646 6.628 12.713 6.719C12.983 7.089 13.202 7.524 13.324 7.966C13.343 8.033 13.369 8.111 13.374 8.18L13.422 8.861L13.422 10.639C13.422 10.953 13.543 11.337 13.66 11.626C13.685 11.687 13.709 11.758 13.741 11.815L14.074 12.399L14.402 12.831C14.43 12.868 14.462 12.899 14.492 12.932L14.939 13.423C14.958 13.444 15.03 13.561 15.033 13.584L4.974 13.584L4.988 13.492ZM10.173 17.469C10.219 17.457 10.27 17.455 10.317 17.447C10.414 17.431 10.51 17.412 10.605 17.387C10.759 17.347 10.907 17.289 11.051 17.224C11.154 17.178 11.26 17.133 11.355 17.073C11.622 16.905 11.838 16.646 12.005 16.382C12.185 16.099 12.376 15.685 12.262 15.346C12.18 15.101 11.838 14.963 11.598 15.035C11.507 15.062 11.439 15.133 11.367 15.19C11.348 15.204 11.322 15.216 11.306 15.233C11.289 15.25 11.282 15.299 11.274 15.322C11.231 15.45 11.196 15.587 11.14 15.71C11.101 15.796 11.036 15.869 10.973 15.939C10.712 16.229 10.312 16.462 9.908 16.385C9.864 16.377 9.821 16.362 9.777 16.355C9.721 16.346 9.663 16.346 9.609 16.328C9.567 16.314 9.529 16.285 9.49 16.264C9.432 16.233 9.368 16.208 9.313 16.171C9.28 16.149 9.256 16.115 9.226 16.089C9.2 16.068 9.17 16.053 9.144 16.032C9.08 15.981 9.027 15.917 8.982 15.849C8.89 15.713 8.848 15.547 8.795 15.393C8.777 15.341 8.764 15.275 8.73 15.231C8.676 15.16 8.597 15.123 8.517 15.089C8.441 15.056 8.361 15.024 8.278 15.02C8.155 15.015 8.045 15.079 7.945 15.141C7.929 15.151 7.896 15.183 7.878 15.185C7.831 15.281 7.747 15.389 7.735 15.497C7.722 15.609 7.777 15.702 7.803 15.807C7.818 15.871 7.823 15.939 7.844 16.002C7.873 16.085 7.93 16.162 7.972 16.24C8.027 16.344 8.067 16.457 8.136 16.554C8.356 16.859 8.86 17.208 9.212 17.339C9.521 17.454 9.849 17.458 10.173 17.469Z"
+      source="glyphy" sha256="866d168f0377ff78a07856f02ba519771ec8b8f9389695d32b338bb8b86a04ae"/>
+
+  <a11y role="button" label="Ring the bell" activate="ring" held="down"/>
+
+  <trigger name="ring"/>
+  <bool name="hover"/>
+  <bool name="down"/>
+
+  <!-- The Rive file's hit disc: whole-icon listeners react inside it. -->
+  <hit circle="10 10 10.8"/>
+
+  <!-- Paint order is document order, later on top. Children use their parent's coordinates. -->
+  <group id="icon" pivot="10 10">
+    <group id="waves">
+      <arc id="wave-r1" cx="10" cy="7" r="6.6" from="-46" to="-18" pivot="10 7" opacity="0" stroke="ink" stroke-width="1" stroke-linecap="round"/>
+      <arc id="wave-r2" cx="10" cy="7" r="8.2" from="-46" to="-18" pivot="10 7" opacity="0" stroke="ink" stroke-width="1" stroke-linecap="round"/>
+      <arc id="wave-l1" cx="10" cy="7" r="6.6" from="-162" to="-134" pivot="10 7" opacity="0" stroke="ink" stroke-width="1" stroke-linecap="round"/>
+      <arc id="wave-l2" cx="10" cy="7" r="8.2" from="-162" to="-134" pivot="10 7" opacity="0" stroke="ink" stroke-width="1" stroke-linecap="round"/>
+    </group>
+    <!-- Swings from the top of the handle; the clapper lags about its own pivot. -->
+    <group id="swing" pivot="10 2.5">
+      <path id="body" glyph="bell" subpaths="0 1" fill="ink" fill-rule="evenodd"/>
+      <path id="clapper" glyph="bell" subpaths="2" pivot="10 9" fill="ink" fill-rule="evenodd"/>
+      <!-- The notification dot cuts a 1.2-unit ring out of the body and clapper. -->
+      <circle id="dot" cx="14.9" cy="4.6" r="1.5" pivot="14.9 4.6" scale="0" fill="accent" knockout="1.2"/>
+    </group>
+  </group>
+
+  <ease name="settle" curve="cubic(0.2, 0, 0.3, 1)"/>
+  <ease name="sway" curve="cubic(0.45, 0, 0.55, 1)"/>
+
+  <timeline name="ring" duration="1.4" reducedMotion="end">
+    <!-- Times are the Rive version's 60 fps frames in seconds (frame / 60, 6 decimals); angles are its radians in degrees. -->
+    <track target="swing.rotate">
+      0         0        settle
+      0.116667  17.1887  sway
+      0.283333  -13.751  sway
+      0.45      9.1673   sway
+      0.616667  -5.7296  sway
+      0.783333  3.1513   sway
+      0.95      -1.1459  sway
+      1.1       0
+    </track>
+    <track target="clapper.rotate">
+      0         0        settle
+      0.083333  -6.8755  sway
+      0.216667  9.7403   sway
+      0.383333  -7.4485  sway
+      0.55      5.1566   sway
+      0.716667  -2.8648  sway
+      0.883333  1.1459   sway
+      1.05      0
+    </track>
+    <track target="dot.scale">
+      0         0  hold
+      0.666667  0  elastic(1, 0.45)
+      0.966667  1
+    </track>
+    <track target="wave-r1.opacity">0 0 hold; 0.016667 0 settle; 0.133333 1 settle; 0.516667 0</track>
+    <track target="wave-r1.scale">0 0.82 hold; 0.016667 0.82 settle; 0.516667 1.08</track>
+    <track target="wave-l1.opacity">0 0 hold; 0.016667 0 settle; 0.133333 1 settle; 0.516667 0</track>
+    <track target="wave-l1.scale">0 0.82 hold; 0.016667 0.82 settle; 0.516667 1.08</track>
+    <track target="wave-r2.opacity">0 0 hold; 0.116667 0 settle; 0.233333 1 settle; 0.616667 0</track>
+    <track target="wave-r2.scale">0 0.82 hold; 0.116667 0.82 settle; 0.616667 1.08</track>
+    <track target="wave-l2.opacity">0 0 hold; 0.116667 0 settle; 0.233333 1 settle; 0.616667 0</track>
+    <track target="wave-l2.scale">0 0.82 hold; 0.116667 0.82 settle; 0.616667 1.08</track>
+  </timeline>
+
+  <layer name="ring" initial="idle">
+    <state name="idle">
+      <pose dot.scale="0"/>
+      <on when="ring" to="ringing"/>
+    </state>
+    <state name="ringing" play="ring" emit="rang">
+      <on when="@end" to="rested"/>
+    </state>
+    <state name="rested">
+      <pose dot.scale="1"/>
+      <on when="ring" to="ringing"/>
+    </state>
+  </layer>
+
+  <!-- As in Rive, a crossfade runs to its end before the layer reacts again, so a quick click
+       still shows the press. -->
+  <layer name="hover" initial="rest">
+    <state name="rest">
+      <on when="hover" to="hover" blend="0.18" interruptible="false"/>
+    </state>
+    <state name="hover">
+      <pose icon.scale="1.05" icon.rotate="-2.0054"/>
+      <on when="!hover" to="rest" blend="0.22" interruptible="false"/>
+      <on when="down" to="press" blend="0.09" interruptible="false"/>
+    </state>
+    <state name="press">
+      <pose icon.scale="0.95" icon.rotate="-0.8594"/>
+      <on when="!hover" to="rest" blend="0.22" interruptible="false"/>
+      <on when="!down" to="hover" blend="0.16" interruptible="false"/>
+    </state>
+  </layer>
+
+  <listener on="click" fire="ring"/>
+  <apply template="ui:press"/>
+</anima>

package/examples/composite.ani

@@ -0,0 +1,110 @@
+{
+  "anima": "0.1",
+  "name": "composite",
+  "grid": 20,
+  "requires": ["composite"],
+  "nodes": [
+    {
+      "id": "background",
+      "type": "rect",
+      "x0": 0,
+      "y0": 0,
+      "w": 20,
+      "h": 20,
+      "fill": {
+        "color": "#e8eef8"
+      }
+    },
+    {
+      "id": "source",
+      "type": "circle",
+      "center": [10, 10],
+      "r": 8,
+      "fill": {
+        "color": "#fff"
+      }
+    },
+    {
+      "id": "card",
+      "type": "rect",
+      "x0": 2,
+      "y0": 2,
+      "w": 16,
+      "h": 16,
+      "blend": "multiply",
+      "mask": {
+        "source": "source",
+        "mode": "alpha",
+        "sourceDraws": false
+      },
+      "paints": [
+        {
+          "fill": {
+            "color": "#ff8844"
+          }
+        },
+        {
+          "stroke": {
+            "color": "#203060",
+            "width": 2,
+            "visible": true
+          }
+        }
+      ]
+    },
+    {
+      "id": "ring",
+      "type": "circle",
+      "center": [10, 10],
+      "r": 6,
+      "fill": {
+        "color": "#e8eef8",
+        "visible": true
+      },
+      "stroke": {
+        "color": "#203060",
+        "width": 1,
+        "position": "outside"
+      },
+      "clip": {
+        "source": "source",
+        "rule": "nonzero"
+      },
+      "drawOrder": {
+        "target": "card",
+        "position": "after"
+      }
+    }
+  ],
+  "timelines": {
+    "t": {
+      "duration": 1,
+      "tracks": {
+        "source.x": [
+          [0, 0],
+          [1, 2]
+        ],
+        "card.paints.0.fill.visible": [
+          [0, true],
+          [1, false]
+        ],
+        "ring.drawOrder.active": [
+          [0, true],
+          [1, false]
+        ]
+      }
+    }
+  },
+  "machine": {
+    "layers": {
+      "l": {
+        "initial": "s",
+        "states": {
+          "s": {
+            "play": "t"
+          }
+        }
+      }
+    }
+  }
+}

package/examples/composite.animl

@@ -0,0 +1,21 @@
+<anima version="0.1" name="composite" grid="20" requires="composite">
+  <rect id="background" x0="0" y0="0" width="20" height="20" fill="#e8eef8"/>
+  <circle id="source" cx="10" cy="10" r="8" fill="#fff"/>
+  <rect id="card" x0="2" y0="2" mix-blend-mode="multiply" width="16" height="16">
+    <mask source="source" mode="alpha" source-draws="false"/>
+    <fillPaint fill="#ff8844"/>
+    <strokePaint stroke="#203060" stroke-width="2" stroke-visible="true"/>
+  </rect>
+  <circle id="ring" cx="10" cy="10" r="6" fill="#e8eef8" fill-visible="true" stroke="#203060" stroke-width="1" stroke-position="outside">
+    <clip source="source" rule="nonzero"/>
+    <drawOrder target="card" position="after"/>
+  </circle>
+  <timeline name="t" duration="1">
+    <track target="source.x">0 0; 1 2</track>
+    <track target="card.paints.0.fill.visible">0 true; 1 false</track>
+    <track target="ring.drawOrder.active">0 true; 1 false</track>
+  </timeline>
+  <layer name="l" initial="s">
+    <state name="s" play="t"/>
+  </layer>
+</anima>

package/examples/feather.ani

@@ -0,0 +1,56 @@
+{
+  "anima": "0.1",
+  "name": "feather",
+  "grid": 24,
+  "requires": ["paint", "assets", "surface"],
+  "nodes": [
+    {
+      "id": "tile",
+      "type": "rect",
+      "x0": 4,
+      "y0": 4,
+      "w": 16,
+      "h": 16,
+      "fill": {
+        "color": "#ff0000",
+        "feather": {
+          "inner": 3,
+          "outer": 3,
+          "offset": [1, 0],
+          "enabled": true
+        }
+      }
+    }
+  ],
+  "timelines": {
+    "move": {
+      "duration": 1,
+      "tracks": {
+        "tile.fill.feather.outer": [
+          [0, 3],
+          [1, 6]
+        ]
+      }
+    }
+  },
+  "machine": {
+    "layers": {
+      "main": {
+        "initial": "run",
+        "states": {
+          "run": {
+            "play": "move"
+          }
+        }
+      }
+    }
+  },
+  "assets": {
+    "tile": {
+      "type": "image",
+      "source": "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cpath%20fill='%23ff0000'%20d='M0%200h4v8H0z'/%3E%3Cpath%20fill='%230000ff'%20d='M4%200h4v8H4z'/%3E%3C/svg%3E",
+      "width": 8,
+      "height": 8
+    }
+  }
+}