Glitch text effect

glitch-text.vue

<script>
	export default {
		props: { value: String },
		data: () => ({
			clipBefore: [0, 0],
			clipAfter: [0, 0],
			skew: false
		}),
		methods: {
			randomizeClip() {
				const max = this.$el.clientHeight;
				function gen() {
					if (Math.random() > 0.7) return [0, 0];
					const start = Math.round(Math.random() * max);
					return [start, Math.round(Math.random() * (max - start)) + start];
				}
				this.clipBefore = gen();
				this.clipAfter = gen();
				this.skew = Math.random() > 0.9;
			}
		},
		mounted() {
			this._interval = setInterval(this.randomizeClip, 300);
		},
		beforeDestroy() {
			clearInterval(this._interval);
		}
	};
</script>
<template lang="pug">
	span(:data-glitch="value" :style="{ '--clip-before': clipBefore[0] + 'px', '--clip-after': clipAfter[0] + 'px', '--clip-before2': clipBefore[1] + 'px', '--clip-after2': clipAfter[1] + 'px', transform: skew ? 'skew(-4deg)' : null }") {{ value }}
</template>
<style lang="stylus">
	[data-glitch]
		position relative
		display block
		&:before, &:after
			content attr(data-glitch)
			absolute 0
			transition clip 0.25s linear
			overflow hidden
			background black
		&:before
			transform translateX(-1px)
			clip rect(var(--clip-before), auto, var(--clip-before2), auto)
			text-shadow -1px 0 red
		&:after
			transform translateX(1px)
			clip rect(var(--clip-after), auto, var(--clip-after2), auto)
			text-shadow 1px 0 blue
</style>