Shadow Projection
Shadows are a physical phenomenon that stems from the reflection of objects in real life and the distance between these objects. In interfaces, we often communicate to users the height distance and hierarchical relationships between elements by directly simulating the projection of elements.
Overview
Specification
Shadows are created by two different layers of planes, and their intensity is determined by the distance between the two. Therefore, the height of an object directly affects the object's shadow; for example, the further it is from the ground, the larger the shadow and the higher the blur value. We classify the system into four UI levels: weak, low, medium, and high, each distributed at different height levels, and the shadow properties vary accordingly.
Altitude
Shadows are produced by two different layers of planes, and the intensity is determined by the distance between them. Therefore, the height of an object directly affects its shadow; the farther an object is from the ground, the larger and blurrier the shadow becomes. We categorize the system into four UI levels: none, low, medium, and high, each distributed at different height levels, with varying shadow attributes.
Direction
Different projection directions are provided based on the style of the components and their location.
Note example
