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
Context
A follow-up to #355 and the
style.materialwork 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 | mattepaints a highlight and an edge computed on the node's box, then clipped byclip-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-centreradial-gradientplus a lightfilter: blurgives a single volume, not a relief per branch.Proposed vocabulary
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
bevelpx inward, and lit by the scenelightthat #357 introduced.softnesscontrols 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