material: an "inflated" preset whose shading follows the clipped silhouette #385

Context

A follow-up to #355 and the style.material work that landed with #357. The reel 4 reference's stars and pills look like inflated objects: soft light on the top-left of each branch, shade in the hollows, rounded edges. They read as volumes, not as flat varnished shapes.

What happens today

material: glossy | metal | matte paints a highlight and an edge computed on the node's box, then clipped by clip-path (rules/material-and-light.md). The shading doesn't know the distance to the silhouette's edge, so on a five-branch star clipped from a rectangle, the highlight is one band across the box and not one per branch. An off-centre radial-gradient plus a light filter: blur gives a single volume, not a relief per branch.

Proposed vocabulary

"style": {
  "clip-path": { "kind": "path", "d": "…" },
  "material": { "preset": "inflated", "bevel": 24, "softness": 0.6 }
}

The shading is computed from a distance field of the clipped silhouette. The normal is approximated by the gradient of the blurred SDF, up to bevel px inward, and lit by the scene light that #357 introduced. softness controls how rounded the profile is (from a pillow to a hard bevel).

This keeps the #355 decision (a scene-declared light that materials derive from) and adds one preset, instead of a new lighting model.

Found in: reel 4