aboutsummaryrefslogtreecommitdiff
path: root/static/@solitude/css/welcome/glitch.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/@solitude/css/welcome/glitch.css')
-rw-r--r--static/@solitude/css/welcome/glitch.css574
1 files changed, 574 insertions, 0 deletions
diff --git a/static/@solitude/css/welcome/glitch.css b/static/@solitude/css/welcome/glitch.css
new file mode 100644
index 00000000..6b8c8987
--- /dev/null
+++ b/static/@solitude/css/welcome/glitch.css
@@ -0,0 +1,574 @@
+.glitch {
+ position: relative;
+ color: #fff;
+ font-size: 10rem;
+ font-family: "Share", cursive;
+}
+
+.line:not(:first-child) {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.line:nth-child(1) {
+ -webkit-animation: clip 3000ms -300ms linear infinite,
+ glitch1 500ms -80ms linear infinite;
+ animation: clip 3000ms -300ms linear infinite,
+ glitch1 500ms -80ms linear infinite;
+}
+@-webkit-keyframes glitch1 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(4px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(5px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(0px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+@keyframes glitch1 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(4px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(5px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(0px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+.line:nth-child(2) {
+ -webkit-animation: clip 3000ms -600ms linear infinite,
+ glitch2 500ms -433ms linear infinite;
+ animation: clip 3000ms -600ms linear infinite,
+ glitch2 500ms -433ms linear infinite;
+}
+@-webkit-keyframes glitch2 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(3px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-3px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(4px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+@keyframes glitch2 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(3px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-3px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(4px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+.line:nth-child(3) {
+ -webkit-animation: clip 3000ms -900ms linear infinite,
+ glitch3 500ms -664ms linear infinite;
+ animation: clip 3000ms -900ms linear infinite,
+ glitch3 500ms -664ms linear infinite;
+}
+@-webkit-keyframes glitch3 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(4px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(5px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(-2px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+@keyframes glitch3 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(4px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(5px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(-2px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+.line:nth-child(4) {
+ -webkit-animation: clip 3000ms -1200ms linear infinite,
+ glitch4 500ms -276ms linear infinite;
+ animation: clip 3000ms -1200ms linear infinite,
+ glitch4 500ms -276ms linear infinite;
+}
+@-webkit-keyframes glitch4 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(-3px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(2px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(-2px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+@keyframes glitch4 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(-3px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(2px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(-2px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+.line:nth-child(5) {
+ -webkit-animation: clip 3000ms -1500ms linear infinite,
+ glitch5 500ms -180ms linear infinite;
+ animation: clip 3000ms -1500ms linear infinite,
+ glitch5 500ms -180ms linear infinite;
+}
+@-webkit-keyframes glitch5 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(-2px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-4px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(2px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+@keyframes glitch5 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(-2px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-4px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(2px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+.line:nth-child(6) {
+ -webkit-animation: clip 3000ms -1800ms linear infinite,
+ glitch6 500ms -954ms linear infinite;
+ animation: clip 3000ms -1800ms linear infinite,
+ glitch6 500ms -954ms linear infinite;
+}
+@-webkit-keyframes glitch6 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(-3px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-4px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(1px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+@keyframes glitch6 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(-3px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-4px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(1px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+.line:nth-child(7) {
+ -webkit-animation: clip 3000ms -2100ms linear infinite,
+ glitch7 500ms -377ms linear infinite;
+ animation: clip 3000ms -2100ms linear infinite,
+ glitch7 500ms -377ms linear infinite;
+}
+@-webkit-keyframes glitch7 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(2px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-1px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(-1px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+@keyframes glitch7 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(2px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-1px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(-1px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+.line:nth-child(8) {
+ -webkit-animation: clip 3000ms -2400ms linear infinite,
+ glitch8 500ms -104ms linear infinite;
+ animation: clip 3000ms -2400ms linear infinite,
+ glitch8 500ms -104ms linear infinite;
+}
+@-webkit-keyframes glitch8 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(1px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-2px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(4px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+@keyframes glitch8 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(1px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-2px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(4px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+.line:nth-child(9) {
+ -webkit-animation: clip 3000ms -2700ms linear infinite,
+ glitch9 500ms -606ms linear infinite;
+ animation: clip 3000ms -2700ms linear infinite,
+ glitch9 500ms -606ms linear infinite;
+}
+@-webkit-keyframes glitch9 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(1px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-4px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(2px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+@keyframes glitch9 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(1px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(-4px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(2px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+.line:nth-child(10) {
+ -webkit-animation: clip 3000ms -3000ms linear infinite,
+ glitch10 500ms -560ms linear infinite;
+ animation: clip 3000ms -3000ms linear infinite,
+ glitch10 500ms -560ms linear infinite;
+}
+@-webkit-keyframes glitch10 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(-1px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(1px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(1px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+@keyframes glitch10 {
+ 0% {
+ transform: translateX(0);
+ }
+ 80% {
+ transform: translateX(0);
+ color: #fff;
+ }
+ 85% {
+ transform: translateX(-1px);
+ color: #4e9a26;
+ }
+ 90% {
+ transform: translateX(1px);
+ color: #ac1212;
+ }
+ 95% {
+ transform: translateX(1px);
+ color: #fff;
+ }
+ 100% {
+ transform: translateX(0);
+ }
+}
+
+@-webkit-keyframes clip {
+ 0% {
+ -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
+ clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
+ }
+ 100% {
+ -webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
+ clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
+ }
+}
+
+@keyframes clip {
+ 0% {
+ -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
+ clip-path: polygon(0 100%, 100% 100%, 100% 120%, 0 120%);
+ }
+ 100% {
+ -webkit-clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
+ clip-path: polygon(0 -20%, 100% -20%, 100% 0%, 0 0);
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 02:51:53 +0000