Emboss
Embossed / debossed relief shading on top of child content, driven by a custom shape
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| origin | origin | center | Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre. |
| center | position | {"x":0.5,"y":0.5} | Center position of the embossed shape |
| scale | range | 1 | Scale of the embossed shape (1 = default size) |
| rotation | range | 0 | Rotation of the embossed shape in degrees |
| depth | range | -0.5 | Relief depth — negative = inset (debossed), positive = raised (embossed) |
| lightAngle | range | 260 | Directional light angle in degrees — controls highlight and shadow direction |
| lightIntensity | range | 0.6 | Strength of the directional edge highlights and shadows |
| shadowIntensity | range | 0.3 | Darkness of the relief shadow |
| shape | shape | {"type":"sphere3D","radius":0.35} | Serialized shape configuration (JSON) |
| shapeSdfUrl | shape-upload | URL to a pre-generated SDF .bin file — when non-empty, activates SVG mode and triggers a shader recompile | |
| shapeType | - | Active SDF shape type — triggers recompile when shape is switched. When empty, derived from shape JSON at mount time. |
Usage
vue
<Shader>
<Emboss>
<Circle />
</Emboss>
</Shader>