animl-cli 0.0.0-stage → 0.1.0

package/examples/feather.animl

@@ -0,0 +1,20 @@
+<anima version="0.1" name="feather" grid="24" requires="paint assets surface">
+  <asset name="tile" type="image"
+      src="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"/>
+
+  <rect id="tile" x0="4" y0="4" width="16" height="16" fill="#ff0000">
+    <feather inner="3" outer="3" offset="1 0" enabled="true"/>
+  </rect>
+
+  <timeline name="move" duration="1">
+    <track target="tile.fill.feather.outer">
+      0  3
+      1  6
+    </track>
+  </timeline>
+
+  <layer name="main" initial="run">
+    <state name="run" play="move"/>
+  </layer>
+</anima>

package/examples/image-paints.ani

@@ -0,0 +1,32 @@
+{
+  "anima": "0.1",
+  "name": "image-paints",
+  "grid": 24,
+  "requires": ["paint", "assets", "surface"],
+  "nodes": [
+    {
+      "id": "tile",
+      "type": "rect",
+      "x0": 4,
+      "y0": 4,
+      "w": 16,
+      "h": 16,
+      "fill": {
+        "type": "image",
+        "asset": "tile",
+        "imageWidth": 8,
+        "imageHeight": 8,
+        "imageRotate": 0,
+        "modulate": "#ffffff"
+      }
+    }
+  ],
+  "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
+    }
+  }
+}

package/examples/image-paints.animl

@@ -0,0 +1,8 @@
+<anima version="0.1" name="image-paints" grid="24" requires="paint assets surface">
+  <asset name="tile" type="image"
+      src="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"/>
+  <rect id="tile" x0="4" y0="4" width="16" height="16">
+    <imagePaint asset="tile" image-width="8" image-height="8" image-rotate="0" modulate="#ffffff"/>
+  </rect>
+</anima>

package/examples/lib/cards.animl

@@ -0,0 +1,9 @@
+<library name="cards" exports="row Score">
+  <model name="Score">
+    <number name="points" default="3"/>
+  </model>
+  <component name="row" grid="10" data="Score">
+    <circle id="dot" cx="5" cy="5" r="1" fill="#000"/>
+    <bind target="dot.r" value="$points"/>
+  </component>
+</library>

package/examples/lib/shared.animl

@@ -0,0 +1,10 @@
+<library name="shared" export="Person main Mood">
+  <enum name="Mood" values="calm busy"/>
+  <model name="Person">
+    <number name="score" default="3"/>
+    <enum name="mood" enum="Mood" default="busy"/>
+  </model>
+  <instance name="main" model="Person" default="true">
+    <set path="score" value="7"/>
+  </instance>
+</library>

package/examples/lib/ui.animl

@@ -0,0 +1,8 @@
+<library name="ui">
+  <template name="press" params="hover=hover down=down">
+    <listener on="enter" set="{hover}=true"/>
+    <listener on="leave" set="{hover}=false {down}=false"/>
+    <listener on="down" set="{down}=true"/>
+    <listener on="up" set="{down}=false"/>
+  </template>
+</library>

package/examples/moon.ani

