Flame Effect in Text Mode
Tags: javascript, sinuous, demos
Published: 2022-07-06 07:42:36

Hy all,

Just for fun. I wanted to test how fast was [SinousJS](https://github.com/luwes/sinuous)

I end up with this nice demo, hope you enjoy  [FlameDemo](https://flems.io/#0=N4IgtglgJlA2CmIBcAGANCAzgYwE4HtZZkBtAJjRQF0MAzCBTU0AOwEMxEkQA6ACwAuYYhmz4WA+BOQgAOi3kAeKBABuAAmgBeWSDYAHfboB8igPQrVIAL5pWHLrwBWTUeMnTuZs+swQWAK74AZjqbETyAIS0ASzYAhDiABQsaLgAlMC6+ABGTvDxulpaAgCe+vD4tOrwAB76+LgCmABkLbqxUPD0LPBQupEl5ZXVYPhQAQgA-LhJdQ1NmOlIujFxCeJFQxVV6l098G37-vA8HFBTx71JJLrzjc26NBlIsylaLAA+n5jwsLTpHgAd38UHwQI+wNB4O+wGs6WsSQEfAgmDQSTW8USLBSmUxGxY6lmmVw8AEAVwONwWgA8nkCgIzpg-ABzL6ffHY3HAWiNJKqNi4IlaACMAG5cIpBSyApwJJgeAgWCzkRKANRqzICoUCLTS2VSZokXBUMW82bamqaQkCdJ0-LxHj6AgCfBlCr8NiYGlAlgABQIFSapR42HCsCRaHg6TaKRI8CoJXjVARpPJlPULHhZ0MsFKSJRaP1cuaCMtus54kzkfgaACaHweL5ltoWjhaAgWkrOIgWsFYS08BIEBosB0IECYBy8FwW3dIzCUwCJDYVCQbDQmEHJA1I7FEFoSRFxS0S3wJGoWlgYr+v00h4AzCezyQRYnZue37DbLB0jfYHeB5JAArM+6RJJ+iaQd+6Txjuaojom163vA95JAAbGBwCWqo267jQ+haBBr5QSRMEkKoNClF2FGmqU3yrLEWKbCAgzzrssBtIx6zYgM2wLvo3xJNR+htCQ+hUN8JA0JBtFdkxBJJE2Fr9iw466GkWgoBKighkqKp8OqmosGq47dnOwy7KUxpUFM1kmqG4YFqiyz2aaaYUoS2BaBAaBZukaClHZTohHwSS-kgsmUaZsBqroujWChaFLNh-ZQPJPHJCSZKeeojIGPoeYpJMsB+ZGpX1rccggH5JUpgiYr4CFmBhdxzEKCAxTsdU57UJcSBQEpCJJU1+iheFf7eRAtjeeK2CKKc+mqtgGrpBASTYH+HkZvgtjwBl7Xcua-L9rgaACFGop1upNX4DdaCtheNCdt23LHsUhwtCkQkBFoAQ8KShVsNg8BJGYAB6siyJgABUUMKNDMOfFDsPwyjMMACRmCyaDxSA6QE1MtDNWF7L1igyxPh9sZk+kUwYiT32fPWIoBftZDLGQJ6fboPB81sf1tCwROM6kD6c9zbQBG0kTC8TY0tUkkToMBdbLPAxhaMBsZJAE3yy20oEfTGX3y+N9a1ral3oQFLCxmbiupJbbNaDbAW-XjM1aWK80sIqUgGT7q3ANgsbvYObTrQF62bX+x2Wmw3tsIoLAkNgVD+8qqpsKt1Kp+nK40OH8BTLoigC7g9NRw9WgkLQND7eLSABKZuBIAALNzpcgAAtD3AvS+0IDGBX9P7SK1148sv24Gqy7UJFMwnvgUx3Xjzet0gADkuhbyeuAMSAO+dcUld3W3Jij0k1fj+rsZFFf+2q7q9Ye9Vyy6GYFexvAijAYfI8T4fDTlQFcao3x02vkpNAVMI6mxotQF2tB0StloE9QECswq1g5pdCmKwQDqArofKGAgiHIzkPIMh8VZCziAZXKBLsOYby0BkGBksh6RD7gPH+Wh241zQYg6w21CTV1oLYX6vQgTqAALIGAbAdRSLA+xCmpP9FkZJnJLAlDlDMB9PhJDzvAKRsj9B1h4L8AQmi0gE3RNSSxyJURpB4OoyxSihK4HMRo1I1JQZKICqw4sho0TSQJpnAyxgRQzFeE9WwqCFJcmUZmLQTUCpFQcUWXAMoSxaKAko4R6gACCuBcBsBDKiIpJT8xKKmOk3E+DcgOlISfbqmYpgsCQLUkgLAUzWDNPEqsUdUpCjUsTHIoJNFbR0TidJwISmCU+EonMhUqloECfKMs-ZsCrLQGOaSfTMqEkwNyS01ItkVn6TiTIvTvIXQAPpIj-JafaOIMQXKUsAHIDy0DeVUPgaA6gUDwkmemLyLCozWG7OoVQxzTpaGwD7LQvz-naXLB8JS2iQXqG8mdAQEKLnqH0EdfFsxbTACAigE8azmhhOROkfJocWiRA8bc25TU+Beg2ibAxPAWUpJgJy75PB-qYIMTYlg+5DxsDpVMokPBdTFE4i0NgjNWEeN1BdAQYo1KaqeXCjFuUfl-KgACpxd1JHqAAMoaOZay-xPAmrmgAKLAzCq8g53J8l+07JEEUQLTU8CdS6pIbrDpKOAF674ly-XeVrFmfJHiMZ3Qnjas1RjLVkicbqUquA8UHPUCsjIPJ8WWMSfteFDLsA8tuZWkVtoxSWl+oyFl8L8mfKtoyb16AbmaSpO7ANjRnXYFda9MNPdw5NurTwUEdQaSHiUTTKdWhlYIhsZC3twB40Az6AEEGwbXo4uypijxYg4hsHsWVCdsd4RoBCYiS9gJA1DqSFAAKMa0i5vajUd5+SO01KFf23Ag7h1vLDZ6pSQLXglGgTmz15iShoHue26BpxE1XXgB+gkexuReqFv+x9wH3WFo8fgNoxGeBdAQJIXEQKMPYnUKTQ9Bq2iVtgKLW2tGqxAg9TKqpAVXqMYzJ8v2SxrAccJEJzIftm0AaA0kHIts8MDqDSGxSRGq1NQo2SXxdqSMtDI5pqjSi-V+1Y-hvdIGBOEijTY+5RnIW2ck0K2uNApPVuc35RUznrCWjAG2WwBTnP7M-SybjmKZkCDaOFrpcrhhUGo2AfgCiElDOFBU0pAaCBgCSFSrRTzrproeWSudJUup-iSkBXQmABC4H8CyCyOxqi2hLgltg-LnZIH2glzAlx8DYANBIUMpIz3wEdQgEsAA5C1SRdCCAEPoJA3ggRLeBA+e1mSzBkBQFtswmBVB1ZqraAavX+uMjwPAYbo34Algef+QCh40tlMwA9h56R4BCX2mCPrJZBvnckAAEWOyWAAYiUlk12bGMjM0o27qEgICGtFVtgcQFzjfGNGZrZw2vnXViUGHaFsj0kKM0yyjX0gJedPgIMZQ5jnVqkQNAXWysAVh4eNqBJ6sLltEBaMKXfotax1PMUCX-C-CaDTi6ARhrM5qCUJZRVAj048ZgQqEBd2syZ3efng1ax4zVLaXpm6zOS-BQzqdLBRfnPdd42ntZJcbpldqyLTpBSGlR10SN109afFh+bgQSOQa7Dd59Ws1IPrva4lgartW+ItLe58SI03I81eVBz3YejdCTmnLQrqJOiSxlnjdQmbPeLE4a0SKYXWAg5BwDV6c5n3WZE62bi3KQnFhiIEkYAfwkBOxYFAWRuAADWHTr0XVtyu5YSIpifV1j9Qc9q2inCar0WoAgLUQByLAWr3xGTOngKoRIIR1+b9qwFBLuAsupHrLaZYftJCr4AMLuENPdZ5JU0gyxQIMFhPCtet4PQTEgMVEQIMJ9H7PQLgFVg-iiLABcAIPTLvqSAfsEJgMflvsqJGoqF6AINAQwC+uRmeonG3OARAJATgTAVAAQX7iwh0hXpjoNNbodnfnUDgc-hIGCvtBkGzLYOToGDOGUElskIwVGGrEVsAbAIMBkEBJEAIIfGetVpgALBFl9PtMuukMdPDv4ESGTk6HwcGP-iQAIDQGPmrDDtkHxEmNQIfB1N-gIGRJ8AmivMXixDnmXpXJXtXngBvqDCpslrwZTvwQWo5B3l3rAD3n5A4CPgFCYZLhBgEG0uYmUAgJ4gIAGAEfoRdC8HHroFAIQf3EAoyJgFvruirOkHITVmwPkSeIUcUaDKUQkRYgUgIFHjkAEFRpkR-JHqUAgEod3FVsnvtq4QuJXMJkkacNgMyAACosE0H+FU4Fp06lS1jLpAG6DYCwBeiKEFGxgCCmS6DjYOC6C2yGHvjLAjppDY4bosLmK1FJAcxyr4AAAy4IM4D+XooM0RCRrWUAjqqghojxqIHgM4BiaALIt+W6Ywfxvx-xgJUgwJZ0YJ6Id+Qkd+fmBMNkJQiIqQHRPB9BghOIjBpa+JMKKikIQ6eBQemAEqBibQIo4cfsLAaOkxww0qR6NKfAigZAMwT0SAwA+ASAf+qQeMaQ6ComBixJoGUylWUeKepeC4wsn2J2P2w20xq+QedSIivu-uKOaObSAp-ASQBSfkCIoqZRDh+qGYXq5u-BAAQt0I0KDDik7voC7hIEHpFtwabhfhKRcaSsdBKKRrYWKESR4ivmvhvugSyFqvvM7qSG6WjrhqSJCfALgbAaKppOhriZgFXjXt4VoECKbusedoEIRHwF6fgG6KeKbpgBwIVPtKoKbnwFuPxilmpF1kLnBsrPWrCtInLvmEisaugDlsCrlF1h8O+t2UKE4GgNIsSZZuoAlnwH2UkIuaspkidiJmgONnOfbpiouQqKkvmPuWuVkkEgiGgLUH5kFphkDqFrlC2UBE4KyZ5CkFMONkgNIoCIeeISeRuY8qdNeXRpYnbgrmOH9HPsULUIfOZHKbsPEZXI6WrJBsAPOM3AhtWkgNJNYEgA9lOk9sUqUrrJAtSHosAM2phVQOIjJkGjfvUoTk0kMXBUuFWtgNPiCZLq8FWoRAEK8GxWdChcMD3u-iyvNgEPCMhahfWORVhbbPnnKh8AiJCr4tYuGixSqjph8EIjKrhbQJltluudkg+kpk+lbDmmJpaneRmDpXpX7OSbAZSQ+gwJIG8COvOQ+N-gyUycMJgbkX7nKjVllmaV6jRpaDSFoLeQFBjOFUrBTGgIPm2CJS6PgCykJfTqoEgLUGgFAEgDSFlYIMIEgC2fkhAMublcObYFAJgEgBjFlbtiyIVW8vOSVd+TVeVWgHwKUFACUpIA1XmlSJcUBIWs4R1IxdUGqsMPntcfOMuaBTejahJKGOIGGJYjarHP+UKLbvIgOQCjGfOBaTaEJLqIqd9gAI4BAzilBWoIDxB8gFaFrliTzVTUnzU7HXEiVTovrpBvwADEugeOg1XFr181oYGxzIBMb8PAf15Wh4Ceuo41FQBM+Sqh6Aq1Qs3KzaT0Q0+16gLcieMFo1eUNSSkHSgIyuW+liughC+MPAYABg9eoa85fsgMGxu6ZgNwkMsgtQAAHCgP3LIAEEDoLUDlDECD3CmNjLjBQlDBjCKEcUCjwE4H8jiLzHLaaQFIYU4iJZrdWt8A5GZr4VWJYgCGIdUCLn7sjoHmjuBL9ACE5v9F7tpNDYaQRY9s9gCOodRSZRrizkRSlr5FshuKVGiLhFNpLiQPbQRBKZkPbRqGgKoFQcqlHoFR5f5RAIFfbPampUtHwN-qHYCNnbGPHWTRAAIKqZYvHb5cqtOrULOriGqCZgHLSh2LGFNDTWek+hDOjGYLBIggFBXYQancncUHfgFUpIXQnQpQ1KoPbCeLUMxS3GqHRY0qntULQDTCVsUMTPOG0LAvHYyV0MyRUPTPHZ2mgISsTCJYAVvRNV9DiMgqoH2gvQTAFMNSveoLQFXIilMP3X7kgNtV2vdB4bmXXgbZcsAE4HqJOcKIeFtKRixZNfDSXG3KtetXlOOP0dHrBWNdYbKFnm-bgBKCUFMCtMg6svrNPYyivJ2MLtaWLvWGdKVL5EsEAfAYSi8M7ZUnhc9hkLGFuA2bhMbjPgI7bCCQ-R2M5gFGOJEJ9KoHQd8brJLRpHneHUKimPqfI8Kq6QIEHoozVP9GGWgafgFBAz6qskuoCs-UvQyG-WvabCxd8HMYEQo8grNWqgTKJjYmJaJmgA-qeH8MTBamgI8QlbchTq6ClbNR1V1cNkgIPn5PgE-iwLQMUQIL1YdPOb8P8DwBaloA-puP4+Yv4EECELYPlWEUVTKs1bmPmNIr+YZbYHVWk4pE1cueNnU2eaUx+e1VVW0wYBAAKQzgYE01yISSlk3gQG6NdEA14dOPIl1rWQgDXAlkWUjgEPoFqhvcoUiEugmnWpaNQwaSEt8loH-r5FPGY+aiYjsh8Gmlc1uOalapqpCtClfpkLkiVIMGGpaHdKxi4riNjeHPEUkAqAZtpg2EJHSSeBBEQz4a9KSvksqhYq3qZSkDwBjKoJGhPq8Ki+i5i4CPvfAIfTPndK5SlnnKGBQZSedNcdndSQIJyc+bok9FA-tNZfgFlhkPteGl5RUEgHSRPKk0ONQA2B1oYWOqOMM1lGIR4tnbYeoc2P2L9NpAEIoJqukH7AVFIFAKmdruHRqCmNjVmGKY2N8I2Dsika3o2IAWOieIPAefykog9CBipfkvyyeJ5QfcMFMCKGYJKCgDMHQRfqi7vlozo3fjwAYxGbVh5sviwYY8qEFXKj3varxSZsTXfj3oiPgGrKJpCoSl87Csqn89DrgPntAsqqC7iJI+Rn8FptRvkoeAEPTapokrqJctjfgM28lgqCs8SFA2pGy1lucTiiIXbt8w9OI5c3It5FO+s8dHdNpPgIoDK43YZPgKtCVUi7gCQPgDJHHHyAu41Kq+yY1KtJWki3Ybuw2Pux+F2N7PgN-iu1nHwN8LQLYSe4kkQTu6OEmPXNSaBZSukOu2qP9YeIyNnYoF2OqxCfgH8Tq3MAYt+2gGOjYsB6B9yhB8ktByLrafaaSAh6VKzFGIh1exTN8MbrQBqOh4nAqkB7HZRyByhClluJWn81KnHT5M4hor+PWkajtcUN1qi0mbBymRQQh9u1eyhwFMB8sP-SeLI6izh00HaeaKDKDIR2zCRzQGR8zHxqtEAVaRbipw6eJ7RGgER46Uhzp8btu5RB8O-qoMYOuyKG0MBw9KtKJj+oiDWqG2jmkFJMYXHd8gTNjQqGZvoOxu48-Q9F21K8qvraS2BhPqsiDedsSOa729Aj2wgIKOBjYtNGgBakgKUN8jlyWUgGWWIGAGNJINlSV6iACVVlILVpK2A8IpEJENgLYPyaYrkKLgKJvvAEgL1+0sOzbozc5otaeq4gFPmKA4VuAcZQRgzbublNZqg42tjXHrrIirF21zKiShPi7KY2JdEeeRM6k2iDWdVwgH-ZuDmTM0NwWdVkjjWe1K1yScKGwGKInHsqipcpdN9wixwZ7ct4om83OnKt-r+GS5CJqqiaVL2h49EeIubg97XkN6S0JuYgiL0n7Dk48R5n4IECgVoI8UCmKJQnEOIFVuoPgOoFoL4EUygfapT9T77vRkILAAz0zyTyEPwFz2KIQuz7T2AJgCyOoDz52yEkL1T5RlisEBIJL4z52xTPICerT9IgUgABqPEACSAA4jzyKMBNpOrzT-Dhao6o6n9jz5tltg7ygFT5Cms75fAI1-DiuekOoFkISAr7EJYmIAH0pOoGqOoKzPIJL0HxICH8YDIjr-r0b5H5L+oFMAueLzcHzDTRn6TbcURwuSmMLyn+oEgOnyFiQFn2LyFgFAX1un8ZAR8ekMn6SGdfAFVgUiwGnWetiCDg4MGt71oHH678Nh70kLIsiADEjmCIFeoDDJatb39gTPINYMn5Ci4gCXr5IGAOoCuR2H3nUN78AEXyn-kmUwAAbJ+S+KBb6+BjHqR+-F+S+8gSA9xAjwAQAsiCBIA5CEBQBs+P8p9n+AgHuH4AABeQ3EUJtn0C1B-+AA9QOgXgA9w+A7-T-qkzIDQDYBAAyjM5RAEulsALXM3g-0f4vdzc5oMAKXxwDhB4A2vJICgB4DAQuaZAYCH+Ev6P9WBxfMQLAEaCvAWQOQNgEkAxjABx+S5SADiCYGqxrQXQWoLP3UBMD2455QQcIJpr+A7iwECQdXRhgigeA4sWwACkl7mcWBRA4vpTmBgl1Sg1VYAHQIfAyDq6ZgLXrr0N7WB1AmAlPpfCMHqBBB2-MPpTUpor8iB5gLfMYDP6y8swVPeQJCkmIl0EAIfX3pL1P5c8L+-gvgCKE0DpRdAkxSmlVm6L7R4o7gyXiYPwFlBUAPAAAOwuCOBhAbgUCBRCSByhKfe-MAPCAf92kIMCQDODqGS8GgfgAkK8D+Dd8-iYoV0PNkEHsDH+IfQfrINN6h8d+wEGQUoJKR952WIfOftHxLTqBveAAUnUDARrAGA0YZL1AE9xq6fLDoe-XcAgCIA4AvlltmgG5CABI8dwUDg2KcAagtAWgAyGP5X8zAyQh4ZL0SF+Di+4Q-FAADUIAaaGIc3xlTn9WBggyIQIGiEIhWBigSYLf2yH38sBgJEAWMR7ioVMw4geAHUNpqZJ-AqAOoS6RgAECyR+AbodiF6EbEEgAw0YUMKQA9wHwKAPYe4IQC0BUm7cdkTANYEmBPhKfQQeMLj5V8lIbdQlOvwgCb8rsiI-wWYEmBBDl+VPY6oaB4A-8oAIYTVn3iSCgijEWNKnsP0kCj8m+Cgc0WEItFWiqeNUEAFV30AMAZwMgPgdOBEBYBa27UJgNwHbhkAkAwEEUDYDsATgHAMgUMMyFtEnoPAAgZ0eMFKA+9k+fA7AIPhZAEBOg3-FmoPjZ7WBbRmTBkNiC9EgBfRAY6wDQBADoFB8XokgPYE4AyBOAmSGcP4HwC2iKQxAbgLNn0BVVvAsQfQMmMWpgAzAdY9RMnnwAAABOge3B4AoALAgJAcTOCHGNieAbfYCMoL9guBbR84GQLmX0DRiSxGAdgDWO4Bb4qsyTBwD3APw5BuqiAawEAA)

Here is the code :

```js
// sinuous all
!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r((n=n||self).window=n.window||{})}(this,(function(n){function r(){return(r=Object.assign||function(n){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&(n[e]=t[e])}return n}).apply(this,arguments)}var t=function n(t,e,u,o){for(var f={},i=function(i){var a=e[i],l="number"==typeof a?u[a]:a,s=e[++i];if(1===s)o[0]=l;else if(3===s)o[1]=r(o[1]||{},l);else if(5===s)(o[1]=o[1]||{})[e[++i]]=l;else if(6===s){var v=e[++i],p=(o[1]=o[1]||{})[v],y=f[v];y||"function"!=typeof l&&"function"!=typeof p||(y=p&&[p]||[],o[1][v]=function(){for(var n="",r=0;r<y.length;r++)n+="function"==typeof y[r]?y[r].call(this):y[r];return c=i,n}),y?y.push(l):o[1][v]+=l+""}else if(s){var d=function(){return t.apply(null,n(t,l,u,["",null]))};o.push("function"==typeof o[0]?d:d())}else o.push(l);c=i},c=1;c<e.length;c++)i(c);return o},e=function(n){for(var r,t,e=1,u="",o="",f=[0],i=function(n){1===e&&(n||(u=u.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?f.push(n||u,0):3===e&&(n||u)?(f.push(n||u,1),e=2):2===e&&"..."===u&&n?f.push(n,3):2===e&&u&&!n?f.push(!0,5,u):e>=5&&((u||!n&&5===e)&&(f.push(u,e,t),e=6),n&&(f.push(n,e,t),e=6)),u=""},c=0;c<n.length;c++){c&&(1===e&&i(),i(c));for(var a=0;a<n[c].length;a++)r=n[c][a],1===e?"<"===r?(i(),f=[f],e=3):u+=r:4===e?"--"===u&&">"===r?(e=1,u=""):u=r+u[0]:o?r===o?o="":u+=r:'"'===r||"'"===r?o=r:">"===r?(i(),e=1):e&&("="===r?(e=5,t=u,u=""):"/"===r&&(e<5||">"===n[c][a+1])?(i(),3===e&&(f=f[0]),e=f,(f=f[0]).push(e,2),e=0):" "===r||"\t"===r||"\n"===r||"\r"===r?(i(),e=2):u+=r),3===e&&"!--"===u&&(e=4,f=f[0])}return i(),f},u=new Map,o=function(n){var r=u.get(this);return r||(r=new Map,u.set(this,r)),(r=t(this,r.get(n)||(r.set(n,r=e(n)),r),arguments,[])).length>1?r:r[0]},f=function(){var n=o.apply(this,arguments);if(n)return Array.isArray(n)?this(n):"object"==typeof n?n:this([n])};function i(){var n=f.bind(this);return(this.wrap||n).apply(n,arguments)}var c,a,l=[];function s(n){var r=c,t=function(){};c=t,_(t);var e=n((function(){b(t),c=void 0}));return c=r,e}function v(n){var r=c;c=void 0;var t=n();return c=r,t}function p(n){function r(t){if(0===arguments.length)return c&&!r.__o.has(c)&&(r.__o.add(c),c.u.push(r)),n;if(a)return r.t===l&&a.push(r),r.t=t,t;n=t;var e=c;return c=void 0,r.o=new Set(r.__o),r.o.forEach((function(n){return n.i=!1})),r.o.forEach((function(n){n.i||n()})),c=e,n}return r.$o=1,r.__o=new Set,r.t=l,r}function y(n,r){function t(){var e=c;c&&c.__c.push(t);var u=t.__c;return b(t),t.i=!0,c=t,r=n(r),u.forEach((function(n){-1===t.__c.indexOf(n)&&(n.i=!0)})),function n(r){return r.reduce((function(r,t){return r.concat(t,n(t.__c))}),[])}(t.__c).forEach(d),c=e,r}function e(){return t.i?t.u.forEach((function(n){return n()})):r=t(),r}return n.s=t,_(t),t(),e.$o=1,e}function d(n){n.i&&n.u.forEach((function(r){r.o&&r.o.delete(n)}))}function h(n){return c&&c.l.push(n),n}function w(n){return y(n),function(){return b(n.s)}}function b(n){n.__c.forEach(b),n.u.forEach((function(r){r.__o.delete(n),r.o&&r.o.delete(n)})),n.l.forEach((function(n){return n()})),_(n)}function _(n){n.u=[],n.__c=[],n.l=[]}var m={},A=[];function g(n){return this.t&&this.t[n.type](n)}m.h=function(){var r=Array.from(arguments);var e,u=function n(t){if(null==t);else if("string"==typeof t)e?m.add(e,t):e=m.s?document.createElementNS("http://www.w3.org/2000/svg",t):document.createElement(t);else if(Array.isArray(t))e||(e=document.createDocumentFragment()),t.forEach(n);else if(t instanceof Node)e?m.add(e,t):e=t;else if("object"==typeof t)m.property(e,t,null,m.s);else if("function"==typeof t)if(e){var u=m.add(e,"");m.insert(e,t,u)}else e=t.apply(null,r.splice(1));else m.add(e,""+t)};return r.forEach(u),e},m.insert=function(n,r,t,e,u){return n=t&&t.parentNode||n,u=u||e instanceof Node&&e,r===e||(e&&"string"!=typeof e||!("string"==typeof r||"number"==typeof r&&(r+=""))?"function"==typeof r?m.subscribe((function(){e=m.insert(n,r.call({el:n,endMark:t}),t,e,u)})):(t?e&&(u||(u=e.o&&e.o.nextSibling||t.previousSibling),m.rm(n,u,t)):n.textContent="",e=null,r&&!0!==r&&(e=m.add(n,r,t))):(null!=e&&n.firstChild?t?(t.previousSibling||n.lastChild).data=r:n.firstChild.data=r:t?m.add(n,r,t):n.textContent=r,e=r)),e},m.property=function(n,r,t,e,u){if(null!=r)if(!t||"attrs"===t&&(e=!0))for(t in r)m.property(n,r[t],t,e,u);else"o"!==t[0]||"n"!==t[1]||r.$o?"function"==typeof r?m.subscribe((function(){m.property(n,r.call({el:n,name:t}),t,e,u)})):u?n.style.setProperty(t,r):e||"data-"===t.slice(0,5)||"aria-"===t.slice(0,5)?n.setAttribute(t,r):"style"===t?"string"==typeof r?n.style.cssText=r:m.property(n,r,null,e,!0):("class"===t&&(t+="Name"),n[t]=r):function(n,r,t){r=r.slice(2).toLowerCase(),t?n.addEventListener(r,g):n.removeEventListener(r,g),(n.t||(n.t={}))[r]=t}(n,t,r)},m.add=function(n,r,t){var e=function(n){var r=n.childNodes;if(r&&11===n.nodeType)return r.length<2?r[0]:{o:m.add(n,"",r[0])}}(r=function(n){return"string"==typeof n?document.createTextNode(n):n instanceof Node?n:m.h(A,n)}(r))||r;return n.insertBefore(r,t&&t.parentNode&&t),e},m.rm=function(n,r,t){for(;r&&r!==t;){var e=r.nextSibling;n===r.parentNode&&n.removeChild(r),r=e}},m.subscribe=w,m.cleanup=h,m.root=s,m.sample=v,m.hs=function(){var n=m.s;m.s=!0;var r=M.apply(void 0,arguments);return m.s=n,r};var j,M=function(){return m.h.apply(m.h,arguments)},N=function(){return m.hs.apply(m.hs,arguments)},x={};function F(n){return function(){if(j)return(n?N:M).apply(null,arguments);var r;function t(u){null==u||(u===x||"function"==typeof u?r?e(r,u):r={type:u,__c:[]}:Array.isArray(u)?(r=r||{__c:[]},u.forEach(t)):"object"==typeof u?u.__c?e(r,u):r.__p=u:r?e(r,{type:null,__p:u}):r={type:u,__c:[]}),n&&(r.t=n)}function e(n,r){n.__c.push(r),r.o=n}return Array.from(arguments).forEach(t),r}}function S(n){return Array.from(n.childNodes).filter((function(n){return 3!==n.nodeType||n.data.trim()||n.i}))}var O=F(),$=F(!0),k={__proto__:null,v:x,d:O,dhtml:function(){return i.apply(O,arguments)},ds:$,dsvg:function(){return i.apply($,arguments)},hydrate:function n(r,t){if(r){"function"==typeof r.type&&(r=r.type.apply(null,[r.__p].concat(r.__c)));var e,u,o=void 0===r.type;return t||(t=document.querySelector(function n(r){var t,u="";if(r.__p&&(t=r.__p.id))u="#";else if(r.__p&&(t=r.__p.class))u=".";else if(!(t=r.type))return e=!0,r.__c&&n(r.__c[0]());return u+("function"==typeof t?t():t).split(" ").map((function(n){return n.replace(/([^\x80-\uFFFF\w-])/g,"\\$1")})).join(".")}(r))),[t,r.__p,r.__c||r].forEach((function t(f){if(f instanceof Node)(u=f).u=u.u||0;else if(Array.isArray(f))f.forEach(t);else if(u){var i,c,a,l,s,v=S(u)[u.u],p=function(n){u.u++,v.data.trim()!==n.trim()&&(f.o.__c.length!==S(u).length&&(v.splitText(v.data.indexOf(n)+n.length),i&&(c=i.match(/^\s*/)[0])),v.data.trim()!==n.trim()&&(v.data=n))};v&&(f===x?u.u++:"object"==typeof f&&(null===f.type&&3===v.nodeType?(v.i=!0,p(f.__p)):f.type&&(n(f,v),u.u++))),"function"==typeof f?(i=v?v.data:void 0,c="",m.subscribe((function(){j=a;var r=f();r&&r.__c&&(r=r.type?r:r.__c);var t="string"==typeof r||"number"==typeof r;r=t?c+r:r,a||!v&&!o?i=m.insert(u,r,l,i,s):(t?p(r):(Array.isArray(r)&&(s=v,v=u),e&&(v=u),n(r,v),i=[]),l=!e&&v?m.add(u,"",S(u)[u.u]):m.add(u.parentNode,"",u.nextSibling)),j=!1,a=!0}))):"object"==typeof f&&(f.__c||m.property(u,f,null,r.t))}})),u}}},C=self.S,L={__proto__:null,hydrate:k,noConflict:function(){return self.S=C,self.sinuous},html:function(){return i.apply(M,arguments)},svg:function(){return i.apply(N,arguments)},h:M,hs:N,api:m,map:function(n,r,t){var e=m.root,u=m.subscribe,o=m.sample,f=m.cleanup;null==t&&(t=!r.$t);var i=m.h([]),c=m.add(i,""),a=new Map,l=new Map,s=new Set;function v(n,u){if(null!=n){var o=l.get(n);return 1===u?(s.delete(n),o||(11===(o=t?e((function(t){return a.set(n,t),r(n.$v||n)})):r(n.$v||n)).nodeType&&(o=function(n){var r=n.childNodes,t=r.length;if(t<2)return r[0];var e=Array.from(r);return{nodeType:111,t:e[0],o:e[t-1],l:function(){if(r.length!==t)for(var u=0;u<t;)n.appendChild(e[u++]);return n}}}(o)||o),l.set(n,o))):-1===u&&s.add(n),function(n,r){return 111===n.nodeType?1/r<0?r?m.rm(n.t.parentNode,n.t.nextSibling,n.o.nextSibling)||n.t:n.o:r?n.l():n.t:n}(o,u)}}function p(n){var r=a.get(n);r&&(r(),a.delete(n)),l.delete(n)}return f(u((function(r){var t=n();return o((function(){s.clear();var n=Array.from(function(n,r,t,e,u){var o,f,i=new Map,c=new Map;for(o=0;o<r.length;o++)i.set(r[o],o);for(o=0;o<t.length;o++)c.set(t[o],o);for(o=f=0;o!==r.length||f!==t.length;){var a=r[o],l=t[f];if(null===a)o++;else if(t.length<=f)n.removeChild(e(r[o],-1)),o++;else if(r.length<=o)n.insertBefore(e(l,1),e(r[o],0)||u),f++;else if(a===l)o++,f++;else{var s=c.get(a),v=i.get(l);void 0===s?(n.removeChild(e(r[o],-1)),o++):void 0===v?(n.insertBefore(e(l,1),e(r[o],0)||u),f++):(n.insertBefore(e(r[v],1),e(r[o],0)||u),r[v]=null,v>o+1&&o++,f++)}}return t}(c.parentNode,r||[],t,v,c));return s.forEach(p),n}))}))),f((function(){a.forEach((function(n){return n()})),a.clear(),l.clear(),s.clear()})),i},S:y,cleanup:h,computed:y,isListening:function(){return!!c},o:p,observable:p,on:function(n,r,t,e){return n=[].concat(n),y((function(t){n.forEach((function(n){return n()}));var u=t;return e||(u=v((function(){return r(t)}))),e=!1,u}),t)},root:s,sample:v,subscribe:w,transaction:function(n){var r=a;a=[];var t=n(),e=a;return a=r,e.forEach((function(n){if(n.t!==l){var r=n.t;n.t=l,n(r)}})),t},unsubscribe:function(n){b(n.s)}};n.S=L,n.sinuous=L}));

const o = sinuous.o;
const html = sinuous.html; 
const msg  = o([]); 

let count  = o(0)
const MAXLIG = 150;
const SEED = 20000000

function updateList (m) {
  count(count() + 1)
  count() > MAXLIG 
    ? msg([...msg().slice(1), m]) 
    : msg([...msg(), m].reverse())
  requestAnimationFrame(() => updateList(Math.random() * SEED))
}
  function getLiItem (m,index) { 
    return html`
    <li style="
        font-weight:bold;
        font-size:120px;
        line-height:2px;
        letter-spacing:0;
        transform: scaleX(0.5825);
        
        color:rgba(${Math.min(255, index * 254)},${Math.min(255, index*1.3)}, 0  ,1);
        opacity:${0.3 * index/MAXLIG} ;
      ">
      ${m + " " }
    </li>`; 
}


function Title() {
  return html`
    <h1 id="T" style="
        opacity:0.7;
        color:white;
        text-align:center;
        position:relative;top:${
          () => 250 + (5 * Math.random() * count() ) % 5}px;
        z-index:1;
        font-size:100px"
      >
      Flame effect 
    </h1>
  `
}
    
function View () {
  return html`
    ${Title()}
    <ul style="
      list-style-type: none;
      margin:0;
      padding:0;
      position:relative;
      top:-30px;
      left:40px;
    "> 
      ${() => msg().map(getLiItem)}
    </ul>`
}

document.body.append(View());

updateList()

```