diff --git a/src/app/fear/scene-components/finale-text.css b/src/app/fear/scene-components/finale-text.css index 590f904..43a66d4 100644 --- a/src/app/fear/scene-components/finale-text.css +++ b/src/app/fear/scene-components/finale-text.css @@ -19,11 +19,39 @@ justify-content: center; overflow: hidden; + /* filter: invert(100%); */ + backdrop-filter: brightness(100%); + grid-auto-rows: 5vh; /* grid-template-columns: 0; */ grid-template-rows: repeat(auto-fit, max-content); user-select: none; + + will-change: filter; + animation: invertFlicker 0.07s infinite alternate; + +} + +@keyframes invertFlicker { + + 0%, + 43%, + 45%, + 88%, + 92% { + filter: invert(0%) contrast(100%) brightness(100%); + backdrop-filter: brightness(100%) hue-rotate(0deg); + } + + 44%, + 46%, + 89%, + 93%, + 100% { + filter: invert(100%) contrast(300%) brightness(150%); + backdrop-filter: brightness(30%) hue-rotate(180deg) saturate(500%); + } } .finale-text {