Example: Energy Rating badge

Manifest row 18 · built today as betta-energy-rating

The 4.5-star energy rating badge, a single swappable PNG shown at half its native size, sliding up into place while fading in. The notes say "can drag and add an effect to it, otherwise simple", so this page is deliberately the smallest possible document — one layer — plus what an added effect looks like.

flowchart TB
    subgraph scene["scene-energy-rating  (one motion graph per ratio)"]
        BADGE["er-badge<br/>image · absolute · w 189, h content · slideFade · effects"]
    end

The document

{
  "id": "scene-energy-rating",
  "durationInFrames": 75,
  "layers": [
    {
      "id": "er-badge",
      "type": "image",
      "zIndex": 1,
      "layout": {
        "mode": "absolute",
        "16:9": { "x": 120, "y": 120, "w": 189, "h": "content", "anchor": "top-left" },
        "9:16": { /* … */ }, "1:1": { /* … */ }
      },
      "props": { "src": { "kind": "bundled", "path": "effects/betta-energy-rating/badge.png" } },
      "animations": [
        { "animation": "slideFade",
          "params": { "from": "bottom", "distance": 57, "durationInFrames": 12 },
          "at": { "mode": "cueOffset", "cue": "start", "offsetFrames": 0 } }
      ],
      // "Drag and add an effect": today's per-layer effect stack, unchanged. Paint-time, applied
      // at Place to the rasterised layer; a shadow's spread lands in the layer's `extents`.
      "effects": [
        { "name": "drop-shadow", "props": { "color": "#000000", "opacity": 0.3, "blurPx": 10,
                                            "offsetX": 0, "offsetY": 6 } }
      ]
    }
  ]
}

What a campaign would bind:

Path	Control
er-badge.props.src	image (the rating artwork for this product)
er-badge.layout.16:9.w (and per ratio)	number

What the engine does with it

Resolve. One at, frame 0. slideFade expands to a y track and an opacity track.

Solve. The badge's intrinsic size is the PNG's 378 × 378; w: 189, h: "content" makes it 189 × 189. Its content bounds are that box; its extents add the shadow's spread.

Animate. A single node with no edges; the two tracks compose into its matrix and opacity.

Place. One <img> at its solved box, the effect stack painted on top of it.

What this shows

• The floor of the system: a one-layer document is still a graph, a solve, and a place.
• Effects are orthogonal to the graph. The badge's motion is the graph's; its shadow is paint applied after Place. The two never need to know about each other except through extents.

Stress points

• Effects aren't in the pipeline page. Where the per-layer effects stack runs (Place, on the rasterised layer) and how it feeds extents (a shadow's spread) is implied by Coordinate System → Bounds and Rasterization and bounds ownership but stated nowhere in Pipeline & Architecture. One sentence in the Place stage would do it.
• Same self-relative distance gap as row 17: the built entrance is distancePercent: 30 of the badge's own height; 57 above is 30% of 189 worked out by hand.
• Nothing else. This one fits the model exactly.