Skip to content

Commit b511ad0

Browse files
afk-anantafk-anant
authored
add Glitch Matrix (#3256)
1 parent 5a12b42 commit b511ad0

3 files changed

Lines changed: 160 additions & 0 deletions

File tree

‎Art/afk-anant-Glitch-Matrix/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Glitch Matrix</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="matrix-container">
11+
<div class="glitch-text" data-text="MATRIX">MATRIX</div>
12+
<div class="matrix-lines">
13+
<div class="line"></div>
14+
<div class="line"></div>
15+
<div class="line"></div>
16+
<div class="line"></div>
17+
<div class="line"></div>
18+
<div class="line"></div>
19+
<div class="line"></div>
20+
<div class="line"></div>
21+
</div>
22+
</div>
23+
</body>
24+
</html>

‎Art/afk-anant-Glitch-Matrix/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "glitchmatrix",
3+
"githubHandle": "afk-anant"
4+
}

‎Art/afk-anant-Glitch-Matrix/styles.css‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
min-height: 100vh;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
background: #000;
13+
overflow: hidden;
14+
}
15+
16+
.matrix-container {
17+
position: relative;
18+
width: 100%;
19+
height: 100vh;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
}
24+
25+
.glitch-text {
26+
font-size: 120px;
27+
font-weight: bold;
28+
color: #00ff41;
29+
font-family: monospace;
30+
position: relative;
31+
text-shadow: 0 0 10px #00ff41;
32+
animation: glitch 1s infinite;
33+
}
34+
35+
.glitch-text::before,
36+
.glitch-text::after {
37+
content: attr(data-text);
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
width: 100%;
42+
height: 100%;
43+
}
44+
45+
.glitch-text::before {
46+
animation: glitchTop 1.5s infinite;
47+
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
48+
color: #ff00ff;
49+
}
50+
51+
.glitch-text::after {
52+
animation: glitchBottom 1.3s infinite;
53+
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
54+
color: #00ffff;
55+
}
56+
57+
.matrix-lines {
58+
position: absolute;
59+
width: 100%;
60+
height: 100%;
61+
pointer-events: none;
62+
}
63+
64+
.line {
65+
position: absolute;
66+
width: 2px;
67+
height: 100%;
68+
background: linear-gradient(transparent, #00ff41, transparent);
69+
animation: rain 3s linear infinite;
70+
}
71+
72+
.line:nth-child(1) { left: 10%; animation-delay: 0s; }
73+
.line:nth-child(2) { left: 20%; animation-delay: 0.5s; }
74+
.line:nth-child(3) { left: 35%; animation-delay: 1s; }
75+
.line:nth-child(4) { left: 50%; animation-delay: 1.5s; }
76+
.line:nth-child(5) { left: 65%; animation-delay: 0.8s; }
77+
.line:nth-child(6) { left: 75%; animation-delay: 2s; }
78+
.line:nth-child(7) { left: 85%; animation-delay: 1.2s; }
79+
.line:nth-child(8) { left: 95%; animation-delay: 0.3s; }
80+
81+
@keyframes glitch {
82+
0%, 90%, 100% {
83+
transform: translate(0);
84+
}
85+
92% {
86+
transform: translate(-5px, 5px);
87+
}
88+
94% {
89+
transform: translate(5px, -5px);
90+
}
91+
96% {
92+
transform: translate(-5px, -5px);
93+
}
94+
}
95+
96+
@keyframes glitchTop {
97+
0%, 90%, 100% {
98+
transform: translate(0);
99+
}
100+
92% {
101+
transform: translate(-8px, -5px);
102+
}
103+
96% {
104+
transform: translate(8px, 5px);
105+
}
106+
}
107+
108+
@keyframes glitchBottom {
109+
0%, 90%, 100% {
110+
transform: translate(0);
111+
}
112+
93% {
113+
transform: translate(8px, 5px);
114+
}
115+
97% {
116+
transform: translate(-8px, -5px);
117+
}
118+
}
119+
120+
@keyframes rain {
121+
0% {
122+
transform: translateY(-100%);
123+
opacity: 0;
124+
}
125+
50% {
126+
opacity: 1;
127+
}
128+
100% {
129+
transform: translateY(100vh);
130+
opacity: 0;
131+
}
132+
}

0 commit comments

Comments
 (0)