postcss-glitch

PostCSS plugin for glitch effect


Keywords
css, postcss, postcss-plugin, glitch, effect, animation, postcss-glitch
License
MIT
Install
npm install postcss-glitch@3.2.38

Documentation

postcss-glitch

CircleCI

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

animation

Check out our demo page (source)


This is a monorepo for a PostCSS Glitch project. It contains both plugin source code and various demo projects that use the plugin.

Working with the repo

NOTE: The following documentation describes how to work with this repo. You can find plugin documentation here.

Also, take a look at demos directory if you are looking for working examples of how to use postcss-glitch plugin.

Pre-requirements

It's recommended to use nvm to manage Node versions

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

NodeJS

nvm install 14 && nvm use 14

Yarn

npm i -g yarn

Since this repo is using Zero-Installs no further setup is required.

Workspaces

This project is a monorepo containing multiple projects a.k.a workspaces. Workspaces are defined in the root package.json. Here we have a workspace under plugin directory, additionally each directory under demos is also considered a workspace.

{
    "workspaces": [
        "plugin",
        "demos/*"
      ]
}

This allows, for example, to install all the dependencies at once for both plugin and all of the demo projects while running yarn install in the root folder.

You can learn more about managing monorepo with yarn workspaces in the documentation.

Install dependencies

yarn install

Please add everything created under .yarn directory to git as Zero-Installs requires.

git add .yarn

Contributing

If you want to start contributing to this project, please read the CONTRIBUTING.md.