// sort of golfed version of https://www.instagram.com/p/C1uv6Kqv19T/

// by @mewtru

b = document.body

a = Object.assign

a(b.style, { background:'#000', color:'#fff'})

w = 'snippet.zone snippet.zone'.toUpperCase().split``

F = (n, O = 0, C, S, o, t) => { 

  b.innerHTML += `<div id=${n} style='position:absolute;left:50%;top:50%;translate:-50% -50%;width:100% text-align:center;white-space:nowrap'></div>`

  w.map(l => this[n].innerHTML += `<span style='display:inline-block;margin-right:5px;font-size:28px'>${l}</span>`)

  t = O

  setInterval(_ => {

    t += .005

    ;[...this[n].children].map((e, i) => { 

      T = t + i / 2.7

      a(e.style, {

        translate: `0 ${Math.sin(T) * 100}px`,

        scale: Math.cos(T) * .5 + .5})

    }, 16)

  })

}

F('Z') 

F('X', 3)