diff --git a/web/e.cash/components/glitch-text/index.js b/web/e.cash/components/glitch-text/index.js --- a/web/e.cash/components/glitch-text/index.js +++ b/web/e.cash/components/glitch-text/index.js @@ -6,8 +6,10 @@ export default function GlitchText({ text }) { return ( -
+
+
{text}
{text} +
{text}
); diff --git a/web/e.cash/components/glitch-text/styles.js b/web/e.cash/components/glitch-text/styles.js --- a/web/e.cash/components/glitch-text/styles.js +++ b/web/e.cash/components/glitch-text/styles.js @@ -11,28 +11,29 @@ position: relative; display: inline-block; } - .glitch::before, - .glitch::after { - content: attr(data-text); + .glitch_before, + .glitch_after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } - .glitch::before { + .glitch_before { left: 2px; text-shadow: -2px 0 ${props => props.theme.colors.accent}; clip: rect(24px, 550px, 90px, 0); - -webkit-animation: glitch-anim-2 2.5s infinite linear alternate-reverse; - animation: glitch-anim-2 2.5s infinite linear alternate-reverse; + animation: glitch-anim-2 + ${props => props.theme.filters.glitchAnimationSpeed} infinite linear + alternate-reverse; } - .glitch::after { + .glitch_after { left: -2px; text-shadow: -2px 0 ${props => props.theme.colors.primaryLight}; clip: rect(85px, 550px, 140px, 0); - -webkit-animation: glitch-anim 2.5s infinite linear alternate-reverse; - animation: glitch-anim 2.5s infinite linear alternate-reverse; + animation: glitch-anim + ${props => props.theme.filters.glitchAnimationSpeed} infinite linear + alternate-reverse; } @keyframes glitch-anim { diff --git a/web/e.cash/styles/theme.js b/web/e.cash/styles/theme.js --- a/web/e.cash/styles/theme.js +++ b/web/e.cash/styles/theme.js @@ -38,6 +38,7 @@ grayscale: null, videospeed: 1, animationspeed: 0.4, + glitchAnimationSpeed: '3s', }, breakpoint: { large: '@media (max-width: 1300px)', @@ -83,6 +84,7 @@ grayscale: 'filter: grayscale(100%);', videospeed: 0, animationspeed: 0, + glitchAnimationSpeed: '10s', }, breakpoint: { large: '@media (max-width: 1300px)',