JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<pre id=p>

CSS

body,html{
  height:100%;
  width:100%;
}

body {
  background-color:#000;
  display:flex;
  justify-content:center;
  align-items:center;
  
}

JavaScript

c=e=>document.createElement(e),G=c`canvas`.getContext`2d`,v=c`video`,v.crossOrigin=v.loop=v.muted=v.src='https://fxi.io/n';setInterval(f=a=>{for(v.play(i=0),G.drawImage(v,0,0,w=20,w),o=``,l=f+o;i<l.length;[r,g,b]=G.getImageData(i%w,i/w,1,1).data,o+=(l[i++]+(i%w?``:`\n`)).fontcolor('#'+(r<<16|g<< 8|b).toString(16)));p.innerHTML=o},t=200)