Emboss
Embossed / debossed relief shading on top of child content, driven by a custom shape
Props
Prop
Details
center{x: number, y: number}Default:
{"x":0.5,"y":0.5}Center position of the embossed shape
center{x: number, y: number}Default: {"x":0.5,"y":0.5}Center position of the embossed shape
scalenumberDefault:
1Scale of the embossed shape (1 = default size)
scalenumberDefault: 1Scale of the embossed shape (1 = default size)
depthnumberDefault:
-0.5Relief depth — negative = inset (debossed), positive = raised (embossed)
depthnumberDefault: -0.5Relief depth — negative = inset (debossed), positive = raised (embossed)
lightAnglenumberDefault:
260Directional light angle in degrees — controls highlight and shadow direction
lightAnglenumberDefault: 260Directional light angle in degrees — controls highlight and shadow direction
lightIntensitynumberDefault:
0.6Strength of the directional edge highlights and shadows
lightIntensitynumberDefault: 0.6Strength of the directional edge highlights and shadows
shadowIntensitynumberDefault:
0.3Darkness of the relief shadow
shadowIntensitynumberDefault: 0.3Darkness of the relief shadow
shapeShapeConfigDefault:
circleSDFShape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.
shapeShapeConfigDefault: circleSDFShape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.
shapeSdfUrlstringDefault:
""URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.
shapeSdfUrlstringDefault: ""URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.
Usage
<Shader>
<Emboss>
<Circle />
</Emboss>
</Shader>