@@ -0,0 +1,250 @@
+{
+  "anima": "0.1",
+  "name": "moon",
+  "title": "Moon",
+  "grid": 20,
+  "colors": {
+    "ink": "currentColor",
+    "accent": "#d9a441"
+  },
+  "glyphs": {
+    "moon": {
+      "source": "svg",
+      "sha256": "c92583be2d63d2811f8ace875b597dcfeb0ffdc5eb6dc42544cb9bf79d03d720",
+      "d": "M8.749 4.908C8.749 4.906 8.749 4.904 8.749 4.903C8.751 4.884 8.752 4.873 8.743 4.857L9.111 4.348C9.142 4.305 9.182 4.268 9.211 4.223C9.222 4.208 9.229 4.171 9.241 4.16L9.855 3.545C9.952 3.449 9.968 3.317 10.006 3.192C10.057 3.022 10.043 2.858 9.965 2.698C9.826 2.415 9.594 2.297 9.288 2.287C9.243 2.285 9.154 2.273 9.113 2.285C9.105 2.287 9.097 2.298 9.089 2.302C9.064 2.315 9.035 2.32 9.008 2.324C8.945 2.333 8.853 2.322 8.798 2.335L8.084 2.503L7.626 2.666C7.562 2.689 7.489 2.708 7.428 2.736L6.785 3.036C6.745 3.054 6.747 3.066 6.718 3.085C6.704 3.094 6.683 3.094 6.671 3.101L6.206 3.385C6.137 3.427 6.037 3.493 5.974 3.541L5.465 3.929C5.425 3.96 5.386 4.035 5.335 4.04L4.639 4.736C4.617 4.758 4.61 4.789 4.59 4.815C4.567 4.846 4.535 4.871 4.512 4.899L4.141 5.357C4.133 5.367 4.119 5.384 4.113 5.393L3.652 6.136C3.653 6.153 3.644 6.148 3.638 6.16L3.351 6.731L3.129 7.298L2.965 7.792C2.951 7.835 2.955 7.919 2.918 7.947L2.786 8.568C2.78 8.594 2.787 8.648 2.769 8.663L2.711 9.239C2.708 9.264 2.718 9.281 2.696 9.296L2.696 9.993L2.766 10.645C2.767 10.655 2.778 10.663 2.778 10.672C2.778 10.679 2.772 10.684 2.773 10.691C2.784 10.78 2.807 10.869 2.824 10.956C2.831 10.992 2.834 11.036 2.843 11.07L3.013 11.72L3.197 12.221L3.381 12.64L3.634 13.14C3.66 13.192 3.7 13.233 3.727 13.286C3.735 13.302 3.756 13.374 3.757 13.375L4.086 13.864C4.112 13.901 4.17 13.945 4.17 13.992L4.494 14.404C4.544 14.467 4.603 14.527 4.656 14.588C4.69 14.628 4.722 14.677 4.758 14.712L5.291 15.246C5.305 15.26 5.312 15.27 5.333 15.27L5.757 15.634L6.184 15.939L6.687 16.258L7.356 16.594C7.39 16.612 7.441 16.61 7.464 16.644L8.121 16.886L8.831 17.069L9.312 17.143L10.166 17.217C10.26 17.225 10.372 17.218 10.465 17.201C10.494 17.196 10.523 17.178 10.551 17.175C10.569 17.172 10.59 17.185 10.606 17.183L11.102 17.13L11.629 17.038C11.646 17.035 11.666 17.016 11.687 17.011C11.723 17.002 11.768 17.007 11.801 16.997L12.509 16.784C12.54 16.774 12.585 16.761 12.613 16.748L13.457 16.355L14.109 15.957L14.677 15.525C14.729 15.485 14.777 15.434 14.826 15.391C14.866 15.355 14.915 15.321 14.952 15.284L15.513 14.722C15.525 14.711 15.523 14.693 15.534 14.679C15.547 14.664 15.569 14.654 15.58 14.64L15.901 14.244C15.94 14.196 15.975 14.136 16.013 14.085C16.067 14.009 16.133 13.933 16.173 13.851C16.186 13.825 16.223 13.781 16.24 13.753C16.32 13.624 16.402 13.496 16.471 13.362C16.476 13.353 16.489 13.347 16.492 13.34L16.822 12.684C16.828 12.673 16.827 12.661 16.831 12.652L17.067 12.049L17.261 11.338C17.402 10.818 17.198 10.286 16.59 10.283C16.445 10.283 16.273 10.315 16.15 10.397C16.095 10.435 16.056 10.491 16.018 10.545C16.008 10.559 15.998 10.582 15.988 10.592L15.405 11.175C15.326 11.253 15.185 11.359 15.089 11.412L14.473 11.754C14.4 11.795 14.272 11.851 14.193 11.875L13.719 12.018C13.683 12.028 13.641 12.049 13.605 12.055L13.138 12.137L12.616 12.192C12.592 12.195 12.558 12.198 12.536 12.196L11.819 12.134C11.659 12.121 11.495 12.07 11.343 12.022C11.3 12.009 11.249 11.997 11.209 11.98L10.617 11.723L10.083 11.401C10.037 11.374 9.979 11.336 9.939 11.302L9.373 10.817L8.895 10.26L8.567 9.773L8.271 9.186C8.24 9.125 8.206 9.046 8.189 8.982L8.042 8.421C8.017 8.323 8.011 8.215 7.996 8.115C7.988 8.068 7.97 8.012 7.97 7.967L7.97 7.267C7.97 7.206 7.997 7.145 8.003 7.082C8.007 7.046 8 6.955 8.005 6.933L8.126 6.366C8.139 6.302 8.166 6.234 8.183 6.169C8.195 6.126 8.202 6.073 8.218 6.033L8.423 5.508L8.732 4.894C8.738 4.898 8.743 4.903 8.749 4.908ZM8.748 3.336L8.25 3.95C8.205 4.006 8.164 4.075 8.122 4.135C8.116 4.144 8.099 4.15 8.095 4.156L7.779 4.665C7.742 4.725 7.711 4.793 7.677 4.855C7.654 4.896 7.623 4.939 7.604 4.981L7.418 5.396L7.225 5.89L7.043 6.558C7.04 6.569 7.043 6.578 7.042 6.587L6.96 7.109C6.953 7.153 6.981 7.218 6.938 7.248L6.938 7.961C6.938 7.98 6.938 8.005 6.94 8.022L7.043 8.693C7.05 8.736 7.065 8.793 7.078 8.834L7.283 9.467L7.504 9.97C7.536 10.044 7.582 10.118 7.619 10.192C7.657 10.267 7.692 10.354 7.738 10.423L8.142 11.022L8.459 11.391C8.499 11.437 8.588 11.476 8.578 11.546L9.272 12.142C9.339 12.199 9.417 12.249 9.491 12.298C9.497 12.303 9.502 12.315 9.507 12.318L9.939 12.578C9.982 12.604 10.042 12.61 10.067 12.659L10.658 12.916C10.688 12.929 10.722 12.916 10.745 12.947L11.305 13.113C11.369 13.132 11.45 13.155 11.515 13.16L12.15 13.215L12.717 13.215C12.728 13.215 12.74 13.215 12.751 13.213C12.788 13.169 12.826 13.213 12.868 13.205L13.41 13.111C13.449 13.104 13.493 13.076 13.532 13.096L14.192 12.897L14.641 12.716C14.684 12.698 14.731 12.642 14.781 12.659L15.292 12.376C15.308 12.367 15.317 12.352 15.335 12.355L15.804 12.032C15.902 11.965 15.98 11.874 16.084 11.815C16.031 11.953 15.983 12.098 15.917 12.231C15.913 12.24 15.914 12.254 15.911 12.261L15.609 12.862L15.282 13.389C15.272 13.404 15.255 13.412 15.246 13.425L14.878 13.935C14.848 13.975 14.787 13.984 14.777 14.042L14.106 14.713C14.065 14.754 14.012 14.802 13.966 14.834L13.509 15.148C13.462 15.18 13.413 15.223 13.365 15.249L12.749 15.591L12.138 15.838C12.095 15.856 12.043 15.864 11.999 15.878C11.874 15.915 11.75 15.951 11.623 15.981C11.602 15.986 11.578 16.006 11.56 16.009L10.898 16.125L10.272 16.157L9.701 16.131L9.095 16.037L8.528 15.891L7.98 15.689C7.948 15.678 7.927 15.645 7.889 15.651L7.36 15.385L6.909 15.113L6.399 14.747L5.952 14.364L5.463 13.875L5.078 13.427C5.062 13.408 5.058 13.383 5.043 13.362C5.025 13.339 4.996 13.319 4.981 13.296L4.677 12.845L4.376 12.305L4.162 11.819C4.138 11.763 4.121 11.697 4.1 11.639C4.07 11.558 4.025 11.471 4.006 11.386C4.004 11.375 4.006 11.363 4.003 11.351C3.999 11.339 3.989 11.326 3.986 11.315L3.831 10.725L3.753 10.217C3.744 10.16 3.767 10.091 3.728 10.043L3.728 9.12L3.822 8.527L3.929 8.023C3.933 8.006 3.952 7.984 3.958 7.964C3.986 7.858 4.013 7.742 4.053 7.639L4.328 6.937L4.738 6.197L5.144 5.634C5.156 5.617 5.172 5.617 5.176 5.592L5.644 5.066L6.111 4.653L6.617 4.268L7.211 3.906L7.939 3.566C7.976 3.549 8.015 3.554 8.054 3.539C8.28 3.457 8.515 3.384 8.748 3.336Z"
+    }
+  },
+  "a11y": {
+    "role": "switch",
+    "label": "Dark mode",
+    "activate": "dark",
+    "pressed": "dark",
+    "held": "down"
+  },
+  "inputs": {
+    "dark": {
+      "type": "bool",
+      "default": false
+    },
+    "hover": {
+      "type": "bool"
+    },
+    "down": {
+      "type": "bool"
+    }
+  },
+  "nodes": [
+    {
+      "id": "interaction",
+      "type": "group",
+      "pivot": [10, 10],
+      "children": [
+        {
+          "id": "moon",
+          "type": "group",
+          "pivot": [10, 10],
+          "children": [
+            {
+              "id": "glyph",
+              "type": "path",
+              "glyph": "moon",
+              "fill": {
+                "color": "ink",
+                "rule": "evenodd"
+              }
+            }
+          ]
+        },
+        {
+          "id": "star-a",
+          "type": "circle",
+          "center": [12, 3.5],
+          "r": 0.45,
+          "pivot": [12, 3.5],
+          "scale": 0,
+          "fill": {
+            "color": "accent"
+          }
+        },
+        {
+          "id": "star-b",
+          "type": "circle",
+          "center": [16, 5],
+          "r": 0.6,
+          "pivot": [16, 5],
+          "scale": 0,
+          "fill": {
+            "color": "accent"
+          }
+        },
+        {
+          "id": "star-c",
+          "type": "circle",
+          "center": [17.5, 8],
+          "r": 0.35,
+          "pivot": [17.5, 8],
+          "scale": 0,
+          "fill": {
+            "color": "accent"
+          }
+        }
+      ]
+    }
+  ],
+  "timelines": {
+    "nightfall": {
+      "duration": 0.6,
+      "reducedMotion": "end",
+      "tracks": {
+        "moon.rotate": [
+          [0, 0, "out"],
+          [0.1, -30, "out"],
+          [0.34, 5, "inOut"],
+          [0.6, 0]
+        ],
+        "star-a.scale": [
+          [0, 0, "hold"],
+          [0.12, 0, "out"],
+          [0.27, 1.25, "inOut"],
+          [0.4, 1]
+        ],
+        "star-b.scale": [
+          [0, 0, "hold"],
+          [0.2, 0, "out"],
+          [0.35, 1.25, "inOut"],
+          [0.48, 1]
+        ],
+        "star-c.scale": [
+          [0, 0, "hold"],
+          [0.28, 0, "out"],
+          [0.43, 1.25, "inOut"],
+          [0.56, 1]
+        ]
+      }
+    }
+  },
+  "machine": {
+    "layers": {
+      "mode": {
+        "initial": "light",
+        "states": {
+          "light": {
+            "pose": {},
+            "on": [
+              {
+                "when": "dark",
+                "to": "dark",
+                "blend": 0.12,
+                "ease": "out",
+                "interruptible": true
+              }
+            ]
+          },
+          "dark": {
+            "play": "nightfall",
+            "on": [
+              {
+                "when": "!dark",
+                "to": "light",
+                "blend": 0.24,
+                "ease": "inOut",
+                "interruptible": true
+              }
+            ]
+          }
+        }
+      },
+      "feedback": {
+        "initial": "rest",
+        "states": {
+          "rest": {
+            "pose": {},
+            "on": [
+              {
+                "when": "down",
+                "to": "pressed",
+                "blend": 0.08,
+                "interruptible": true
+              },
+              {
+                "when": "hover",
+                "to": "hovered",
+                "blend": 0.16,
+                "interruptible": true
+              }
+            ]
+          },
+          "hovered": {
+            "pose": {
+              "interaction.scale": 1.05
+            },
+            "on": [
+              {
+                "when": "down",
+                "to": "pressed",
+                "blend": 0.08,
+                "interruptible": true
+              },
+              {
+                "when": "!hover",
+                "to": "rest",
+                "blend": 0.18,
+                "interruptible": true
+              }
+            ]
+          },
+          "pressed": {
+            "pose": {
+              "interaction.scale": 0.95
+            },
+            "on": [
+              {
+                "when": "!down && hover",
+                "to": "hovered",
+                "blend": 0.14,
+                "interruptible": true
+              },
+              {
+                "when": "!down && !hover",
+                "to": "rest",
+                "blend": 0.18,
+                "interruptible": true
+              }
+            ]
+          }
+        }
+      }
+    }
+  },
+  "listeners": [
+    {
+      "on": "click",
+      "toggle": "dark"
+    },
+    {
+      "on": "enter",
+      "set": {
+        "hover": true
+      }
+    },
+    {
+      "on": "leave",
+      "set": {
+        "hover": false,
+        "down": false
+      }
+    },
+    {
+      "on": "down",
+      "set": {
+        "down": true
+      }
+    },
+    {
+      "on": "up",
+      "set": {
+        "down": false
+      }
+    }
+  ]
+}

