RE. SPECT. WALK. ASCII.

HTML

<!-- Nobody here but us chickens! -->






<!-- And interlace. Chickens love interlace. -->
<div class=interlace></div>

SCSS

html, body {
    height: 100%;
}

body {
    background: #101010;
    box-sizing: border-box;
    color: #fff;
    font: 15px 'Roboto Mono', monospace;
    margin: 0;
    padding: 60px 0 0 60px;
    text-shadow: 0 0 3px rgba(255,255,255,0.75);
}

.ch {
    position: relative;
    transition: transform 30ms;
    white-space: pre;
    
    &.ch-1, &.ch-2, &.ch-4, &.ch-5 {
        transform: translateY(-9px);
    }
}

.wep {
    color: #eeff41;
    left: 2em;
    position: absolute;
    text-shadow: 0 0 5px rgba(238,255,65,0.8);
    top: 4em;
    transform-origin: 1em 0;
    transition: transform 30ms;
    white-space: pre;
}

.ch-0 .wep { transform: rotate(-4grad) }
.ch-1 .wep { transform: rotate(-2grad) }
.ch-2 .wep { transform: rotate(0grad) }
.ch-3 .wep { transform: rotate(2grad) }
.ch-4 .wep { transform: rotate(0grad) }
.ch-5 .wep { transform: rotate(-2grad) }

.interlace {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAQAAAAziH6sAAAADklEQVQIHWNg+M/AwAAABAIBAAfhWaMAAAAASUVORK5CYII=), rgba(255,255,255,0.5);
    height: 100%;
    left: 0;
    opacity: .2;
    // pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.waa {
    color: #f92104;
    left: 16em;
    position: absolute;
    text-shadow: 0 0 5px rgba(249,33,4,0.8);
    top: 4em;
}

Babel + JSX

var characterConstantPart =
' ▄▄▄▄▀▀▀▀▀▀▀▄ \n'+
'█░░░         █\n'+
'█░░░ >     < █\n'+
'█░░░    ^    █\n'+
' ▀▀█░░    █▀▀ \n'+
'   █░░    █   \n'

var animootedParts = [
'   █▀▀▀▀▀█    ',
'  ▄█▀▀▀▀▀▀▀▀  ',
'  ▀▀▀▀▀▀▀▀▀▄  ',
'    ▀▀▀▀▀▀█   ',
'   ▀▀█▀▀▀█▀   \n'+
'        ▀     ',
'   ▀█▀▀▀█▀    '
]

var basicSword =
'    │___________________\n'+
'╞═══╡__________________/\n'+
'    │                   '

var waaagh = '- WAAAGH!'

var characterFrames = animootedParts.map(a => characterConstantPart + a)

var ch = document.createElement('p')
var cha = document.createElement('span')
ch.appendChild(cha)

var n = 0
ch.className = 'ch ch-' + n
cha.innerText = characterFrames[n]

document.body.appendChild(ch)

false && setInterval(function () {
    if (++n == characterFrames.length) n = 0
    ch.className = 'ch ch-' + n
    cha.innerText = characterFrames[n]
}, 50)

var wep = document.createElement('span')
wep.className = 'wep'
wep.innerText = basicSword

false && ch.appendChild(wep)

var waa = document.createElement('p')
waa.className = 'waa'
waa.innerText = waaagh

document.body.appendChild(waa)