Improved text shaping

demo/text-shaper/animation-5.json

@@ -0,0 +1 @@
+{"v":"5.12.0","fr":30,"ip":0,"op":150,"w":500,"h":500,"nm":"test","ddd":0,"assets":[],"fonts":{"list":[{"origin":0,"fPath":"","fClass":"","fFamily":"Arial","fWeight":"","fStyle":"Regular","fName":"ArialMT","ascent":75.6476929411292}]},"layers":[{"ddd":0,"ind":1,"ty":5,"nm":"Foo Bar Baz","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[249.704,276.891,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,"t":{"d":{"k":[{"s":{"sz":[315.011810302734,80.9692764282227],"ps":[-157.505905151367,-88.9479904174805],"s":31,"f":"ArialMT","t":"Foo Bar Baz","ca":0,"j":2,"tr":0,"lh":37.2000007629395,"ls":0,"fc":[0.911,0.545,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":3,"rn":0,"sh":1,"sm":{"a":0,"k":100,"ix":6},"e":{"a":0,"k":30,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[-30]},{"t":149,"s":[100]}],"ix":3},"r":1},"a":{"p":{"a":0,"k":[0,-22,0],"ix":2}}}]},"ip":0,"op":150,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":1,"nm":"White Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[600,600,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"sw":1200,"sh":1200,"sc":"#ffffff","ip":0,"op":150,"st":0,"bm":0}],"markers":[],"props":{}}

demo/text-shaper/animation-6.json

