Matte specs

docs/specs/constants.md

@@ -157,6 +157,27 @@
 
 {schema_enum:stroke-dash-type}
 
+<h2 id="matte-mode">Matte Mode</h2>
+
+{schema_string:constants/matte-mode/description}
+
+The value for Luma is calculated accourding to [Rec.709](https://www.itu.int/rec/R-REC-BT.709) standard:
+
+$$Y = 0.2126 R + 0.7152 G + 0.0722 B$$
+
+{schema_enum:matte-mode}
+
+<lottie-playground example="matte.json">
+    <title>Example</title>
+    <form>
+        <enum title="Matte Mode" value="1">matte-mode</enum>
+    </form>
+    <json>{...lottie.layers[1], shapes: [], ks: {}}</json>
+    <script>
+        lottie.layers[1].tt = Number(data["Matte Mode"]);
+    </script>
+</lottie-playground>
+
 <h2 id="gradient-type">Gradient Type</h2>
 
 {schema_string:constants/gradient-type/description}

docs/specs/layers.md

@@ -18,6 +18,42 @@ The `ty` property defines the specific layer type based on the following values:
 
 {schema_object:layers/visual-layer}
 
+
+#### Mattes
+
+A matte allows using a layer as a mask for another layer.
+
+The way it works is the layer defining the mask has a `tt` attribute with the
+appropriate [value](constants.md#matte-mode).
+The layer being masked is indicated by the `tp` attribute, which has the index (`ind`) of the layer that is being masked.
+
+In this example there's a layer with a rectangle and a star being masked by an ellipse:
+
+
+<lottie-playground example="matte.json">
+    <title>Example</title>
+    <form>
+        <input type="checkbox" checked="checked" title="Enable Matte"/>
+        <enum title="Matte Mode" value="1">matte-mode</enum>
+    </form>
+    <json>{...lottie.layers[1], shapes: [], ks: {}}</json>
+    <script>
+        if ( data["Enable Matte"] )
+        {
+            lottie.layers[1].tt = Number(data["Matte Mode"]);
+            lottie.layers[1].tp = 1;
+            lottie.layers[0].td = 1;
+        }
+        else
+        {
+            lottie.layers[1].tt = undefined;
+            lottie.layers[1].tp = undefined;
+            lottie.layers[0].td = undefined;
+        }
+    </script>
+</lottie-playground>
+
+
 ## Layer types