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

Creates a glitch text effect for any text element

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var styled_components_1 = tslib_1.__importStar(require("styled-components"));
var blink = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    87%, 95% {\n        color: transparent;\n    }\n"], ["\n    87%, 95% {\n        color: transparent;\n    }\n"])));
var wobble = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = tslib_1.__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 = (0, styled_components_1.keyframes)(templateObject_3 || (templateObject_3 = tslib_1.__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 = (0, styled_components_1.keyframes)(templateObject_4 || (templateObject_4 = tslib_1.__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_components_1.default.span(templateObject_5 || (templateObject_5 = tslib_1.__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_1.default.createElement(GlitchTextWrapper, tslib_1.__assign({}, props), props.$text);
};
exports.default = GlitchText;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=GlitchText.js.map