package/examples/moon.animl

@@ -0,0 +1,55 @@
+<anima version="0.1" name="moon" title="Moon" grid="20">
+  <import src="lib/ui.animl" as="ui"/>
+  <color name="ink" value="currentColor"/>
+
+  <glyph name="moon"
+      d="M8.749 4.908C8.749 4.906 8.749 4.904 8.749 4.903C8.751 4.884 8.752 4.873 8.743 4.857L9.111 4.348C9.142 4.305 9.182 4.268 9.211 4.223C9.222 4.208 9.229 4.171 9.241 4.16L9.855 3.545C9.952 3.449 9.968 3.317 10.006 3.192C10.057 3.022 10.043 2.858 9.965 2.698C9.826 2.415 9.594 2.297 9.288 2.287C9.243 2.285 9.154 2.273 9.113 2.285C9.105 2.287 9.097 2.298 9.089 2.302C9.064 2.315 9.035 2.32 9.008 2.324C8.945 2.333 8.853 2.322 8.798 2.335L8.084 2.503L7.626 2.666C7.562 2.689 7.489 2.708 7.428 2.736L6.785 3.036C6.745 3.054 6.747 3.066 6.718 3.085C6.704 3.094 6.683 3.094 6.671 3.101L6.206 3.385C6.137 3.427 6.037 3.493 5.974 3.541L5.465 3.929C5.425 3.96 5.386 4.035 5.335 4.04L4.639 4.736C4.617 4.758 4.61 4.789 4.59 4.815C4.567 4.846 4.535 4.871 4.512 4.899L4.141 5.357C4.133 5.367 4.119 5.384 4.113 5.393L3.652 6.136C3.653 6.153 3.644 6.148 3.638 6.16L3.351 6.731L3.129 7.298L2.965 7.792C2.951 7.835 2.955 7.919 2.918 7.947L2.786 8.568C2.78 8.594 2.787 8.648 2.769 8.663L2.711 9.239C2.708 9.264 2.718 9.281 2.696 9.296L2.696 9.993L2.766 10.645C2.767 10.655 2.778 10.663 2.778 10.672C2.778 10.679 2.772 10.684 2.773 10.691C2.784 10.78 2.807 10.869 2.824 10.956C2.831 10.992 2.834 11.036 2.843 11.07L3.013 11.72L3.197 12.221L3.381 12.64L3.634 13.14C3.66 13.192 3.7 13.233 3.727 13.286C3.735 13.302 3.756 13.374 3.757 13.375L4.086 13.864C4.112 13.901 4.17 13.945 4.17 13.992L4.494 14.404C4.544 14.467 4.603 14.527 4.656 14.588C4.69 14.628 4.722 14.677 4.758 14.712L5.291 15.246C5.305 15.26 5.312 15.27 5.333 15.27L5.757 15.634L6.184 15.939L6.687 16.258L7.356 16.594C7.39 16.612 7.441 16.61 7.464 16.644L8.121 16.886L8.831 17.069L9.312 17.143L10.166 17.217C10.26 17.225 10.372 17.218 10.465 17.201C10.494 17.196 10.523 17.178 10.551 17.175C10.569 17.172 10.59 17.185 10.606 17.183L11.102 17.13L11.629 17.038C11.646 17.035 11.666 17.016 11.687 17.011C11.723 17.002 11.768 17.007 11.801 16.997L12.509 16.784C12.54 16.774 12.585 16.761 12.613 16.748L13.457 16.355L14.109 15.957L14.677 15.525C14.729 15.485 14.777 15.434 14.826 15.391C14.866 15.355 14.915 15.321 14.952 15.284L15.513 14.722C15.525 14.711 15.523 14.693 15.534 14.679C15.547 14.664 15.569 14.654 15.58 14.64L15.901 14.244C15.94 14.196 15.975 14.136 16.013 14.085C16.067 14.009 16.133 13.933 16.173 13.851C16.186 13.825 16.223 13.781 16.24 13.753C16.32 13.624 16.402 13.496 16.471 13.362C16.476 13.353 16.489 13.347 16.492 13.34L16.822 12.684C16.828 12.673 16.827 12.661 16.831 12.652L17.067 12.049L17.261 11.338C17.402 10.818 17.198 10.286 16.59 10.283C16.445 10.283 16.273 10.315 16.15 10.397C16.095 10.435 16.056 10.491 16.018 10.545C16.008 10.559 15.998 10.582 15.988 10.592L15.405 11.175C15.326 11.253 15.185 11.359 15.089 11.412L14.473 11.754C14.4 11.795 14.272 11.851 14.193 11.875L13.719 12.018C13.683 12.028 13.641 12.049 13.605 12.055L13.138 12.137L12.616 12.192C12.592 12.195 12.558 12.198 12.536 12.196L11.819 12.134C11.659 12.121 11.495 12.07 11.343 12.022C11.3 12.009 11.249 11.997 11.209 11.98L10.617 11.723L10.083 11.401C10.037 11.374 9.979 11.336 9.939 11.302L9.373 10.817L8.895 10.26L8.567 9.773L8.271 9.186C8.24 9.125 8.206 9.046 8.189 8.982L8.042 8.421C8.017 8.323 8.011 8.215 7.996 8.115C7.988 8.068 7.97 8.012 7.97 7.967L7.97 7.267C7.97 7.206 7.997 7.145 8.003 7.082C8.007 7.046 8 6.955 8.005 6.933L8.126 6.366C8.139 6.302 8.166 6.234 8.183 6.169C8.195 6.126 8.202 6.073 8.218 6.033L8.423 5.508L8.732 4.894C8.738 4.898 8.743 4.903 8.749 4.908ZM8.748 3.336L8.25 3.95C8.205 4.006 8.164 4.075 8.122 4.135C8.116 4.144 8.099 4.15 8.095 4.156L7.779 4.665C7.742 4.725 7.711 4.793 7.677 4.855C7.654 4.896 7.623 4.939 7.604 4.981L7.418 5.396L7.225 5.89L7.043 6.558C7.04 6.569 7.043 6.578 7.042 6.587L6.96 7.109C6.953 7.153 6.981 7.218 6.938 7.248L6.938 7.961C6.938 7.98 6.938 8.005 6.94 8.022L7.043 8.693C7.05 8.736 7.065 8.793 7.078 8.834L7.283 9.467L7.504 9.97C7.536 10.044 7.582 10.118 7.619 10.192C7.657 10.267 7.692 10.354 7.738 10.423L8.142 11.022L8.459 11.391C8.499 11.437 8.588 11.476 8.578 11.546L9.272 12.142C9.339 12.199 9.417 12.249 9.491 12.298C9.497 12.303 9.502 12.315 9.507 12.318L9.939 12.578C9.982 12.604 10.042 12.61 10.067 12.659L10.658 12.916C10.688 12.929 10.722 12.916 10.745 12.947L11.305 13.113C11.369 13.132 11.45 13.155 11.515 13.16L12.15 13.215L12.717 13.215C12.728 13.215 12.74 13.215 12.751 13.213C12.788 13.169 12.826 13.213 12.868 13.205L13.41 13.111C13.449 13.104 13.493 13.076 13.532 13.096L14.192 12.897L14.641 12.716C14.684 12.698 14.731 12.642 14.781 12.659L15.292 12.376C15.308 12.367 15.317 12.352 15.335 12.355L15.804 12.032C15.902 11.965 15.98 11.874 16.084 11.815C16.031 11.953 15.983 12.098 15.917 12.231C15.913 12.24 15.914 12.254 15.911 12.261L15.609 12.862L15.282 13.389C15.272 13.404 15.255 13.412 15.246 13.425L14.878 13.935C14.848 13.975 14.787 13.984 14.777 14.042L14.106 14.713C14.065 14.754 14.012 14.802 13.966 14.834L13.509 15.148C13.462 15.18 13.413 15.223 13.365 15.249L12.749 15.591L12.138 15.838C12.095 15.856 12.043 15.864 11.999 15.878C11.874 15.915 11.75 15.951 11.623 15.981C11.602 15.986 11.578 16.006 11.56 16.009L10.898 16.125L10.272 16.157L9.701 16.131L9.095 16.037L8.528 15.891L7.98 15.689C7.948 15.678 7.927 15.645 7.889 15.651L7.36 15.385L6.909 15.113L6.399 14.747L5.952 14.364L5.463 13.875L5.078 13.427C5.062 13.408 5.058 13.383 5.043 13.362C5.025 13.339 4.996 13.319 4.981 13.296L4.677 12.845L4.376 12.305L4.162 11.819C4.138 11.763 4.121 11.697 4.1 11.639C4.07 11.558 4.025 11.471 4.006 11.386C4.004 11.375 4.006 11.363 4.003 11.351C3.999 11.339 3.989 11.326 3.986 11.315L3.831 10.725L3.753 10.217C3.744 10.16 3.767 10.091 3.728 10.043L3.728 9.12L3.822 8.527L3.929 8.023C3.933 8.006 3.952 7.984 3.958 7.964C3.986 7.858 4.013 7.742 4.053 7.639L4.328 6.937L4.738 6.197L5.144 5.634C5.156 5.617 5.172 5.617 5.176 5.592L5.644 5.066L6.111 4.653L6.617 4.268L7.211 3.906L7.939 3.566C7.976 3.549 8.015 3.554 8.054 3.539C8.28 3.457 8.515 3.384 8.748 3.336Z"
+      source="svg" sha256="c92583be2d63d2811f8ace875b597dcfeb0ffdc5eb6dc42544cb9bf79d03d720"/>
+
+  <color name="accent" value="#d9a441"/>
+  <bool name="dark" default="false"/>
+  <bool name="hover"/>
+  <bool name="down"/>
+  <a11y role="switch" label="Dark mode" activate="dark" pressed="dark" held="down"/>
+  <!-- Keep the glyph geometry intact; separate nodes compose interaction and rotation. -->
+  <group id="interaction" pivot="10 10">
+    <group id="moon" pivot="10 10">
+      <path id="glyph" glyph="moon" fill="ink" fill-rule="evenodd"/>
+    </group>
+    <circle id="star-a" cx="12" cy="3.5" r="0.45" pivot="12 3.5" scale="0" fill="accent"/>
+    <circle id="star-b" cx="16" cy="5" r="0.6" pivot="16 5" scale="0" fill="accent"/>
+    <circle id="star-c" cx="17.5" cy="8" r="0.35" pivot="17.5 8" scale="0" fill="accent"/>
+  </group>
+  <timeline name="nightfall" duration="0.6" reducedMotion="end">
+    <track target="moon.rotate">0 0 out; 0.1 -30 out; 0.34 5 inOut; 0.6 0</track>
+    <track target="star-a.scale">0 0 hold; 0.12 0 out; 0.27 1.25 inOut; 0.4 1</track>
+    <track target="star-b.scale">0 0 hold; 0.2 0 out; 0.35 1.25 inOut; 0.48 1</track>
+    <track target="star-c.scale">0 0 hold; 0.28 0 out; 0.43 1.25 inOut; 0.56 1</track>
+  </timeline>
+  <layer name="mode" initial="light">
+    <state name="light">
+      <on when="dark" to="dark" blend="0.12" ease="out" interruptible="true"/>
+    </state>
+    <state name="dark" play="nightfall">
+      <on when="!dark" to="light" blend="0.24" ease="inOut" interruptible="true"/>
+    </state>
+  </layer>
+  <layer name="feedback" initial="rest">
+    <state name="rest">
+      <on when="down" to="pressed" blend="0.08" interruptible="true"/>
+      <on when="hover" to="hovered" blend="0.16" interruptible="true"/>
+    </state>
+    <state name="hovered">
+      <pose interaction.scale="1.05"/>
+      <on when="down" to="pressed" blend="0.08" interruptible="true"/>
+      <on when="!hover" to="rest" blend="0.18" interruptible="true"/>
+    </state>
+    <state name="pressed">
+      <pose interaction.scale="0.95"/>
+      <on when="!down and hover" to="hovered" blend="0.14" interruptible="true"/>
+      <on when="!down and !hover" to="rest" blend="0.18" interruptible="true"/>
+    </state>
+  </layer>
+  <listener on="click" toggle="dark"/>
+  <apply template="ui:press"/>
+</anima>

