@tasteink/glitch-styles

Easily add glitch effects to your app.

Usage no npm install needed!

<script type="module">
  import tasteinkGlitchStyles from 'https://cdn.skypack.dev/@tasteink/glitch-styles';
</script>

README

Taste Ink Logo

@tasteink/glitch-styles

Easily add subtle glitch effects to your app.

demo | npm package | glitch design

NOTE: Not ready for usage yet. Hang tight.

  1. Install it.
yarn add @tasteink/glitch-styles
  1. Add the following CSS variables, tuned to your liking.
:root {
  --glitch-vertical-offset-left: -0px;
  --glitch-vertical-offset-right: 0px;
  --glitch-left-width: -2px;
  --glitch-right-width: 2px;
  --glitch-color-0: #10f6be;
  --glitch-color-1: #ff51ce;
  --glitch-blur: 1px;
}
  1. Import the css file from @tastink/glitch-styles.
<link rel="stylesheet" href="/path/to/@tastink/glitch-styles.css" />
  1. Use the provided class names.
<div class="boxGlitch">...</div>
<p class="textGlitch">...</p>
  1. Get this kind of effect:
Glitch effect sample