텍스트 모드의 화염 효과

// 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()