@@ -0,0 +1 @@
+{"v":"5.12.0","fr":60,"ip":0,"op":300,"w":500,"h":500,"nm":"test3","ddd":1,"assets":[],"fonts":{"list":[{"origin":0,"fPath":"","fClass":"","fFamily":"Arial","fWeight":"","fStyle":"Regular","fName":"ArialMT","ascent":71.5988159179688}]},"layers":[{"ddd":1,"ind":1,"ty":5,"nm":"The quick brown 🦊 jumps over the lazy 🐕. 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"rx":{"a":0,"k":0,"ix":8},"ry":{"a":0,"k":0,"ix":9},"rz":{"a":0,"k":0,"ix":10},"or":{"a":0,"k":[0,0,0],"ix":7},"p":{"a":0,"k":[250,351,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"n","pt":{"a":0,"k":{"i":[[-39.519,0],[-39.528,0],[-42.132,0],[-41.237,0]],"o":[[38.66,0],[39.519,0],[40.378,0],[39.519,0]],"v":[[-150.703,-8.95],[-50.187,-69.088],[51.187,-8.95],[149.985,-69.947]],"c":false},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"t":{"d":{"k":[{"s":{"s":24,"f":"ArialMT","t":"The quick brown 🦊 jumps over the lazy 🐕.","ca":0,"j":2,"tr":16,"lh":28.8000011444092,"ls":0,"fc":[0,0.553,0]},"t":0}]},"p":{"m":0,"f":{"a":0,"k":0,"ix":5},"l":{"a":0,"k":0,"ix":6},"a":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":1,"ix":3},"r":{"a":0,"k":0,"ix":2}},"m":{"g":2,"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":3,"rn":0,"sh":5,"sm":{"a":0,"k":100,"ix":6},"s":{"a":0,"k":10,"ix":1},"e":{"a":0,"k":15,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.656],"y":[0.875]},"o":{"x":[0.045],"y":[0.374]},"t":0,"s":[-15]},{"t":299,"s":[100]}],"ix":3},"r":1},"a":{"p":{"a":0,"k":[0,-12,0],"ix":2}}},{"nm":"Animator 2","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":3,"rn":0,"sh":5,"sm":{"a":0,"k":100,"ix":6},"s":{"a":0,"k":5,"ix":1},"e":{"a":0,"k":10,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.656],"y":[0.875]},"o":{"x":[0.045],"y":[0.374]},"t":0,"s":[-15]},{"t":299,"s":[100]}],"ix":3},"r":1},"a":{"p":{"a":0,"k":[0,10,0],"ix":2}}},{"nm":"Animator 3","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":3,"rn":0,"sh":2,"sm":{"a":0,"k":100,"ix":6},"s":{"a":0,"k":5,"ix":1},"e":{"a":0,"k":15,"ix":2},"o":{"a":1,"k":[{"i":{"x":[0.656],"y":[0.875]},"o":{"x":[0.045],"y":[0.374]},"t":0,"s":[-15]},{"t":299,"s":[100]}],"ix":3},"r":1},"a":{"rx":{"a":0,"k":0,"ix":6},"ry":{"a":0,"k":360,"ix":7},"r":{"a":0,"k":0,"ix":8}}}]},"ip":0,"op":300,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"path 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,351,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":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-39.519,0],[-39.528,0],[-42.132,0],[-41.237,0]],"o":[[38.66,0],[39.519,0],[40.378,0],[39.519,0]],"v":[[-151.203,-9.45],[-50.687,-69.588],[50.687,-9.45],[149.485,-70.447]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":4,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false}],"ip":0,"op":300,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":1,"nm":"Medium Yellow Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[250,250,0],"ix":2,"l":2},"a":{"a":0,"k":[600,600,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"sw":1200,"sh":1200,"sc":"#ffffbd","ip":0,"op":300,"st":0,"bm":0}],"markers":[],"props":{}}

demo/text-shaper/basic.json

@@ -0,0 +1,392 @@
+{
+    "v": "5.12.0",
+    "fr": 30,
+    "ip": 0,
+    "op": 150,
+    "w": 500,
+    "h": 500,
+    "nm": "Lottie Shaper",
+    "ddd": 0,
+    "assets": [],
+    "fonts": {
+        "list": [
+            {
+                "origin": 1,
+                "fPath": "",
+                "fClass": "",
+                "fFamily": "Arial",
+                "fWeight": "",
+                "fStyle": "Italic",
+                "fName": "Arial-Italic",
+                "ascent": 76.4484497718513
+            }
+        ]
+    },
+    "layers": [
+        {
+            "ddd": 0,
+            "ind": 1,
+            "ty": 5,
+            "nm": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            "sr": 1,
+            "ks": {
+                "o": {
+                    "a": 0,
+                    "k": 100,
+                    "ix": 11
+                },
+                "r": {
+                    "a": 0,
+                    "k": 0,
+                    "ix": 10
+                },
+                "p": {
+                    "a": 0,
+                    "k": [
+                        248.796,
+                        156.501,
+                        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,
+            "t": {
+                "d": {
+                    "k": [
+                        {
+                            "s": {
+                                "s": 19,
+                                "f": "Arial-Italic",
+                                "t": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+                                "ca": 0,
+                                "j": 2,
+                                "tr": 0,
+                                "lh": 22.8000011444092,
+                                "ls": 0,
+                                "fc": [
+                                    0.911,
+                                    0.545,
+                                    0
+                                ]
+                            },
+                            "t": 0
+                        }
+                    ]
+                },
+                "p": {},
+                "m": {
+                    "g": 1,
+                    "a": {
+                        "a": 0,
+                        "k": [
+                            0,
+                            0
+                        ],
+                        "ix": 2
+                    }
+                },
+                "a": []
+            },
+            "ip": 0,
+            "op": 150,
+            "st": 0,
+            "ct": 1,
+            "bm": 0
+        },
+        {
+            "ddd": 0,
+            "ind": 2,
+            "ty": 1,
+            "nm": "Pale Turquoise Solid 1",
+            "sr": 1,
+            "ks": {
+                "o": {
+                    "a": 0,
+                    "k": 100,
+                    "ix": 11
+                },
+                "r": {
+                    "a": 0,
+                    "k": 0,
+                    "ix": 10
+                },
+                "p": {
+                    "a": 0,
+                    "k": [
+                        250,
+                        158.507,
+                        0
+                    ],
+                    "ix": 2,
+                    "l": 2
+                },
+                "a": {
+                    "a": 0,
+                    "k": [
+                        196,
+                        19,
+                        0
+                    ],
+                    "ix": 1,
+                    "l": 2
+                },
+                "s": {
+                    "a": 0,
+                    "k": [
+                        107.371,
+                        11.295,
+                        100
+                    ],
+                    "ix": 6,
+                    "l": 2
+                }
+            },
+            "ao": 0,
+            "sw": 392,
+            "sh": 38,
+            "sc": "#a9c8bd",
+            "ip": 0,
+            "op": 150,
+            "st": 0,
+            "bm": 0
+        },
+        {
+            "ddd": 0,
+            "ind": 3,
+            "ty": 5,
+            "nm": "Suspendisse ligula justo, imperdiet malesuada enim luctus, pretium laoreet mauris. Sed et feugiat sapien. Suspendisse maximus nulla vitae turpis tempus finibus. Maecenas et convallis ligula. Vestibulum imperdiet lectus id tortor aliquet condimentum. Pellentesque venenatis ipsum ac tempus egestas. Cras blandit odio tincidunt ante interdum, non bibendum purus feugiat. ",
+            "sr": 1,
+            "ks": {
+                "o": {
+                    "a": 0,
+                    "k": 100,
+                    "ix": 11
+                },
+                "r": {
+                    "a": 0,
+                    "k": 0,
+                    "ix": 10
+                },
+                "p": {
+                    "a": 0,
+                    "k": [
+                        252.006,
+                        264.848,
+                        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,
+            "t": {
+                "d": {
+                    "k": [
+                        {
+                            "s": {
+                                "sz": [
+                                    388.442993164062,
+                                    178.170135498047
+                                ],
+                                "ps": [
+                                    -194.221496582031,
+                                    -89.0850677490234
+                                ],
+                                "s": 19,
+                                "f": "Arial-Italic",
+                                "t": "Suspendisse ligula justo, imperdiet malesuada enim luctus, pretium laoreet mauris. Sed et feugiat sapien. Suspendisse maximus nulla vitae turpis tempus finibus. Maecenas et convallis ligula. Vestibulum imperdiet lectus id tortor aliquet condimentum. Pellentesque venenatis ipsum ac tempus egestas. Cras blandit odio.",
+                                "ca": 0,
+                                "j": 2,
+                                "tr": 0,
+                                "lh": 22.8000011444092,
+                                "ls": 0,
+                                "fc": [
+                                    0.911,
+                                    0.545,
+                                    0
+                                ]
+                            },
+                            "t": 0
+                        }
+                    ]
+                },
+                "p": {},
+                "m": {
+                    "g": 1,
+                    "a": {
+                        "a": 0,
+                        "k": [
+                            0,
+                            0
+                        ],
+                        "ix": 2
+                    }
+                },
+                "a": []
+            },
+            "ip": 0,
+            "op": 150,
+            "st": 0,
+            "ct": 1,
+            "bm": 0
+        },
+        {
+            "ddd": 0,
+            "ind": 4,
+            "ty": 1,
+            "nm": "Pale Turquoise Solid 1",
+            "sr": 1,
+            "ks": {
+                "o": {
+                    "a": 0,
+                    "k": 100,
+                    "ix": 11
+                },
+                "r": {
+                    "a": 0,
+                    "k": 0,
+                    "ix": 10
+                },
+                "p": {
+                    "a": 0,
+                    "k": [
+                        251.605,
+                        264.446,
+                        0
+                    ],
+                    "ix": 2,
+                    "l": 2
+                },
+                "a": {
+                    "a": 0,
+                    "k": [
+                        196,
+                        19,
+                        0
+                    ],
+                    "ix": 1,
+                    "l": 2
+                },
+                "s": {
+                    "a": 0,
+                    "k": [
+                        100,
+                        475.94,
+                        100
+                    ],
+                    "ix": 6,
+                    "l": 2
+                }
+            },
+            "ao": 0,
+            "sw": 392,
+            "sh": 38,
+            "sc": "#a9c8bd",
+            "ip": 0,
+            "op": 150,
+            "st": 0,
+            "bm": 0
+        },
+        {
+            "ddd": 0,
+            "ind": 5,
+            "ty": 1,
+            "nm": "White Solid 1",
+            "sr": 1,
+            "ks": {
+                "o": {
+                    "a": 0,
+                    "k": 100,
+                    "ix": 11
+                },
+                "r": {
+                    "a": 0,
+                    "k": 0,
+                    "ix": 10
+                },
+                "p": {
+                    "a": 0,
+                    "k": [
+                        250,
+                        250,
+                        0
+                    ],
+                    "ix": 2,
+                    "l": 2
+                },
+                "a": {
+                    "a": 0,
+                    "k": [
+                        600,
+                        600,
+                        0
+                    ],
+                    "ix": 1,
+                    "l": 2
+                },
+                "s": {
+                    "a": 0,
+                    "k": [
+                        100,
+                        100,
+                        100
+                    ],
+                    "ix": 6,
+                    "l": 2
+                }
+            },
+            "ao": 0,
+            "sw": 1200,
+            "sh": 1200,
+            "sc": "#ffffff",
+            "ip": 0,
+            "op": 150,
+            "st": 0,
+            "bm": 0
+        }
+    ],
+    "markers": [],
+    "props": {}
+}