JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<header role="banner">
    <h1 class="disco">disco</h1>
</header>

CSS

html { 
    font-size: 6.25%; 
    height: 100%;
}

body { 
    font-size: 16px; font-size: 16rem;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-animation-name: disco;
    -webkit-animation-duration: 24s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
}

header { margin: 0 5% }

.disco{
    width: 100%;
    margin-top: 10%;
    text-transform: uppercase;
    letter-spacing: -.25rem;
    text-align: center; 
    font: 300rem "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 900;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(10,10,10,1)), color-stop(50%,rgba(201,202,203,1)), color-stop(100%,rgba(10,10,10,1)));
    background: -webkit-linear-gradient(left, rgba(10,10,10,1) 0%,rgba(201,202,203,1) 50%,rgba(10,10,10,1) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-animation-name: masked-animation;
    -webkit-animation-duration: 12s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: both;
    background-size: 7050px 500px;
    }
    
@-webkit-keyframes masked-animation {
    0% {background-position: left;}
    50% {background-position: right;}
    100% {background-position: left;}
    }

@-webkit-keyframes disco {
    0% {
background: black;
        }
    50% {
background: white;
        }
    100% {
background: black;
        }
    }


@-webkit-keyframes dance1 { 


}

.char1,.char2,.char3,.char4,.char5{}

JavaScript

/* work in progress. the animation is going to take a long time to code. */
/*    
* Lettering.JS 0.6.1 Copyright 2010, Dave Rupert http://daverupert.com
* FitText.js 1.0 Copyright 2011, Dave Rupert http://daverupert.com
*/
(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);(function($){$.fn.fitText=function(kompressor){return this.each(function(){var $this=$(this);var origFontSize=parseFloat($this.css('font-size'));var compressor=kompressor||1;var resizer=function(){$this.css('font-size',Math.min($this.width()/(compressor*10),origFontSize))};resizer();$(window).resize(resizer)})}})(jQuery);


$(".disco").lettering().fitText(.5);