package/examples/motion.ani

@@ -0,0 +1,94 @@
+{
+  "anima": "0.1",
+  "name": "motion",
+  "grid": 20,
+  "requires": ["motion"],
+  "nodes": [
+    {
+      "id": "dot",
+      "type": "circle",
+      "center": [10, 10],
+      "r": 2,
+      "pivot": [10, 10],
+      "fill": {
+        "color": "#000"
+      },
+      "pivotX": 10,
+      "pivotY": 10,
+      "channels": {
+        "count": {
+          "type": "int",
+          "value": 0
+        },
+        "label": {
+          "type": "string",
+          "value": "Ready"
+        },
+        "target": {
+          "type": "reference",
+          "value": "dot"
+        }
+      }
+    }
+  ],
+  "timelines": {
+    "bounce": {
+      "duration": 2,
+      "loop": "pingpong",
+      "tracks": {
+        "dot.y": [
+          [0, 0, "value-cubic(0.3333333333333333, -8, 0.6666666666666666, -8)"],
+          [2, 0]
+        ],
+        "dot.pivotX": [
+          [0, 10],
+          [2, 14]
+        ],
+        "dot.channels.count": [
+          [0, 0],
+          [1, -1],
+          [2, 2]
+        ],
+        "dot.channels.label": [
+          [0, "Ready"],
+          [1, "Bouncing"],
+          [2, "Done"]
+        ]
+      },
+      "events": [
+        [1, "apex"]
+      ],
+      "speed": 1,
+      "quantize": 12,
+      "work": [0.25, 1.75]
+    }
+  },
+  "machine": {
+    "layers": {
+      "main": {
+        "initial": "bounce",
+        "states": {
+          "bounce": {
+            "play": "bounce"
+          }
+        }
+      }
+    }
+  },
+  "machines": {
+    "accent": {
+      "layers": {
+        "tone": {
+          "initial": "small",
+          "states": {
+            "small": {
+              "pose": {
+                "dot.scale": 0.75
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/examples/motion.animl

@@ -0,0 +1,24 @@
+<anima version="0.1" name="motion" grid="20" requires="motion">
+  <circle id="dot" cx="10" cy="10" r="2" pivotX="10" pivotY="10" pivot="10 10" fill="#000">
+    <channel name="count" type="int" value="0"/>
+    <channel name="label" type="string" value="&quot;Ready&quot;"/>
+    <channel name="target" type="reference" value="&quot;dot&quot;"/>
+  </circle>
+  <timeline name="bounce" duration="2" loop="pingpong" speed="1" quantize="12" work="0.25 1.75">
+    <track target="dot.y">0 0 value-cubic(0.3333333333333333, -8, 0.6666666666666666, -8); 2 0</track>
+    <track target="dot.pivotX">0 10; 2 14</track>
+    <track target="dot.channels.count">0 0; 1 -1; 2 2</track>
+    <track target="dot.channels.label">0 "Ready"; 1 "Bouncing"; 2 "Done"</track>
+    <event at="1" name="apex"/>
+  </timeline>
+  <layer name="main" initial="bounce">
+    <state name="bounce" play="bounce"/>
+  </layer>
+  <machine name="accent">
+    <layer name="tone" initial="small">
+      <state name="small">
+        <pose dot.scale="0.75"/>
+      </state>
+    </layer>
+  </machine>
+</anima>

package/examples/paint.ani

@@ -0,0 +1,91 @@
+{
+  "anima": "0.1",
+  "name": "paint",
+  "title": "Paint module",
+  "grid": 20,
+  "requires": ["paint"],
+  "colors": {
+    "accent": "#d97757"
+  },
+  "nodes": [
+    {
+      "id": "panel",
+      "type": "rect",
+      "x0": 2,
+      "y0": 2,
+      "w": 16,
+      "h": 16,
+      "rx": 3,
+      "fill": {
+        "type": "linear",
+        "x1": 2,
+        "y1": 2,
+        "x2": 18,
+        "y2": 18,
+        "stops": [
+          {
+            "position": 0,
+            "color": "#4263eb"
+          },
+          {
+            "position": 1,
+            "color": "#4263eb00"
+          }
+        ]
+      },
+      "stroke": {
+        "width": 0.6,
+        "type": "radial",
+        "cx": 10,
+        "cy": 10,
+        "r": 12,
+        "fx": 7,
+        "fy": 7,
+        "stops": [
+          {
+            "position": 0,
+            "color": "accent"
+          },
+          {
+            "position": 1,
+            "color": "#4263eb"
+          }
+        ],
+        "dash": ["8%", "4%"],
+        "dashOffset": 0
+      }
+    }
+  ],
+  "timelines": {
+    "shine": {
+      "duration": 2,
+      "loop": "pingpong",
+      "tracks": {
+        "panel.fill.x2": [
+          [0, 18],
+          [2, 10]
+        ],
+        "panel.fill.stops.0.color": [
+          [0, "#4263eb"],
+          [2, "#d97757"]
+        ],
+        "panel.stroke.dashOffset": [
+          [0, 0],
+          [2, -0.24]
+        ]
+      }
+    }
+  },
+  "machine": {
+    "layers": {
+      "paint": {
+        "initial": "shine",
+        "states": {
+          "shine": {
+            "play": "shine"
+          }
+        }
+      }
+    }
+  }
+}

package/examples/paint.animl

@@ -0,0 +1,21 @@
+<anima version="0.1" name="paint" title="Paint module" grid="20" requires="paint">
+  <color name="accent" value="#d97757"/>
+  <rect id="panel" x0="2" y0="2" width="16" height="16" rx="3" stroke-width="0.6" stroke-dasharray="8% 4%" stroke-dashoffset="0">
+    <linearGradient x1="2" y1="2" x2="18" y2="18">
+      <stop offset="0" stop-color="#4263eb"/>
+      <stop offset="1" stop-color="#4263eb00"/>
+    </linearGradient>
+    <radialGradient paint="stroke" cx="10" cy="10" r="12" fx="7" fy="7">
+      <stop offset="0" stop-color="accent"/>
+      <stop offset="1" stop-color="#4263eb"/>
+    </radialGradient>
+  </rect>
+  <timeline name="shine" duration="2" loop="pingpong">
+    <track target="panel.fill.x2">0 18; 2 10</track>
+    <track target="panel.fill.stops.0.color">0 #4263eb; 2 #d97757</track>
+    <track target="panel.stroke-dashoffset">0 0; 2 -0.24</track>
+  </timeline>
+  <layer name="paint" initial="shine">
+    <state name="shine" play="shine"/>
+  </layer>
+</anima>