Examples / anim-tween

anim-tween.json

targets v0.41.0 5 entities 12 schemas

A panel filled by reference (rig.paint.fill to a gradient entity listed in a rig.paint.library), shown with rig.render.visibility and rig.render.blend, faded in by a rig.anim.tween shaped by a rig.anim.curve.

Coverage specimens

Documents under coverage/ exist to exercise schema ids for the validator and the maturity gate - they are deliberately dense and are not copy patterns. The skill never links them; imitate the teaching examples above instead.

coverage/paint-effects.json

Referenced paint on real drawables: an arc dial stroked by a shared rig.paint.solid, with paint order, markers, and an alpha mask; a spline under a blur filter graph; a hatched ring badge and a scaled rig.spatial.instance of it.

coverage/pixel-layers.json

A 64px canvas, a four-colour palette, one solid layer with generator source, raster role, hatch region, mask path, effect chain, and composite flag, plus a tile layer over the palette.

Speaks

rig.anim.curve · rig.anim.tween · rig.geometry.rectangle · rig.meta.named · rig.paint.fill · rig.paint.gradient · rig.paint.library · rig.render.blend · rig.render.visibility · rig.spatial.relationship · rig.spatial.transform · rig.spatial.vertex

Document

Validates under npm run check — raw file · open in RigPlayer — drop it in, press play, remix it, share the link. 

{
  "rig": "0.41.0",
  "document": {
    "title": "Tween and referenced paint",
    "defaultUnit": "px"
  },
  "entities": [
    {
      "id": "world",
      "components": {
        "rig.meta.named": {
          "name": "world",
          "stableId": "world"
        },
        "rig.spatial.vertex": {},
        "rig.spatial.transform": {
          "position": [
            0,
            0,
            0
          ]
        }
      }
    },
    {
      "id": "sky-paint",
      "components": {
        "rig.meta.named": {
          "name": "Sky",
          "stableId": "sky-paint"
        },
        "rig.paint.gradient": {
          "kind": "linear",
          "stops": [
            {
              "t": 0,
              "rgba": [
                0.2,
                0.5,
                1,
                1
              ]
            },
            {
              "t": 1,
              "rgba": [
                0.9,
                0.95,
                1,
                1
              ]
            }
          ],
          "start": [
            0,
            0
          ],
          "end": [
            0,
            1
          ]
        }
      }
    },
    {
      "id": "swatches",
      "components": {
        "rig.meta.named": {
          "name": "Swatches",
          "stableId": "swatches"
        },
        "rig.paint.library": {
          "paints": [
            "sky-paint"
          ]
        }
      }
    },
    {
      "id": "panel",
      "components": {
        "rig.meta.named": {
          "name": "Panel",
          "stableId": "panel"
        },
        "rig.spatial.transform": {
          "position": [
            20,
            20,
            0
          ]
        },
        "rig.spatial.relationship": {
          "parent": "world"
        },
        "rig.geometry.rectangle": {
          "x": 0,
          "y": 0,
          "width": 160,
          "height": 90,
          "cornerRadius": 8
        },
        "rig.paint.fill": {
          "paint": "sky-paint"
        },
        "rig.render.visibility": {
          "visible": true
        },
        "rig.render.blend": {
          "opacity": 0.9
        }
      }
    },
    {
      "id": "fade",
      "components": {
        "rig.meta.named": {
          "name": "Fade in",
          "stableId": "fade"
        },
        "rig.anim.tween": {
          "target": "panel",
          "propertyKey": "opacity",
          "from": 0,
          "to": 0.9,
          "duration": 1.5,
          "easing": "ease-out"
        },
        "rig.anim.curve": {
          "points": [
            [
              0,
              0
            ],
            [
              0.6,
              0.85
            ],
            [
              1,
              1
            ]
          ],
          "interpolation": "smooth"
        }
      }
    }
  ]
}