@lordicon/web 1.0.0

package/examples/icons/lock.json

@@ -0,0 +1 @@
+{"v":"5.8.1","fr":60,"ip":200,"op":260,"w":430,"h":430,"nm":"wired-outline-94-lock-unlock","ddd":0,"assets":[{"id":"comp_0","nm":"in-reveal","fr":60,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Rectangle 28","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,53,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.167,"y":0.167},"t":37,"s":[{"i":[[0,0],[0,0],[0,0],[-48.877,0],[0,0],[0,49.429]],"o":[[0,0],[0,0],[0,48.877],[0,0],[49.429,0],[0,0]],"v":[[90,-95],[-90,-95],[-90,-95],[-1.5,-6.5],[0.5,-6.5],[90,-96]],"c":true}]},{"t":52,"s":[{"i":[[0,0],[0,0],[0,0],[-22.091,0],[0,0],[0,22.091]],"o":[[0,0],[0,0],[0,22.091],[0,0],[22.091,0],[0,0]],"v":[[130,-95],[-130,-95],[-130,55],[-90,95],[90,95],[130,55]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":37,"s":[38]},{"t":52,"s":[0]}],"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.25],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":37,"s":[0]},{"t":52,"s":[54]}],"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.071,0.075,0.192,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('primary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":2,"lj":2,"bm":0,"nm":".primary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"primary"},{"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":"Rectangle 28","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":37,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.395],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.267],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":33,"s":[28]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":63,"s":[-17]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.243],"y":[0]},"t":96,"s":[6]},{"t":120,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.395,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[215.283,164.656,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.267,"y":1},"o":{"x":0.333,"y":0},"t":27,"s":[215.283,97.656,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":57,"s":[215.283,144.656,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.243,"y":0},"t":90,"s":[215.283,113.656,0],"to":[0,0,0],"ti":[0,0,0]},{"t":114,"s":[215.283,124.656,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0.283,-107.344,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.305,"y":1},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[0,-6.456],[0,0],[6.456,0],[0,6.456],[0,0],[-6.456,0]],"o":[[0,0],[0,6.456],[-6.456,0],[0,0],[0,-6.456],[6.456,0]],"v":[[11.689,-0.218],[11.689,-0.282],[0,11.406],[-11.689,-0.282],[-11.689,-0.218],[0,-11.906]],"c":true}]},{"i":{"x":0.833,"y":0.662},"o":{"x":0.624,"y":0},"t":27,"s":[{"i":[[0,-45.5],[0,0],[45.5,0],[0,45.5],[0,0],[-45.5,0]],"o":[[0,0],[0,45.5],[-45.5,0],[0,0],[0,-45.5],[45.5,0]],"v":[[82.385,-0.021],[82.385,-0.479],[0,81.906],[-82.385,-0.479],[-82.385,-0.021],[0,-82.406]],"c":true}]},{"t":37,"s":[{"i":[[0,-49.706],[0,0],[49.706,0],[0,49.706],[0,0],[-49.706,0]],"o":[[0,0],[0,49.706],[-49.706,0],[0,0],[0,-49.706],[49.706,0]],"v":[[90,0],[90,63.5],[0,153.5],[-90,63.5],[-90,0],[0,-90]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"t":0,"s":[0],"h":1},{"t":37,"s":[21],"h":1}],"ix":1},"e":{"a":1,"k":[{"t":0,"s":[100],"h":1},{"t":37,"s":[79.5],"h":1}],"ix":2},"o":{"a":0,"k":106,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.031,0.659,0.541,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('secondary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":2,"lj":2,"bm":0,"nm":".secondary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"secondary"},{"ty":"tr","p":{"a":0,"k":[0.283,-107.094],"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":1,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Vector","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.535],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":42,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":66,"s":[-39]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":87,"s":[12]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.243],"y":[0]},"t":104,"s":[-6]},{"t":120,"s":[0]}],"ix":10},"p":{"a":0,"k":[0,53,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.11,"y":1},"o":{"x":0.167,"y":0.167},"t":42,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35,-35],[-33.881,-35.397],[36.119,-35.397],[35,-35]],"c":true}]},{"t":71,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35,-35],[-35,35],[35,35],[35,-35]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.031,0.659,0.541,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('secondary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":2,"lj":2,"bm":0,"nm":".secondary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"secondary"},{"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":"Vector","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":42,"op":1800,"st":0,"bm":0}]},{"id":"comp_1","nm":"hover-locked","fr":60,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Rectangle 28","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.299],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":15,"s":[16]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":32,"s":[-15]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":44,"s":[4]},{"t":57,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.207,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[215,285,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":9,"s":[245,285,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":26,"s":[195,285,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":38,"s":[225,285,0],"to":[0,0,0],"ti":[0,0,0]},{"t":51,"s":[215,285,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[-22.091,0],[0,0],[0,22.091]],"o":[[0,0],[0,0],[0,22.091],[0,0],[22.091,0],[0,0]],"v":[[130,-95],[-130,-95],[-130,55],[-90,95],[90,95],[130,55]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":54,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.071,0.075,0.192,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('primary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":2,"lj":2,"bm":0,"nm":".primary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"primary"},{"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":"Rectangle 28","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":1763,"st":-37,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0.283,-160.344,0],"ix":2,"l":2},"a":{"a":0,"k":[0.283,-107.344,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":6,"s":[{"i":[[0,49.706],[0,0],[-49.706,0],[0,-49.706],[0,0]],"o":[[0,0],[0,-49.706],[49.706,0],[0,0],[0,49.706]],"v":[[-90,63.5],[-90,0],[0,-90],[90,0],[90,63.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":14,"s":[{"i":[[0,49.706],[0,0],[-49.706,0],[0,-49.706],[0,0]],"o":[[0,0],[0,-49.706],[49.706,0],[0,0],[0,49.706]],"v":[[-90,63.5],[-89.152,24.724],[0.848,-65.276],[90.848,24.724],[90,63.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":26,"s":[{"i":[[0,49.706],[0,0],[-49.706,0],[0,-49.706],[0,0]],"o":[[0,0],[0,-49.706],[49.706,0],[0,0],[0,49.706]],"v":[[-90,63.5],[-89.152,24.724],[0.848,-65.276],[90.848,24.724],[90,63.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":37,"s":[{"i":[[0,49.706],[0,0],[-49.706,0],[0,-49.706],[0,0]],"o":[[0,0],[0,-49.706],[49.706,0],[0,0],[0,49.706]],"v":[[-90,63.5],[-89.792,-12.368],[0.208,-102.368],[90.208,-12.368],[90,63.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":49,"s":[{"i":[[0,49.706],[0,0],[-49.706,0],[0,-49.706],[0,0]],"o":[[0,0],[0,-49.706],[49.706,0],[0,0],[0,49.706]],"v":[[-90,63.5],[-90.439,8.05],[-0.439,-81.95],[89.561,8.05],[90,63.5]],"c":false}]},{"t":57,"s":[{"i":[[0,49.706],[0,0],[-49.706,0],[0,-49.706],[0,0]],"o":[[0,0],[0,-49.706],[49.706,0],[0,0],[0,49.706]],"v":[[-90,63.5],[-90,0],[0,-90],[90,0],[90,63.5]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.031,0.659,0.541,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('secondary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":2,"lj":2,"bm":0,"nm":".secondary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"secondary"},{"ty":"tr","p":{"a":0,"k":[0.283,-107.094],"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":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":1799,"st":-1,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Vector","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.299],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":19,"s":[28]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":36,"s":[-21]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":48,"s":[7]},{"t":60,"s":[0]}],"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"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]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35,-35],[-35,35],[35,35],[35,-35]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.031,0.659,0.541,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('secondary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":2,"lj":2,"bm":0,"nm":".secondary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"secondary"},{"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":"Vector","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":1758,"st":-42,"bm":0}]},{"id":"comp_2","nm":"morph-unlocked","fr":60,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Rectangle 28","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.45],"y":[1]},"o":{"x":[0.497],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.45],"y":[1]},"o":{"x":[0.55],"y":[0]},"t":9,"s":[-3]},{"i":{"x":[0.466],"y":[1]},"o":{"x":[0.348],"y":[0]},"t":37,"s":[6]},{"t":60,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.45,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[215,285,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.45,"y":1},"o":{"x":0.55,"y":0},"t":15,"s":[197,288,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.466,"y":1},"o":{"x":0.348,"y":0},"t":45,"s":[266,279,0],"to":[0,0,0],"ti":[0,0,0]},{"t":60,"s":[255,280,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.45,"y":1},"o":{"x":0.55,"y":0},"t":15,"s":[{"i":[[0,0],[0,0],[0,0],[-22.091,0],[0,0],[0,22.091]],"o":[[0,0],[0,0],[0,22.091],[0,0],[22.091,0],[0,0]],"v":[[130,-95],[-130,-95],[-130,55],[-90,95],[90,95],[130,55]],"c":true}]},{"t":45,"s":[{"i":[[0,0],[0,0],[0,0],[-19.118,0],[0,0],[0,19.118]],"o":[[0,0],[0,0],[0,19.118],[0,0],[19.118,0],[0,0]],"v":[[130,-95],[-95,-95],[-95,34.808],[-60.385,69.423],[95.385,69.423],[130,34.808]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.071,0.075,0.192,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('primary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":2,"lj":2,"bm":0,"nm":".primary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"primary"},{"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":"Rectangle 28","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 1","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.45,"y":0.45},"o":{"x":0.333,"y":0.333},"t":0,"s":[-89.717,-96.594,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.45,"y":1},"o":{"x":0.55,"y":0},"t":15,"s":[-89.717,-96.594,0],"to":[0,0,0],"ti":[0,0,0]},{"t":45,"s":[-69.717,-96.594,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-89.717,-43.594,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.385,"y":1},"o":{"x":0.362,"y":0},"t":0,"s":[{"i":[[0,0],[0,0],[-49.706,0],[0,-49.706],[0,0]],"o":[[0,0],[0,-49.706],[49.706,0],[0,0],[0,0]],"v":[[-90,63.5],[-90,0],[0,-90],[90,0],[90,63.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"t":15,"s":[{"i":[[0,0],[0,0],[-49.706,0],[0,-49.706],[0,0]],"o":[[0,0],[0,-49.706],[49.706,0],[0,0],[0,0]],"v":[[-90,63.5],[-90.313,39.664],[-0.313,-50.336],[89.687,39.664],[90,63.5]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":25,"s":[{"i":[[0,0],[0,0],[-36.862,0],[0,-46.902],[0,0]],"o":[[0,0],[0,-46.902],[36.862,0],[0,0],[0,0]],"v":[[-90,63.5],[-90.745,-19.426],[-24,-104.349],[42.745,-19.426],[43.32,14.378]],"c":false}]},{"i":{"x":0.45,"y":1},"o":{"x":0.167,"y":0.167},"t":28,"s":[{"i":[[0,0],[0,0],[-30.438,0],[0,-46.058],[0,0]],"o":[[0,0],[0,-46.058],[30.438,0],[0,0],[0,0]],"v":[[-89.638,63.5],[-90.576,-13.104],[-35.462,-96.499],[19.651,-13.104],[20.374,25.574]],"c":false}]},{"t":45,"s":[{"i":[[0,0],[0,0],[42.88,0],[0,-43.199],[0,0]],"o":[[0,0],[0,-43.199],[-42.88,0],[0,0],[0,0]],"v":[[-90,63.5],[-90,8.312],[-167.642,-69.906],[-245.283,8.312],[-245.283,63.5]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.031,0.659,0.541,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('secondary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":2,"lj":2,"bm":0,"nm":".secondary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"secondary"},{"ty":"tr","p":{"a":0,"k":[0.283,-107.094],"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":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Vector","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.45,"y":1},"o":{"x":0.55,"y":0},"t":15,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"t":45,"s":[16.5,-12.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.45,"y":1},"o":{"x":0.55,"y":0},"t":15,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35,-35],[-35,35],[35,35],[35,-35]],"c":true}]},{"t":45,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-30,-30],[-30,30],[30,30],[30,-30]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.031,0.659,0.541,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('secondary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":2,"lj":2,"bm":0,"nm":".secondary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"secondary"},{"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":"Vector","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":1800,"st":0,"bm":0}]},{"id":"comp_3","nm":"hover-unlocked","fr":60,"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Rectangle 31","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.299],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":15,"s":[6]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":32,"s":[-6]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":44,"s":[4]},{"t":57,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.141,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[272.5,267.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":9,"s":[292.5,267.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":26,"s":[262.5,267.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":38,"s":[282.5,267.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":51,"s":[272.5,267.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[-22.091,0],[0,0],[0,22.091]],"o":[[0,0],[0,0],[0,22.091],[0,0],[22.091,0],[0,0]],"v":[[112.5,-82.5],[-112.5,-82.5],[-112.5,42.5],[-72.5,82.5],[72.5,82.5],[112.5,42.5]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.071,0.075,0.192,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('primary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":1,"lj":2,"bm":0,"nm":".primary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"primary"},{"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":"Rectangle 28","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Rectangle 30","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-165,-150,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[{"i":[[0,0],[0,0],[-42.802,0],[0,-42.802],[0,0]],"o":[[0,0],[0,-42.802],[42.802,0],[0,0],[0,0]],"v":[[-77.5,67.5],[-77.5,10],[0,-67.5],[77.5,10],[77.5,67.5]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.333,"y":0},"t":19,"s":[{"i":[[0,0],[0,0],[-36.878,0],[0,-42.802],[0,0]],"o":[[0,0],[0,-42.802],[36.878,0],[0,0],[0,0]],"v":[[-56.047,67.5],[-56.047,10],[10.726,-67.5],[77.5,10],[77.5,67.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"t":27,"s":[{"i":[[0,0],[0,0],[-42.802,0],[0,-42.802],[0,0]],"o":[[0,0],[0,-42.802],[42.802,0],[0,0],[0,0]],"v":[[-77.5,67.5],[-77.5,10],[0,-67.5],[77.5,10],[77.5,67.5]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":36,"s":[{"i":[[0,0],[0,0],[-40.746,0],[0,-42.802],[0,0]],"o":[[0,0],[0,-42.802],[40.746,0],[0,0],[0,0]],"v":[[-70.055,67.5],[-70.055,10],[3.722,-67.5],[77.5,10],[77.5,67.5]],"c":false}]},{"t":47,"s":[{"i":[[0,0],[0,0],[-42.802,0],[0,-42.802],[0,0]],"o":[[0,0],[0,-42.802],[42.802,0],[0,0],[0,0]],"v":[[-77.5,67.5],[-77.5,10],[0,-67.5],[77.5,10],[77.5,67.5]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.031,0.659,0.541,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('secondary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":2,"lj":2,"bm":0,"nm":".secondary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"secondary"},{"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":"Rectangle 29","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Vector 2","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.299],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":19,"s":[28]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":36,"s":[-21]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":48,"s":[7]},{"t":60,"s":[0]}],"ix":10},"p":{"a":0,"k":[-0.5,0.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"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]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-30,-30],[-30,30],[30,30],[30,-30]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.031,0.659,0.541,1],"ix":3,"x":"var $bm_rt;\n$bm_rt = comp('wired-outline-94-lock-unlock').layer('control').effect('secondary')('Color');"},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":12,"ix":5,"x":"var $bm_rt;\n$bm_rt = $bm_mul($bm_div(value, 2), comp('wired-outline-94-lock-unlock').layer('control').effect('stroke')('Menu'));"},"lc":2,"lj":2,"bm":0,"nm":".secondary","mn":"ADBE Vector Graphic - Stroke","hd":false,"cl":"secondary"},{"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":"Vector","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":1800,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"control","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"ef":[{"ty":5,"nm":"stroke","np":3,"mn":"Pseudo/@@STlrDzgvSvme7pJmNiJPPQ","ix":1,"en":1,"ef":[{"ty":7,"nm":"Menu","mn":"Pseudo/@@STlrDzgvSvme7pJmNiJPPQ-0001","ix":1,"v":{"a":0,"k":2,"ix":1}}]},{"ty":5,"nm":"primary","np":3,"mn":"ADBE Color Control","ix":2,"en":1,"ef":[{"ty":2,"nm":"Color","mn":"ADBE Color Control-0001","ix":1,"v":{"a":0,"k":[0.071,0.075,0.192],"ix":1}}]},{"ty":5,"nm":"secondary","np":3,"mn":"ADBE Color Control","ix":3,"en":1,"ef":[{"ty":2,"nm":"Color","mn":"ADBE Color Control-0001","ix":1,"v":{"a":0,"k":[0.031,0.659,0.541],"ix":1}}]}],"ip":0,"op":331,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"in-reveal","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[215,215,0],"ix":2,"l":2},"a":{"a":0,"k":[215,215,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":430,"h":430,"ip":0,"op":130,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"hover-locked","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[215,215,0],"ix":2,"l":2},"a":{"a":0,"k":[215,215,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":430,"h":430,"ip":130,"op":200,"st":130,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"morph-unlocked","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[215,215,0],"ix":2,"l":2},"a":{"a":0,"k":[215,215,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":430,"h":430,"ip":200,"op":270,"st":200,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"hover-unlocked","refId":"comp_3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[215,215,0],"ix":2,"l":2},"a":{"a":0,"k":[215,215,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"w":430,"h":430,"ip":270,"op":340,"st":270,"bm":0}],"markers":[{"tm":0,"cm":"in-reveal","dr":120},{"tm":130,"cm":"hover-locked","dr":60},{"tm":200,"cm":"default:morph-unlocked","dr":60},{"tm":270,"cm":"hover-unlocked","dr":60}]}

package/examples/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>Examples</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" type="text/css" href="/main.css" />
+</head>
+
+<body>
+    <table>
+        <thead>
+            <tr>
+                <th>Index</th>
+                <th>Example</th>
+                <th>Description</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>01</td>
+                <td><a href="/01-play.html">Play</a></td>
+                <td>
+                    Learn how to trigger an animation using the <code>play</code> method.
+                </td>
+            </tr>
+            <tr>
+                <td>02</td>
+                <td><a href="/02-customization.html">Customization</a></td>
+                <td>
+                    Explore various ways to adjust the icon’s look and feel.
+                </td>
+            </tr>
+            <tr>
+                <td>03</td>
+                <td><a href="/03-states.html">States</a></td>
+                <td>
+                    See how to switch between different icon states.
+                </td>
+            </tr>
+            <tr>
+                <td>04</td>
+                <td><a href="/04-events.html">Events</a></td>
+                <td>
+                    Discover how to react to player events in your application.
+                </td>
+            </tr>
+            <tr>
+                <td>05</td>
+                <td><a href="/05-playback-control.html">Playback Control</a></td>
+                <td>
+                    Find out how to manage playback through the player API.
+                </td>
+        </tbody>
+    </table>
+</body>
+
+</html>

package/examples/main.css

@@ -0,0 +1,45 @@
+:root {
+    --palette-font: #3c3c3c;
+    --palette-primary: #08c18a;
+    --palette-bg-1: hsl(50deg 34% 85%);
+    --palette-bg-2: hsl(100deg 34% 85%);
+    --palette-bg-3: hsl(150deg 34% 85%);
+}
+
+body {
+    color: var(--palette-font);
+    padding: 10px;
+    margin: 0;
+    line-height: 1.8;
+}
+
+a {
+    color: var(--palette-primary);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+table,
+td,
+th {
+    border: 1px solid #d2d2d8;
+    padding: 10px;
+}
+
+.icon {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+}
+
+.clickable {
+    cursor: pointer;
+}

package/examples/utils.ts

@@ -0,0 +1,9 @@
+export async function loadIcon(name: string) {
+    const response = await fetch(`/icons/${name}.json`);
+    return await response.json();
+}
+
+export function randomHexColor() {
+    const randomColor = Math.floor(Math.random() * 16777215).toString(16);
+    return `#${randomColor.padStart(6, '0')}`;
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "@lordicon/web",
+    "version": "1.0.0",
+    "description": "A lightweight and flexible player for seamlessly embedding, controlling, and customizing animated Lordicon icons in any web application.",
+    "repository": "https://github.com/lordicondev/player-web",
+    "homepage": "https://lordicon.com/",
+    "keywords": [
+        "lordicon",
+        "lottie",
+        "icon",
+        "animation"
+    ],
+    "author": "Lordicon <dev@lordicon.com>",
+    "license": "MIT",
+    "private": false,
+    "sideEffects": false,
+    "type": "module",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "start": "vite --config vite-examples.config.ts",
+        "build": "vite build",
+        "prepack": "npm run build"
+    },
+    "devDependencies": {
+        "@lordicon/internal": "^0.5.0",
+        "vite": "^6.2.3",
+        "vite-plugin-dts": "^4.5.4",
+        "concurrently": "^9.1.2",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint": "^8.54.0",
+        "prettier": "^3.2.5",
+        "typescript": "^5.3.2",
+        "@typescript-eslint/eslint-plugin": "^6.12.0",
+        "@typescript-eslint/parser": "^6.12.0",
+        "@types/node": "^22.13.13"
+    }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export type { ColorMap, EventHandler, EventName, IconProperties, IconState, LegacyIconProperties, PlaybackDirection, Stroke } from './interfaces';
+export { Player } from './player';

package/src/interfaces.ts

@@ -0,0 +1,181 @@
+/**
+ * Icon animation data in Lottie JSON format.
+ * This player is optimized for icons from [Lordicon](https://lordicon.com/).
+ */
+export type LottieData = any;
+
+/**
+ * Represents a single Lottie animation instance from `@lordicon/internal`.
+ * Contains the current state and methods for controlling playback.
+ */
+export type LottieAnimationInstance = {
+    name: string;
+    isLoaded: boolean;
+    currentFrame: number;
+    currentRawFrame: number;
+    firstFrame: number;
+    totalFrames: number;
+    frameRate: number;
+    frameMult: number;
+    playSpeed: number;
+    playDirection: number;
+    playCount: number;
+    isPaused: boolean;
+    autoplay: boolean;
+    loop: boolean | number;
+    renderer: any;
+    animationID: string;
+    assetsPath: string;
+    timeCompleted: number;
+    segmentPos: number;
+    isSubframeEnabled: boolean;
+    segments: FrameSegment | FrameSegment[];
+    play(name?: string): void;
+    stop(name?: string): void;
+    togglePause(name?: string): void;
+    destroy(name?: string): void;
+    pause(name?: string): void;
+    goToAndStop(value: number | string, isFrame?: boolean, name?: string): void;
+    goToAndPlay(value: number | string, isFrame?: boolean, name?: string): void;
+    includeLayers(data: any): void;
+    setSegment(init: number, end: number): void;
+    resetSegments(forceFlag: boolean): void;
+    hide(): void;
+    show(): void;
+    resize(): void;
+    setSpeed(speed: number): void;
+    setDirection(direction: PlaybackDirection): void;
+    setLoop(isLooping: boolean): void;
+    playSegments(segments: FrameSegment | FrameSegment[], forceFlag?: boolean): void;
+    setSubframe(useSubFrames: boolean): void;
+    getDuration(inFrames?: boolean): number;
+    triggerEvent(name: string, args: any): void;
+    addEventListener(name: string, callback: any): () => void;
+    removeEventListener(name: string, callback?: any): void;
+};
+
+/**
+ * Supported property types for Lottie animations.
+ */
+export type LottiePropertyType = 'color' | 'slider' | 'point' | 'checkbox' | 'feature';
+
+/**
+ * Describes a property found in the animation.
+ */
+export interface LottieProperty {
+    name: string;
+    path: string;
+    type: LottiePropertyType;
+    value: any;
+}
+
+/**
+ * Supported stroke weights for icons.
+ */
+export type Stroke = 1 | 2 | 3 | 'light' | 'regular' | 'bold';
+
+/**
+ * RGB color tuple in Lottie format: [r, g, b].
+ */
+export type RgbTuple = [number, number, number];
+
+/**
+ * RGB color as an object.
+ */
+export interface RgbColor {
+    r: number;
+    g: number;
+    b: number;
+}
+
+/**
+ * Object storing multiple named colors.
+ * 
+ * Example:
+ * {
+ *     primary: 'red',
+ *     secondary: '#ff0000',
+ * }
+ */
+export interface ColorMap {
+    [key: string]: string;
+}
+
+/**
+ * Animation segment as a tuple: [startFrame, endFrame].
+ */
+export type FrameSegment = [number, number];
+
+/**
+ * Animation playback direction: 1 (forward) or -1 (backward).
+ */
+export type PlaybackDirection = 1 | -1;
+
+/**
+ * Supported player event names.
+ */
+export type EventName = 'ready' | 'complete' | 'frame' | 'refresh';
+
+/**
+ * Player event callback type.
+ */
+export type EventHandler = () => void;
+
+/**
+ * Properties for legacy icons.
+ */
+export interface LegacyIconProperties {
+    /**
+     * Scale for legacy icons.
+     */
+    scale?: number;
+
+    /**
+     * Axis x for legacy icons.
+     */
+    axisX?: number;
+
+    /**
+     * Axis y for legacy icons.
+     */
+    axisY?: number;
+}
+
+/**
+ * Properties for customizing icons.
+ * 
+ * Example:
+ * {
+ *     stroke: 'bold',
+ *     colors: {
+ *         primary: 'red',
+ *     },
+ * }
+ */
+export interface IconProperties {
+    /**
+     * State (motion type) of the icon. States allow switching between multiple animations built into a single icon file.
+     */
+    state?: string;
+
+    /**
+     * Colors.
+     */
+    colors?: ColorMap;
+
+    /**
+     * Stroke.
+     */
+    stroke?: Stroke;
+}
+
+/**
+ * Details of a single animation state.
+ */
+export interface IconState {
+    name: string;
+    time: number;
+    duration: number;
+    params: string[];
+    default?: boolean;
+}

package/src/lottie.ts

@@ -0,0 +1,203 @@
+import { LottieAnimationInstance, LottieData, LottieProperty, LottiePropertyType, RgbColor, RgbTuple } from "./interfaces";
+import { parseColor } from "./parsers";
+import { set } from "./utils";
+
+/**
+ * Converts a color component to a two-digit hexadecimal string.
+ * @param c Color component (0-255).
+ * @returns Two-character hexadecimal string.
+ */
+function componentToHex(c: number) {
+    const hex = c.toString(16);
+    return hex.length == 1 ? '0' + hex : hex;
+}
+
+/**
+ * Converts a color component from 0-255 range to a normalized value (0-1).
+ * @param Color component (0-255).
+ * @returns Normalized value (0-1), rounded to three decimal places.
+ */
+function toUnitVector(n: number) {
+    return Math.round((n / 255) * 1000) / 1000;
+}
+
+/**
+ * Converts a normalized color value (0-1) to a color component (0-255).
+ * @param Normalized value (0-1).
+ * @returns Color component (0-255), rounded to the nearest integer.
+ */
+function fromUnitVector(n: number) {
+    return Math.round(n * 255);
+}
+
+/**
+ * Converts an RGB color object to a hexadecimal color string.
+ * @param value Color object with r, g, b properties.
+ * @returns Hexadecimal color string (e.g., "#ff0000").
+ */
+export function rgbToHex(value: RgbColor): string {
+    return (
+        '#' +
+        componentToHex(value.r) +
+        componentToHex(value.g) +
+        componentToHex(value.b)
+    );
+}
+
+/**
+ * Converts a hexadecimal color string to an RGB color object.
+ * @param hex Hexadecimal color string (with or without "#").
+ * @returns RgbColor object with r, g, b properties.
+ */
+export function hexToRgb(hex: string): RgbColor {
+    let data = parseInt(hex[0] != '#' ? hex : hex.substring(1), 16);
+    return {
+        r: (data >> 16) & 255,
+        g: (data >> 8) & 255,
+        b: data & 255,
+    };
+}
+
+/**
+ * Converts a hexadecimal color string to an RGB tuple in the 0-1 range.
+ * @param hex Hexadecimal color string.
+ * @returns RgbTuple with values normalized to 0-1.
+ */
+export function hexToTupleColor(hex: string): RgbTuple {
+    const {
+        r,
+        g,
+        b
+    } = hexToRgb(hex);
+    return [toUnitVector(r), toUnitVector(g), toUnitVector(b)];
+}
+
+/**
+ * Converts an RGB tuple (0-1 range) to a hexadecimal color string.
+ * @param value RgbTuple with values in the 0-1 range.
+ * @returns Hexadecimal color string.
+ */
+export function tupleColorToHex(value: RgbTuple): string {
+    const color: RgbColor = {
+        r: fromUnitVector(value[0]),
+        g: fromUnitVector(value[1]),
+        b: fromUnitVector(value[2]),
+    };
+    return rgbToHex(color);
+}
+
+/**
+ * Extracts all supported customizable properties from Lottie data.
+ * @param data Lottie animation data.
+ * @param options Extraction options (e.g., lottieInstance: boolean).
+ * @returns Array of LottieProperty objects describing customizable properties.
+ */
+export function extractLottieProperties(
+    data: LottieData,
+    { lottieInstance }: { lottieInstance?: boolean } = {},
+): LottieProperty[] {
+    const result: any[] = [];
+
+    if (!data || !data.layers) {
+        return result;
+    }
+
+    data.layers.forEach((layer: any, layerIndex: number) => {
+        if (!layer.nm || !layer.ef) {
+            return;
+        }
+
+        layer.ef.forEach((field: any, fieldIndex: number) => {
+            const value = field?.ef?.[0]?.v?.k;
+            if (value === undefined) {
+                return;
+            }
+
+            let path: string | undefined;
+
+            if (lottieInstance) {
+                path = `renderer.elements.${layerIndex}.effectsManager.effectElements.${fieldIndex}.effectElements.0.p.v`;
+            } else {
+                path = `layers.${layerIndex}.ef.${fieldIndex}.ef.0.v.k`;
+            }
+
+            let type: LottiePropertyType | undefined;
+
+            if (field.mn === 'ADBE Color Control') {
+                type = 'color';
+            } else if (field.mn === 'ADBE Slider Control') {
+                type = 'slider';
+            } else if (field.mn === 'ADBE Point Control') {
+                type = 'point';
+            } else if (field.mn === 'ADBE Checkbox Control') {
+                type = 'checkbox';
+            } else if (field.mn.startsWith('Pseudo/')) {
+                type = 'feature';
+            }
+
+            if (!type) {
+                return;
+            }
+
+            const name = field.nm.toLowerCase();
+
+            result.push({
+                name,
+                path,
+                value,
+                type,
+            });
+        });
+    });
+
+    return result;
+}
+
+/**
+ * Resets Lottie data or animation instance to default values for the given properties.
+ * @param data Lottie data or animation instance to reset.
+ * @param properties Array of properties to reset.
+ */
+export function resetLottieProperties(
+    data: LottieData | LottieAnimationInstance,
+    properties: LottieProperty[],
+) {
+    for (const property of properties) {
+        set(data, property.path, property.value);
+    }
+}
+
+/**
+ * Updates Lottie data or animation instance with a new value for the given properties.
+ * Handles color, point, and other property types accordingly.
+ * @param data Lottie data or animation instance to update.
+ * @param properties Array of properties to update.
+ * @param value New value to set for each property.
+ */
+export function updateLottieProperties(
+    data: LottieData | LottieAnimationInstance,
+    properties: LottieProperty[],
+    value: any,
+) {
+    for (const property of properties) {
+        if (property.type === 'color') {
+            if (typeof value === 'object' && 'r' in value && 'g' in value && 'b' in value) {
+                set(data, property.path, [toUnitVector(value.r), toUnitVector(value.g), toUnitVector(value.b)]);
+            } else if (Array.isArray(value)) {
+                set(data, property.path, value);
+            } else if (typeof value === 'string') {
+                set(data, property.path, hexToTupleColor(parseColor(value)));
+            }
+        } else if (property.type === 'point') {
+            if (typeof value === 'object' && 'x' in value && 'y' in value) {
+                set(data, property.path + '.0', value.x);
+                set(data, property.path + '.1', value.y);
+            } else if (Array.isArray(value)) {
+                set(data, property.path + '.0', value[0]);
+                set(data, property.path + '.1', value[1]);
+            }
+        } else {
+            set(data, property.path, value);
+        }
+    }
+}