JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cover"></div>
    <div id="dialogue">
        <dl>
        <dt>We are:</h2></dt>
        <dd id="message">Premium Quality</dd>
        </dl>
    </div>

CSS

/* cover is a black layer over everything - we remove before the 'blades' open */
#cover {width:100%; height:100%; background-color:black; position:absolute; top:0; left:0; z-index:10000}

#dialogue {width:50%; height:50%; position:absolute; top:10px; z-index:10001; text-transform:uppercase; opacity:0;display:none}
#dialogue dl, #dialogue dt, #dialogue dd {list-style:none; display:block;margin:0 0 0.5em 0; padding:0; font-family:sans-serif}
#dialogue dl dt {color:white; font-size:2em; line-height:0.7em}
#dialogue dl dd {color:white; font-size:9em; opacity:0; line-height:0.8em}

JavaScript

vpW = $(window).width();
    vpH = $(window).height();

    function drawBlade() {
        var halfHeight = vpH / 2;
        var blades = [];
        var topcanvas = document.createElement("canvas");
        var bottomcanvas = document.createElement("canvas");
        topcanvas.width = vpW;
        bottomcanvas.width = vpW;
        topcanvas.height = vpH;
        bottomcanvas.height = vpH;
        topcanvas.id = "topcanvas";
        bottomcanvas.id = "bottomcanvas";

        var blade1 = topcanvas.getContext('2d');
        blade1.fillStyle = "#000";
        blade1.beginPath();
        blade1.moveTo(0, 0); // topleft
        blade1.lineTo(vpW, 0); //topright
        blade1.lineTo(vpW, halfHeight / 2.0); //right, quarterway down
        blade1.lineTo(0, halfHeight + halfHeight / 2.0); //left, threequarters down
        blade1.closePath();
        blade1.fill();

        var blade2 = bottomcanvas.getContext('2d');
        blade2.fillStyle = "#000";
        blade2.beginPath();
        blade2.moveTo(0, vpH); // topleft
        blade2.lineTo(vpW, vpH); //topright
        blade2.lineTo(vpW, halfHeight - (halfHeight / 2.0)); //right, quarterway down
        blade2.lineTo(0, halfHeight + halfHeight / 2.0); //left, threequarters down
        blade2.closePath();
        blade2.fill();

        $(topcanvas).css({
            'position': 'absolute',
            'zIndex': 100
        });
        $(bottomcanvas).css({
            'position': 'absolute',
            'zIndex': 100
        });
        $(topcanvas).prependTo('body');
        $(bottomcanvas).prependTo('body');
    }

    var animScenes = animScenes || {};
    animScenes = {
        topBlade: $('#topcanvas'),
        botBlade: $('#bottomcanvas'),
        dialogue: $('#dialogue'),
        message: $('#message'),
        cover: $('#cover'),
        dls: $('#dialogue dl dd'),
        setupScene: function() {
            this.dialogue.show();
            drawBlade();
            this.triggerScene1();
        },
       ...