@johnn-e/react-glitch-text/dist/esm/components/GlitchText.js

Creates a glitch text effect for any text element

import { __assign, __makeTemplateObject } from "tslib";
import React from 'react';
import styled, { keyframes } from 'styled-components';
var blink = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    87%, 95% {\n        color: transparent;\n    }\n"], ["\n    87%, 95% {\n        color: transparent;\n    }\n"])));
var wobble = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    0%, 84%, 94% {\n        transform: skew(0deg);\n    }\n    85% {\n        transform: skew(5deg);\n    }\n    90% {\n        transform: skew(-5deg);\n    }\n    98% {\n        transform: skew(3deg);\n    }\n"], ["\n    0%, 84%, 94% {\n        transform: skew(0deg);\n    }\n    85% {\n        transform: skew(5deg);\n    }\n    90% {\n        transform: skew(-5deg);\n    }\n    98% {\n        transform: skew(3deg);\n    }\n"])));
var leftShift = keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    0%, 87%, 100% {\n        transform: translate(0, 0) skew(0deg);\n    }\n    84%, 90% {\n        transform: translate(-8px, 0) skew(20deg);\n    }\n"], ["\n    0%, 87%, 100% {\n        transform: translate(0, 0) skew(0deg);\n    }\n    84%, 90% {\n        transform: translate(-8px, 0) skew(20deg);\n    }\n"])));
var rightShift = keyframes(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    0%, 87%, 100% {\n        transform: translate(0, 0) skew(0deg);\n    }\n    84%, 90% {\n        transform: translate(8px, 0) skew(20deg);\n    }\n"], ["\n    0%, 87%, 100% {\n        transform: translate(0, 0) skew(0deg);\n    }\n    84%, 90% {\n        transform: translate(8px, 0) skew(20deg);\n    }\n"])));
var GlitchTextWrapper = styled.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    z-index: 2;\n    position: relative;\n    animation: ", " 1.3s infinite steps(1);\n\n    &:before,\n    &:after {\n        content: '", "';\n        position: absolute;\n        left: 0;\n        mix-blend-mode: soft-light;\n        animation: ", " 2s infinite steps(2);\n    }\n\n    &:before {\n        clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);\n        color: ", ";\n        animation: ", " 200ms steps(2) infinite;\n    }\n\n    &:after {\n        clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);\n        color: ", ";\n        animation: ", " 200ms steps(2) infinite;\n    }\n"], ["\n    z-index: 2;\n    position: relative;\n    animation: ", " 1.3s infinite steps(1);\n\n    &:before,\n    &:after {\n        content: '", "';\n        position: absolute;\n        left: 0;\n        mix-blend-mode: soft-light;\n        animation: ", " 2s infinite steps(2);\n    }\n\n    &:before {\n        clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);\n        color: ", ";\n        animation: ", " 200ms steps(2) infinite;\n    }\n\n    &:after {\n        clip-path: polygon(0 100%, 100% 100%, 100% 50%, 0 50%);\n        color: ", ";\n        animation: ", " 200ms steps(2) infinite;\n    }\n"])), blink, function (props) { return props.$text; }, wobble, function (props) { return props.$colorA || '#f0f'; }, rightShift, function (props) { return props.$colorB || '#0ff'; }, leftShift);
var GlitchText = function (props) {
    return React.createElement(GlitchTextWrapper, __assign({}, props), props.$text);
};
export default GlitchText;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=GlitchText.js.map