postcss-glitch

Glitch effect implemented with PostCSS. With this plugin you can easily add glitch effect to any text!

Check out our demo page (source)

Installation

yarn add postcss-glitch

You can use .postcssrc.js to add plugin to your project just like this:

// postcss.config.js.js
 
module.exports = {
    plugins: {
        'postcss-import': {},
        'postcss-glitch': {},
        'postcss-url': {},
        autoprefixer: {},
    },
};

Usage

TL;DR

.foo {
  glitch: <height in px | pt | % | em | rem > <first color> <second color> <shadow size>;
}

Guide

1. Create a positioned element

<div class="wrapper"></div>

.wrapper {
    position: relative;
}

1. Create element which you want to apply glitch effect

<div class="wrapper">
    <div class="glitch">PostCSS Glitch</div>
</div>

1. Add data-text attribute to the last created element

<div class="wrapper">
    <div class="glitch" data-text="PostCSS Glitch">PostCSS Glitch</div>
</div>

.wrapper {
    position: relative;
}
.glitch {
    font-weight: 700;
    font-size: 23pt;
    glitch: 42px #f00 #00f 2px;
}

What actually happens?

.glitch {
    font-weight: 700;
    font-size: 23pt;
    glitch: 42px #f00 #00f 2px;
}

transforms to

@keyframes glitch-animation-before {
    0% {
        clip-path: inset(5px 0 32px 0);
    }
    25% {
        clip-path: inset(14px 0 23px 0);
    }
    50% {
        clip-path: inset(15px 0 22px 0);
    }
    75% {
        clip-path: inset(11px 0 26px 0);
    }
    to {
        clip-path: inset(18px 0 19px 0);
    }
}
 
@keyframes glitch-animation-after {
    0% {
        clip-path: inset(20px 0 17px 0);
    }
    25% {
        clip-path: inset(37px 0 0 0);
    }
    50% {
        clip-path: inset(16px 0 21px 0);
    }
    75% {
        clip-path: inset(20px 0 17px 0);
    }
    to {
        clip-path: inset(17px 0 20px 0);
    }
}
 
.wrapper {
    position: relative;
}
 
.glitch {
    font-weight: 700;
    font-size: 23pt;
}
 
.glitch:after,
.glitch:before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    clip-path: inset(42px 0 0 0);
}
 
.glitch:before {
    text-shadow: -2px 0 #f00;
    animation: glitch-animation-before 3s infinite linear alternate-reverse;
}
 
.glitch:after {
    text-shadow: 2px 0 #00f;
    animation: glitch-animation-after 2s infinite linear alternate-reverse;
}

And yeah it also works with CSSModules!

Testing

There are 2 major groups of tests in this project:

• Tests that are running against source code powered with jest

# running jest in the watch mode 
yarn workspace postcss-glitch jest
 
# or alternatively run it without watch mode as it runs on CI server 
yarn workspace postcss-glitch test

If you're having difficulties with running in watch mode see the installation guide

• End-to-end tests powered with cypress

# opening cypress 
yarn workspace postcss-glitch cypress open
 
# running cypress in headless mode 
yarn workspace postcss-glitch cypress run

Make sure the page under test is up and running at http://localhost:1234 before opening cypress.

Please respect our tests and make sure that any new behaviour or any change to the existing behaviour is properly reflected in tests.