Skip to content

Commit a1c6646

Browse files
MohitSingh250MohitSingh250
authored
Aurora Threads (#3243)
1 parent 6ba1351 commit a1c6646

3 files changed

Lines changed: 103 additions & 0 deletions

File tree

‎Art/MohitSingh250-AuroraThreads/index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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>Aurora Threads</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="aurora">
11+
<div class="thread t1"></div>
12+
<div class="thread t2"></div>
13+
<div class="thread t3"></div>
14+
<div class="thread t4"></div>
15+
</div>
16+
</body>
17+
</html>

‎Art/MohitSingh250-AuroraThreads/meta.json‎

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

‎Art/MohitSingh250-AuroraThreads/styles.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background: radial-gradient(circle at bottom, #020024, #000 90%);
9+
overflow: hidden;
10+
height: 100vh;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
16+
.aurora {
17+
position: relative;
18+
width: 100vw;
19+
height: 100vh;
20+
overflow: hidden;
21+
}
22+
23+
/* Base thread styling */
24+
.thread {
25+
position: absolute;
26+
width: 200%;
27+
height: 400px;
28+
filter: blur(80px);
29+
opacity: 0.8;
30+
animation: flow 12s ease-in-out infinite alternate;
31+
background-size: 300% 300%;
32+
mix-blend-mode: screen;
33+
}
34+
35+
/* Different aurora color gradients */
36+
.t1 {
37+
top: 20%;
38+
background: linear-gradient(120deg, #00ffff, #00ff99, #0066ff);
39+
animation-delay: 0s;
40+
}
41+
.t2 {
42+
top: 40%;
43+
background: linear-gradient(120deg, #ff00ff, #ff0080, #8000ff);
44+
animation-delay: 3s;
45+
}
46+
.t3 {
47+
top: 60%;
48+
background: linear-gradient(120deg, #ff6600, #ffff00, #ff3300);
49+
animation-delay: 1.5s;
50+
}
51+
.t4 {
52+
top: 80%;
53+
background: linear-gradient(120deg, #00ffcc, #00ffff, #33ccff);
54+
animation-delay: 2s;
55+
}
56+
57+
/* Animation for shifting aurora movement */
58+
@keyframes flow {
59+
0% {
60+
transform: translateX(-50%) rotate(0deg);
61+
background-position: 0% 50%;
62+
}
63+
50% {
64+
transform: translateX(0%) rotate(2deg);
65+
background-position: 100% 50%;
66+
}
67+
100% {
68+
transform: translateX(50%) rotate(-2deg);
69+
background-position: 0% 50%;
70+
}
71+
}
72+
73+
/* Add subtle shimmer overlay */
74+
.aurora::after {
75+
content: "";
76+
position: absolute;
77+
width: 100%;
78+
height: 100%;
79+
background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
80+
mix-blend-mode: overlay;
81+
pointer-events: none;
82+
}

0 commit comments

Comments
 (0)