1. 5

  2. 1

    dat text style. It both makes me sick and wet simultaneously. Please someone tell me how that is done / what JS lib are they using?

    1. 3

      What is is abstractly is RGB separation (or rather, CMY separation, which is the same but opposite, but RGB separation was a popular “wow” effect in the early days of video editing). The way they’re doing it is by putting each piece of text into four different divs with different colors (cyan, magenta, yellow, white), using CSS layer blending modes to make them interfere like that (the “multiply” blending mode is basically the equivalent of stacking colored filters in front of each other), a CSS skew transform to make everything crooked, and CSS transitions (type “linear”) to make them animate smoothly. Then a bit of JS comes in and gives each layer a random location to move towards, once every three seconds.

      There’s no JS lib at all, you can see the whole JS source in the head of the page, and it all fits on one screen if your font size isn’t too large. The CSS is similarly compact, it’s the part of styles.css from the .head declaration down to the .movable declaration, 13 blocks in total.