@shopify/react-native-skia 2.0.7 → 2.1.1

package/src/renderer/__tests__/e2e/setup/skottie/text-layer.json

@@ -0,0 +1 @@
+{"v":"5.6.3","fr":24,"ip":0,"op":43,"w":1000,"h":1000,"nm":"add text","ddd":0,"assets":[],"fonts":{"list":[{"fName":"Avenir-Heavy","fFamily":"Avenir","fStyle":"Heavy","ascent":75.5996704101562}]},"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 12","parent":5,"td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[-27.82,5.172,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":0,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":6,"s":[216,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":21,"s":[216,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":30,"s":[6,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":38,"s":[6,100,100]},{"t":43,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[215.18,238.344],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.976470588235,0.905882352941,0.050980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-135.41,5.172],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":240,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":5,"nm":"hello! 2","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[278.604,561.008,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"t":{"d":{"k":[{"s":{"s":164,"f":"Avenir-Heavy","t":"hello!","j":0,"tr":25,"lh":196.8,"ls":0,"fc":[1,1,1]},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0],"ix":2}},"a":[]},"ip":0,"op":240,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 11","parent":5,"td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[-27.82,5.172,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":0,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":6,"s":[216,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":21,"s":[216,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":30,"s":[6,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":38,"s":[6,100,100]},{"t":43,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[215.18,238.344],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.976470588235,0.905882352941,0.050980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-135.41,5.172],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":240,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":5,"nm":"hello!","tt":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[278.604,561.008,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"t":{"d":{"k":[{"s":{"s":164,"f":"Avenir-Heavy","t":"hello!","j":0,"tr":25,"lh":196.8,"ls":0,"fc":[0,0,0]},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0],"ix":2}},"a":[{"nm":"Animator 1","s":{"t":0,"xe":{"a":0,"k":0,"ix":7},"ne":{"a":0,"k":0,"ix":8},"a":{"a":0,"k":100,"ix":4},"b":1,"rn":0,"sh":1,"r":1},"a":{"fc":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":20,"s":[0,0,0,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":23,"s":[0.941176474094,0.337254911661,0.180392161012,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":38,"s":[0.941176474094,0.337254911661,0.180392161012,1]},{"t":40,"s":[0,0,0,1]}],"ix":12}}}]},"ip":0,"op":240,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":3,"nm":"NULL CONTROL ","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[472.18,505.172,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":6,"s":[721.18,505.172,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":21,"s":[721.18,505.172,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":30,"s":[270.18,505.172,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":38,"s":[270.18,505.172,0],"to":[0,0,0],"ti":[0,0,0]},{"t":43,"s":[472.18,505.172,0]}],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":240,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Shape Layer 10","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[-27.82,5.172,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":0,"s":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":6,"s":[216,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":21,"s":[216,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":30,"s":[6,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"t":38,"s":[6,100,100]},{"t":43,"s":[100,100,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[215.18,238.344],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":0,"k":[0.976470588235,0.905882352941,0.050980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":4,"s":[0,0,0,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[0.533333361149,0.870588243008,0.949019610882,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":19,"s":[0.533333361149,0.870588243008,0.949019610882,1]},{"t":21,"s":[0,0,0,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-135.41,5.172],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":240,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Shape Layer 9","parent":5,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[53.175,44.828,0],"ix":2},"a":{"a":0,"k":[125.375,0,0],"ix":1},"s":{"a":0,"k":[122,122,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[139.571,-103.164],[111.321,-103.164],[122.194,-98.098],[122.911,107.373],[112.344,113.066],[138.156,112.987],[127.456,107.787],[127.694,-98.098]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.976470588235,0.905882352941,0.050980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":240,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[500,500,0],"ix":2},"a":{"a":0,"k":[20.422,12.422,0],"ix":1},"s":{"a":0,"k":[91,91,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"a":0,"k":[792.844,792.844],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":20,"ix":4},"nm":"Rectangle Path 1","mn":"ADBE Vector Shape - Rect","hd":false},{"ty":"st","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[0,0,0,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":6,"s":[0.976470589638,0.905882358551,0.050980392843,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":19,"s":[0.941176474094,0.337254911661,0.180392161012,1]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":35,"s":[0.976470589638,0.905882358551,0.050980392843,1]},{"t":39,"s":[0,0,0,1]}],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":2,"s":[3]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":19,"s":[60]},{"t":39,"s":[3]}],"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[20.422,12.422],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":240,"st":0,"bm":0}],"markers":[],"chars":[{"ch":"h","size":164,"style":"Heavy","w":57.4,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[-0.4,1.467],[-0.9,1.134],[-1.367,0.667],[-2,0],[-1.2,-0.966],[-0.567,-1.433],[-0.134,-1.633],[0,-1.333],[0,0],[0,0],[0,0],[0.6,2.267],[1.4,1.734],[2.233,1.067],[3.2,0],[2.366,-1.633],[0.933,-2],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,-1.6],[0.4,-1.466],[0.9,-1.133],[1.366,-0.666],[2.066,0],[1.2,0.967],[0.566,1.434],[0.133,1.634],[0,0],[0,0],[0,0],[0,-2.466],[-0.6,-2.266],[-1.4,-1.733],[-2.234,-1.066],[-3.734,0],[-2.367,1.634],[0,0],[0,0]],"v":[[18.8,-75.6],[6.8,-75.6],[6.8,0],[18.8,0],[18.8,-26.2],[19.4,-30.8],[21.35,-34.7],[24.75,-37.4],[29.8,-38.4],[34.7,-36.95],[37.35,-33.35],[38.4,-28.75],[38.6,-24.3],[38.6,0],[50.6,0],[50.6,-30.3],[49.7,-37.4],[46.7,-43.4],[41.25,-47.6],[33.1,-49.2],[23.95,-46.75],[19,-41.3],[18.8,-41.3]],"c":true},"ix":2},"nm":"h","mn":"ADBE Vector Shape - Group","hd":false}],"nm":"h","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}]},"fFamily":"Avenir"},{"ch":"e","size":164,"style":"Heavy","w":57.4,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[1.1,3.234],[1.966,2.2],[2.766,1.167],[3.333,0],[3.2,-1.2],[2.333,-2.2],[1.366,-3.1],[0,-3.8],[-1.367,-3.1],[-2.334,-2.2],[-3.2,-1.2],[-3.6,0],[-3.467,1.466],[-2.8,3.467],[0,0],[2.033,-1.233],[3,0],[2.4,2],[0.4,3.6]],"o":[[0,0],[0,-4.2],[-1.1,-3.233],[-1.967,-2.2],[-2.767,-1.166],[-3.6,0],[-3.2,1.2],[-2.334,2.2],[-1.367,3.1],[0,3.8],[1.366,3.1],[2.333,2.2],[3.2,1.2],[3.8,0],[3.466,-1.466],[0,0],[-1.534,1.867],[-2.034,1.234],[-3.4,0],[-2.4,-2],[0,0]],"v":[[53,-19.8],[53,-23.1],[51.35,-34.25],[46.75,-42.4],[39.65,-47.45],[30.5,-49.2],[20.3,-47.4],[12,-42.3],[6.45,-34.35],[4.4,-24],[6.45,-13.65],[12,-5.7],[20.3,-0.6],[30.5,1.2],[41.4,-1],[50.8,-8.4],[42.2,-14.9],[36.85,-10.25],[29.3,-8.4],[20.6,-11.4],[16.4,-19.8]],"c":true},"ix":2},"nm":"e","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[-2.1,2.067],[-3.6,0],[-2.134,-2.033],[-0.067,-3.533]],"o":[[0.466,-3.466],[2.1,-2.066],[3.8,0],[2.133,2.034],[0,0]],"v":[[16.4,-28.8],[20.25,-37.1],[28.8,-40.2],[37.7,-37.15],[41,-28.8]],"c":true},"ix":2},"nm":"e","mn":"ADBE Vector Shape - Group","hd":false}],"nm":"e","np":5,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}]},"fFamily":"Avenir"},{"ch":"l","size":164,"style":"Heavy","w":26.1,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[7,0],[19,0],[19,-75.6],[7,-75.6]],"c":true},"ix":2},"nm":"l","mn":"ADBE Vector Shape - Group","hd":false}],"nm":"l","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}]},"fFamily":"Avenir"},{"ch":"o","size":164,"style":"Heavy","w":61,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-1.367,-3.1],[-2.334,-2.2],[-3.2,-1.2],[-3.6,0],[-3.2,1.2],[-2.334,2.2],[-1.367,3.1],[0,3.8],[1.366,3.1],[2.333,2.2],[3.2,1.2],[3.6,0],[3.2,-1.2],[2.333,-2.2],[1.366,-3.1],[0,-3.8]],"o":[[1.366,3.1],[2.333,2.2],[3.2,1.2],[3.6,0],[3.2,-1.2],[2.333,-2.2],[1.366,-3.1],[0,-3.8],[-1.367,-3.1],[-2.334,-2.2],[-3.2,-1.2],[-3.6,0],[-3.2,1.2],[-2.334,2.2],[-1.367,3.1],[0,3.8]],"v":[[6.45,-13.65],[12,-5.7],[20.3,-0.6],[30.5,1.2],[40.7,-0.6],[49,-5.7],[54.55,-13.65],[56.6,-24],[54.55,-34.35],[49,-42.3],[40.7,-47.4],[30.5,-49.2],[20.3,-47.4],[12,-42.3],[6.45,-34.35],[4.4,-24]],"c":true},"ix":2},"nm":"o","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-0.634,1.734],[-1.234,1.334],[-1.734,0.8],[-2.2,0],[-1.734,-0.8],[-1.234,-1.333],[-0.634,-1.733],[0,-1.866],[0.633,-1.733],[1.233,-1.333],[1.733,-0.8],[2.2,0],[1.733,0.8],[1.233,1.334],[0.633,1.734],[0,1.867]],"o":[[0.633,-1.733],[1.233,-1.333],[1.733,-0.8],[2.2,0],[1.733,0.8],[1.233,1.334],[0.633,1.734],[0,1.867],[-0.634,1.734],[-1.234,1.334],[-1.734,0.8],[-2.2,0],[-1.734,-0.8],[-1.234,-1.333],[-0.634,-1.733],[0,-1.866]],"v":[[17.35,-29.4],[20.15,-34],[24.6,-37.2],[30.5,-38.4],[36.4,-37.2],[40.85,-34],[43.65,-29.4],[44.6,-24],[43.65,-18.6],[40.85,-14],[36.4,-10.8],[30.5,-9.6],[24.6,-10.8],[20.15,-14],[17.35,-18.6],[16.4,-24]],"c":true},"ix":2},"nm":"o","mn":"ADBE Vector Shape - Group","hd":false}],"nm":"o","np":5,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}]},"fFamily":"Avenir"},{"ch":"!","size":164,"style":"Heavy","w":29.6,"data":{"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[20.8,-70.8],[8.8,-70.8],[8.8,-22.2],[20.8,-22.2]],"c":true},"ix":2},"nm":"!","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-0.434,-0.933],[-0.734,-0.666],[-0.967,-0.4],[-1.067,0],[-1.567,1.534],[0,2.134],[1.6,1.467],[2.133,0],[1.566,-1.533],[0,-2.133]],"o":[[0.433,0.934],[0.733,0.667],[0.966,0.4],[2.2,0],[1.566,-1.533],[0,-2.133],[-1.6,-1.466],[-2.2,0],[-1.567,1.534],[0,1.067]],"v":[[7.45,-4],[9.2,-1.6],[11.75,0],[14.8,0.6],[20.45,-1.7],[22.8,-7.2],[20.4,-12.6],[14.8,-14.8],[9.15,-12.5],[6.8,-7]],"c":true},"ix":2},"nm":"!","mn":"ADBE Vector Shape - Group","hd":false}],"nm":"!","np":5,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}]},"fFamily":"Avenir"}]}

package/src/renderer/__tests__/setup.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable camelcase */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import fs from "fs";
 import path from "path";
@@ -43,6 +44,12 @@ export let fonts: {
   DinMedium: SkFont;
 };
 
+export let dataAssets: {
+  NotoSansSCRegular: Uint8Array;
+  img_0: Uint8Array;
+  AvenirHeavy: Uint8Array;
+};
+
 beforeAll(async () => {
   await LoadSkiaWeb();
   const Skia = JsiSkApi(global.CanvasKit);
@@ -70,6 +77,13 @@ beforeAll(async () => {
   const skiaLogoPng = loadImage("skia/__tests__/assets/skia_logo.png");
   const skiaLogoJpeg = loadImage("skia/__tests__/assets/skia_logo_jpeg.jpg");
   const mask = loadImage("skia/__tests__/assets/mask.png");
+  dataAssets = {
+    AvenirHeavy: resolveFile("skia/__tests__/assets/Avenir-Heavy.ttf"),
+    NotoSansSCRegular: resolveFile(
+      "skia/__tests__/assets/NotoSansSC-Regular.otf"
+    ),
+    img_0: resolveFile("skia/__tests__/assets/oslo.jpg"),
+  };
   images = { oslo, skiaLogoPng, skiaLogoJpeg, mask };
   fonts = {
     RobotoMedium,
@@ -299,6 +313,23 @@ const serializeSkOjects = (obj: any): any => {
         tx: obj.tx,
         ty: obj.ty,
       };
+    } else if (obj.__typename__ === "SkottieAnimation") {
+      if (!obj.source) {
+        throw new Error("SkottieAnimation must have a source");
+      }
+      return {
+        __typename__: "SkottieAnimation",
+        source: obj.source,
+        assets: obj.assets,
+      };
+    } else if (obj.__typename__ === "ImageFilter") {
+      if (!obj.source) {
+        throw new Error("ImageFilter must have a source");
+      }
+      return {
+        __typename__: "Function",
+        source: obj.source,
+      };
     }
   } else if (obj && typeof obj === "object") {
     const result = Object.keys(obj).reduce((acc, key) => {

package/src/renderer/components/ImageFilter.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+import type { ImageFilterProps } from "../../dom/types";
+import type { SkiaProps } from "../processors";
+
+export const ImageFilter = (props: SkiaProps<ImageFilterProps>) => {
+  return <skImageFilter {...props} />;
+};

package/src/renderer/components/Skottie.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+import type { SkottieProps } from "../../dom/types";
+import type { SkiaProps } from "../processors";
+
+export const Skottie = (props: SkiaProps<SkottieProps>) => {
+  return <skSkottie {...props} />;
+};

package/src/renderer/components/index.ts

@@ -14,5 +14,7 @@ export * from "./Group";
 export * from "./Mask";
 export * from "./Paint";
 export * from "./Blend";
+export * from "./Skottie";
+export * from "./ImageFilter";
 
 export * from "./paragraph";

package/src/skia/types/ImageFilter/ImageFilterFactory.ts

@@ -1,6 +1,9 @@
 import type { SkColor } from "../Color";
 import type { SkColorFilter } from "../ColorFilter/ColorFilter";
+import type { FilterMode, MipmapMode, SkImage } from "../Image/Image";
+import type { SkMatrix } from "../Matrix";
 import type { BlendMode } from "../Paint";
+import type { SkPicture } from "../Picture";
 import type { SkRect } from "../Rect";
 import type { SkRuntimeShaderBuilder } from "../RuntimeEffect";
 import type { SkShader } from "../Shader";
@@ -21,11 +24,13 @@ export interface ImageFilterFactory {
    * @param dx - Offset along the X axis
    * @param dy - Offset along the X axis
    * @param input - if null, it will use the dynamic source image
+   * @param cropRect - Optional rectangle that crops the input and output
    */
   MakeOffset(
     dx: number,
     dy: number,
-    input: SkImageFilter | null
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ): SkImageFilter;
   /**
    * Spatially displace pixel values of the filtered image
@@ -35,45 +40,57 @@ export interface ImageFilterFactory {
    * @param scale - Scale factor to be used in the displacement
    * @param in1 - Source image filter to use for the displacement
    * @param input - if null, it will use the dynamic source image
+   * @param cropRect - Optional rectangle that crops the input and output
    */
   MakeDisplacementMap(
     channelX: ColorChannel,
     channelY: ColorChannel,
     scale: number,
     in1: SkImageFilter,
-    input: SkImageFilter | null
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ): SkImageFilter;
   /**
    * Transforms a shader into an impage filter
    *
    * @param shader - The Shader to be transformed
-   * @param input - if null, it will use the dynamic source image
+   * @param dither - Whether to apply dithering to the shader
+   * @param cropRect - Optional rectangle that crops the input and output
    */
-  MakeShader(shader: SkShader, input: SkImageFilter | null): SkImageFilter;
+  MakeShader(
+    shader: SkShader,
+    dither?: boolean,
+    cropRect?: SkRect | null
+  ): SkImageFilter;
   /**
    * Create a filter that blurs its input by the separate X and Y sigmas. The provided tile mode
    * is used when the blur kernel goes outside the input image.
    *
    * @param sigmaX - The Gaussian sigma value for blurring along the X axis.
    * @param sigmaY - The Gaussian sigma value for blurring along the Y axis.
-   * @param mode
+   * @param mode - The tile mode to use when blur kernel goes outside the image
    * @param input - if null, it will use the dynamic source image (e.g. a saved layer)
+   * @param cropRect - Optional rectangle that crops the input and output
    */
   MakeBlur(
     sigmaX: number,
     sigmaY: number,
     mode: TileMode,
-    input: SkImageFilter | null
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ): SkImageFilter;
 
   /**
    * Create a filter that applies the color filter to the input filter results.
-   * @param cf
+   *
+   * @param colorFilter - The color filter to apply
    * @param input - if null, it will use the dynamic source image (e.g. a saved layer)
+   * @param cropRect - Optional rectangle that crops the input and output
    */
   MakeColorFilter(
-    cf: SkColorFilter,
-    input: SkImageFilter | null
+    colorFilter: SkColorFilter,
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ): SkImageFilter;
 
   /**
@@ -105,8 +122,8 @@ export interface ImageFilterFactory {
     sigmaX: number,
     sigmaY: number,
     color: SkColor,
-    input: SkImageFilter | null,
-    cropRect?: SkRect
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ) => SkImageFilter;
   /**
    * Create a filter that renders a drop shadow, in exactly the same manner as ::DropShadow, except
@@ -126,8 +143,8 @@ export interface ImageFilterFactory {
     sigmaX: number,
     sigmaY: number,
     color: SkColor,
-    input: SkImageFilter | null,
-    cropRect?: SkRect
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ) => SkImageFilter;
   /**
    *  Create a filter that erodes each input pixel's channel values to the minimum channel value
@@ -140,8 +157,8 @@ export interface ImageFilterFactory {
   MakeErode: (
     rx: number,
     ry: number,
-    input: SkImageFilter | null,
-    cropRect?: SkRect
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ) => SkImageFilter;
   /**
    *  Create a filter that dilates each input pixel's channel values to the max value within the
@@ -154,21 +171,21 @@ export interface ImageFilterFactory {
   MakeDilate: (
     rx: number,
     ry: number,
-    input: SkImageFilter | null,
-    cropRect?: SkRect
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ) => SkImageFilter;
   /**
    *  This filter takes an SkBlendMode and uses it to composite the two filters together.
    *  @param mode       The blend mode that defines the compositing operation
    *  @param background The Dst pixels used in blending, if null the source bitmap is used.
    *  @param foreground The Src pixels used in blending, if null the source bitmap is used.
-   *  @cropRect         Optional rectangle to crop input and output.
+   *  @param cropRect   Optional rectangle to crop input and output.
    */
   MakeBlend: (
     mode: BlendMode,
     background: SkImageFilter,
-    foreground: SkImageFilter | null,
-    cropRect?: SkRect
+    foreground?: SkImageFilter | null,
+    cropRect?: SkRect | null
   ) => SkImageFilter;
   /**
    *  Create a filter that fills the output with the per-pixel evaluation of the SkShader produced
@@ -187,6 +204,359 @@ export interface ImageFilterFactory {
   MakeRuntimeShader: (
     builder: SkRuntimeShaderBuilder,
     childShaderName: string | null,
-    input: SkImageFilter | null
+    input?: SkImageFilter | null
+  ) => SkImageFilter;
+
+  /**
+   *  Create a filter that implements a custom blend mode. Each output pixel is the result of
+   *  combining the corresponding background and foreground pixels using the 4 coefficients:
+   *     k1 * foreground * background + k2 * foreground + k3 * background + k4
+   *
+   *  @param k1, k2, k3, k4 The four coefficients used to combine the foreground and background.
+   *  @param enforcePMColor If true, the RGB channels will be clamped to the calculated alpha.
+   *  @param background     The background content, using the source bitmap when this is null.
+   *  @param foreground     The foreground content, using the source bitmap when this is null.
+   *  @param cropRect       Optional rectangle that crops the inputs and output.
+   */
+  MakeArithmetic(
+    k1: number,
+    k2: number,
+    k3: number,
+    k4: number,
+    enforcePMColor: boolean,
+    background?: SkImageFilter | null,
+    foreground?: SkImageFilter | null,
+    cropRect?: SkRect | null
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that applies a crop to the result of the 'input' filter. Pixels within the
+   *  crop rectangle are unmodified from what 'input' produced. Pixels outside of crop match the
+   *  provided SkTileMode (defaulting to kDecal).
+   *
+   *  NOTE: The optional CropRect argument for many of the factories is equivalent to creating the
+   *  filter without a CropRect and then wrapping it in ::Crop(rect, kDecal). Explicitly adding
+   *  Crop filters lets you control their tiling and use different geometry for the input and the
+   *  output of another filter.
+   *
+   *  @param rect     The cropping rect
+   *  @param tileMode The TileMode applied to pixels *outside* of 'crop' @default TileMode.Decal
+   *  @param input    The input filter that is cropped, uses source image if this is null
+   */
+  MakeCrop(
+    rect: SkRect,
+    tileMode?: TileMode | null,
+    input?: SkImageFilter | null
+  ): SkImageFilter;
+
+  /**
+   * Create a filter that always produces transparent black.
+   */
+  MakeEmpty(): SkImageFilter;
+
+  /**
+   *  Create a filter that draws the 'srcRect' portion of image into 'dstRect' using the given
+   *  filter quality. Similar to SkCanvas::drawImageRect. The returned image filter evaluates
+   *  to transparent black if 'image' is null.
+   *
+   *  @param image      The image that is output by the filter, subset by 'srcRect'.
+   *  @param srcRect    The source pixels sampled into 'dstRect', if null the image bounds are used.
+   *  @param dstRect    The local rectangle to draw the image into, if null the srcRect is used.
+   *  @param filterMode The filter mode to use when sampling the image @default FilterMode.Nearest
+   *  @param mipmap     The mipmap mode to use when sampling the image @default MipmapMode.None
+   */
+  MakeImage(
+    image: SkImage,
+    srcRect?: SkRect | null,
+    dstRect?: SkRect | null,
+    filterMode?: FilterMode,
+    mipmap?: MipmapMode
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that fills 'lensBounds' with a magnification of the input.
+   *
+   *  @param lensBounds The outer bounds of the magnifier effect
+   *  @param zoomAmount The amount of magnification applied to the input image
+   *  @param inset      The size or width of the fish-eye distortion around the magnified content
+   *  @param filterMode The filter mode to use when sampling the image @default FilterMode.Nearest
+   *  @param mipmap     The mipmap mode to use when sampling the image @default MipmapMode.None
+   *  @param input      The input filter that is magnified; if null the source bitmap is used
+   *  @param cropRect   Optional rectangle that crops the input and output.
+   */
+  MakeMagnifier(
+    lensBounds: SkRect,
+    zoomAmount: number,
+    inset: number,
+    filterMode?: FilterMode,
+    mipmap?: MipmapMode,
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that applies an NxM image processing kernel to the input image. This can be
+   *  used to produce effects such as sharpening, blurring, edge detection, etc.
+   *  @param kernelSizeX   The width of the kernel. Must be greater than zero.
+   *  @param kernelSizeY   The height of the kernel. Must be greater than zero.
+   *  @param kernel        The image processing kernel. Must contain kernelSizeX * kernelSizeY elements, in row order.
+   *  @param gain          A scale factor applied to each pixel after convolution. This can be
+   *                       used to normalize the kernel, if it does not already sum to 1.
+   *  @param bias          A bias factor added to each pixel after convolution.
+   *  @param kernelOffsetX An offset applied to each pixel coordinate before convolution.
+   *                       This can be used to center the kernel over the image
+   *                       (e.g., a 3x3 kernel should have an offset of {1, 1}).
+   *  @param kernelOffsetY An offset applied to each pixel coordinate before convolution.
+   *                       This can be used to center the kernel over the image
+   *                       (e.g., a 3x3 kernel should have an offset of {1, 1}).
+   *  @param tileMode      How accesses outside the image are treated. TileMode.Mirror is not supported.
+   *  @param convolveAlpha If true, all channels are convolved. If false, only the RGB channels
+   *                       are convolved, and alpha is copied from the source image.
+   *  @param input         The input image filter, if null the source bitmap is used instead.
+   *  @param cropRect      Optional rectangle to which the output processing will be limited.
+   */
+  MakeMatrixConvolution(
+    kernelSizeX: number,
+    kernelSizeY: number,
+    kernel: number[],
+    gain: number,
+    bias: number,
+    kernelOffsetX: number,
+    kernelOffsetY: number,
+    tileMode: TileMode,
+    convolveAlpha: boolean,
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that transforms the input image by 'matrix'. This matrix transforms the
+   *  local space, which means it effectively happens prior to any transformation coming from the
+   *  SkCanvas initiating the filtering.
+   *  @param matrix     The matrix to apply to the original content.
+   *  @param filterMode The filter mode to use when sampling the image @default FilterMode.Nearest
+   *  @param mipmap     The mipmap mode to use when sampling the image @default MipmapMode.None
+   *  @param input      The image filter to transform, or null to use the source image.
+   */
+  MakeMatrixTransform(
+    matrix: SkMatrix,
+    filterMode?: FilterMode,
+    mipmap?: MipmapMode,
+    input?: SkImageFilter | null
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that merges filters together by drawing their results in order
+   *  with src-over blending.
+   *  @param filters  The input filter array to merge. Any null
+   *                  filter pointers will use the source bitmap instead.
+   *  @param cropRect Optional rectangle that crops all input filters and the output.
+   */
+  MakeMerge(
+    filters: Array<SkImageFilter | null>,
+    cropRect?: SkRect | null
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that produces the SkPicture as its output, clipped to both 'targetRect' and
+   *  the picture's internal cull rect.
+   *
+   *  If 'pic' is null, the returned image filter produces transparent black.
+   *
+   *  @param picture    The picture that is drawn for the filter output.
+   *  @param targetRect The drawing region for the picture. If null, the picture's bounds are used.
+   */
+  MakePicture(picture: SkPicture, targetRect?: SkRect | null): SkImageFilter;
+
+  /**
+   *  Create a filter that fills the output with the per-pixel evaluation of the SkShader produced
+   *  by the SkRuntimeEffectBuilder. The shader is defined in the image filter's local coordinate
+   *  system, so it will automatically be affected by SkCanvas' transform.
+   *
+   *  This requires a GPU backend or SkSL to be compiled in.
+   *
+   *  @param builder          The builder used to produce the runtime shader, that will in turn
+   *                          fill the result image
+   *  @param sampleRadius     defines the sampling radius of 'childShaderName' relative to
+   *                          the runtime shader produced by 'builder'.
+   *                          If greater than 0, the coordinate passed to childShader.eval() will
+   *                          be up to 'sampleRadius' away (maximum absolute offset in 'x' or 'y')
+   *                          from the coordinate passed into the runtime shader.
+   *  @param childShaderNames The names of the child shaders defined in the builder that will be
+   *                          bound to the input params (or the source image if the input param
+   *                          is null). If any name is null, or appears more than once, factory
+   *                          fails and returns nullptr.
+   *  @param inputs           The image filters that will be provided as input to the runtime
+   *                          shader. If any are null, the implicit source image is used instead.
+   */
+  MakeRuntimeShaderWithChildren: (
+    builder: SkRuntimeShaderBuilder,
+    sampleRadius: number,
+    childShaderNames: string[],
+    inputs: Array<SkImageFilter | null>
   ) => SkImageFilter;
+
+  /**
+   *  Create a tile image filter.
+   *  @param src   Defines the pixels to tile
+   *  @param dst   Defines the pixel region that the tiles will be drawn to
+   *  @param input The input that will be tiled, if null the source bitmap is used instead.
+   */
+  MakeTile(
+    src: SkRect,
+    dst: SkRect,
+    input?: SkImageFilter | null
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that calculates the diffuse illumination from a distant light source,
+   *  interpreting the alpha channel of the input as the height profile of the surface (to
+   *  approximate normal vectors).
+   *  @param direction    The direction to the distance light.
+   *  @param lightColor   The color of the diffuse light source.
+   *  @param surfaceScale Scale factor to transform from alpha values to physical height.
+   *  @param kd           Diffuse reflectance coefficient.
+   *  @param input        The input filter that defines surface normals (as alpha), or uses the
+   *                      source bitmap when null.
+   *  @param cropRect     Optional rectangle that crops the input and output.
+   */
+  MakeDistantLitDiffuse(
+    direction: SkPoint3,
+    lightColor: SkColor,
+    surfaceScale: number,
+    kd: number,
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that calculates the diffuse illumination from a point light source, using
+   *  alpha channel of the input as the height profile of the surface (to approximate normal
+   *  vectors).
+   *  @param location     The location of the point light.
+   *  @param lightColor   The color of the diffuse light source.
+   *  @param surfaceScale Scale factor to transform from alpha values to physical height.
+   *  @param kd           Diffuse reflectance coefficient.
+   *  @param input        The input filter that defines surface normals (as alpha), or uses the
+   *                      source bitmap when null.
+   *  @param cropRect     Optional rectangle that crops the input and output.
+   */
+  MakePointLitDiffuse(
+    location: SkPoint3,
+    lightColor: SkColor,
+    surfaceScale: number,
+    kd: number,
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that calculates the diffuse illumination from a spot light source, using
+   *  alpha channel of the input as the height profile of the surface (to approximate normal
+   *  vectors). The spot light is restricted to be within 'cutoffAngle' of the vector between
+   *  the location and target.
+   *  @param location        The location of the spot light.
+   *  @param target          The location that the spot light is point towards
+   *  @param falloffExponent Exponential falloff parameter for illumination outside of cutoffAngle
+   *  @param cutoffAngle     Maximum angle from lighting direction that receives full light
+   *  @param lightColor      The color of the diffuse light source.
+   *  @param surfaceScale    Scale factor to transform from alpha values to physical height.
+   *  @param kd              Diffuse reflectance coefficient.
+   *  @param input           The input filter that defines surface normals (as alpha), or uses the
+   *                         source bitmap when null.
+   *  @param cropRect        Optional rectangle that crops the input and output.
+   */
+  MakeSpotLitDiffuse(
+    location: SkPoint3,
+    target: SkPoint3,
+    falloffExponent: number,
+    cutoffAngle: number,
+    lightColor: SkColor,
+    surfaceScale: number,
+    kd: number,
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that calculates the specular illumination from a distant light source,
+   *  interpreting the alpha channel of the input as the height profile of the surface (to
+   *  approximate normal vectors).
+   *  @param direction    The direction to the distance light.
+   *  @param lightColor   The color of the specular light source.
+   *  @param surfaceScale Scale factor to transform from alpha values to physical height.
+   *  @param ks           Specular reflectance coefficient.
+   *  @param shininess    The specular exponent determining how shiny the surface is.
+   *  @param input        The input filter that defines surface normals (as alpha), or uses the
+   *                      source bitmap when null.
+   *  @param cropRect     Optional rectangle that crops the input and output.
+   */
+  MakeDistantLitSpecular(
+    direction: SkPoint3,
+    lightColor: SkColor,
+    surfaceScale: number,
+    ks: number,
+    shininess: number,
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that calculates the specular illumination from a point light source, using
+   *  alpha channel of the input as the height profile of the surface (to approximate normal
+   *  vectors).
+   *  @param location     The location of the point light.
+   *  @param lightColor   The color of the specular light source.
+   *  @param surfaceScale Scale factor to transform from alpha values to physical height.
+   *  @param ks           Specular reflectance coefficient.
+   *  @param shininess    The specular exponent determining how shiny the surface is.
+   *  @param input        The input filter that defines surface normals (as alpha), or uses the
+   *                      source bitmap when null.
+   *  @param cropRect     Optional rectangle that crops the input and output.
+   */
+  MakePointLitSpecular(
+    location: SkPoint3,
+    lightColor: SkColor,
+    surfaceScale: number,
+    ks: number,
+    shininess: number,
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
+  ): SkImageFilter;
+
+  /**
+   *  Create a filter that calculates the specular illumination from a spot light source, using
+   *  alpha channel of the input as the height profile of the surface (to approximate normal
+   *  vectors). The spot light is restricted to be within 'cutoffAngle' of the vector between
+   *  the location and target.
+   *  @param location        The location of the spot light.
+   *  @param target          The location that the spot light is point towards
+   *  @param falloffExponent Exponential falloff parameter for illumination outside of cutoffAngle
+   *  @param cutoffAngle     Maximum angle from lighting direction that receives full light
+   *  @param lightColor      The color of the specular light source.
+   *  @param surfaceScale    Scale factor to transform from alpha values to physical height.
+   *  @param ks              Specular reflectance coefficient.
+   *  @param shininess       The specular exponent determining how shiny the surface is.
+   *  @param input           The input filter that defines surface normals (as alpha), or uses the
+   *                         source bitmap when null.
+   *  @param cropRect        Optional rectangle that crops the input and output.
+   */
+  MakeSpotLitSpecular(
+    location: SkPoint3,
+    target: SkPoint3,
+    falloffExponent: number,
+    cutoffAngle: number,
+    lightColor: SkColor,
+    surfaceScale: number,
+    ks: number,
+    shininess: number,
+    input?: SkImageFilter | null,
+    cropRect?: SkRect | null
+  ): SkImageFilter;
 }
+
+export type SkPoint3 = {
+  x: number;
+  y: number;
+  z: number;
+};