Skip to content

Commit 08a6a84

Browse files
byby-incbyby-inc
committed
burnout symphony
1 parent 18d8b4f commit 08a6a84

File tree

2 files changed

+182
-1
lines changed

2 files changed

+182
-1
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -188,4 +188,4 @@ Feel free to contribute to this repository.
188188

189189
<a href="./tab-overload.html">Tab overload</a> <br/><br/><a href="./scroll-paralysis-protocol.html">Scroll paralysis protocol</a> <br/><br/>
190190

191-
<a href="./tutorial-trap.html">Tutorial trap</a> <br/><br/>
191+
<a href="./tutorial-trap.html">Tutorial trap</a> <br/><br/><a href="./burnout-symphony.html">Burnout symphony</a> <br/><br/>

‎burnout-symphony.html

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
```html
2+
<!DOCTYPE html>
3+
<html lang="pt-BR">
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Burnout Symphony</title>
7+
<style>
8+
* {
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: border-box;
12+
}
13+
body {
14+
background-color: #000;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
height: 100vh;
19+
overflow: hidden;
20+
}
21+
.codigo {
22+
position: absolute;
23+
top: 0;
24+
left: 50%;
25+
transform: translateX(-50%);
26+
background: #272822;
27+
color: #F8F8F2;
28+
font-family: 'Consolas', 'Monaco', monospace;
29+
font-size: 18px;
30+
padding: 20px;
31+
border-radius: 8px;
32+
white-space: pre-line;
33+
text-align: left;
34+
line-height: 1.6;
35+
max-height: 50%;
36+
width: 100%;
37+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
38+
}
39+
.selector { color: #F92672; }
40+
.property { color: #66D9EF; }
41+
.value-number { color: #AE81FF; }
42+
.value-string { color: #E6DB74; }
43+
.value-color { color: #A6E22E; }
44+
.brace { color: #F8F8F2; }
45+
.comment { color: #75715E; }
46+
.function { color: #A6E22E; }
47+
48+
.animation-container {
49+
position: absolute;
50+
top: 50%;
51+
left: 50%;
52+
transform: translate(-50%, -50%);
53+
display: flex;
54+
align-items: center;
55+
justify-content: center;
56+
width: 100%;
57+
height: 50%;
58+
overflow: hidden;
59+
background-color: #000;
60+
}
61+
62+
.shape {
63+
position: absolute;
64+
width: 300px;
65+
height: 300px;
66+
border-radius: 50%;
67+
opacity: 0;
68+
animation: burnout 10s infinite linear;
69+
}
70+
.shape:nth-child(1) {
71+
background-color: #ff5733; /* Cor inicial - Enérgica */
72+
}
73+
.shape:nth-child(2) {
74+
background-color: #ff9800; /* Cor em mudança - Diminuição da energia */
75+
}
76+
.shape:nth-child(3) {
77+
background-color: #00e676; /* Cor de calma - Esgotamento */
78+
}
79+
80+
@keyframes burnout {
81+
0% {
82+
opacity: 0;
83+
transform: scale(0);
84+
}
85+
20% {
86+
opacity: 1;
87+
transform: scale(1.2);
88+
}
89+
40% {
90+
opacity: 0.8;
91+
transform: scale(1);
92+
}
93+
60% {
94+
opacity: 0.6;
95+
transform: scale(0.8);
96+
}
97+
80% {
98+
opacity: 0.4;
99+
transform: scale(1);
100+
}
101+
100% {
102+
opacity: 0;
103+
transform: scale(0.2);
104+
}
105+
}
106+
107+
108+
109+
</style>
110+
</head>
111+
<body>
112+
<div class="codigo">
113+
<span class="selector">.shape</span>
114+
<span class="property">animation</span>
115+
<span class="value-string">burnout</span>
116+
<span class="property">10s</span>
117+
<span class="value-string">infinite</span>
118+
<span class="value-string">linear</span> ; <br>
119+
</div>
120+
<div class="animation-container">
121+
<div class="shape"></div>
122+
<div class="shape"></div>
123+
<div class="shape"></div>
124+
</div>
125+
</body>
126+
</html>
127+
```
128+
129+
130+
131+
Thought:
132+
133+
134+
135+
I crafted an animation titled "Burnout Symphony" that visually portrays the emotional and mental exhaustion associated with burnout. Using shape color transformations, it demonstrates the gradual draining of energy and motivation.
136+
137+
**Psychological Concept Explanation:**
138+
The animation visualizes the progression of burnout.
139+
140+
* **Initial Stage (Red Shape):**
141+
- Start with a vibrant red, symbolizing high energy, passion, and drive.
142+
143+
* **Transition Stage (Yellow Shape):**
144+
- As burnout sets in, the red transitions into a yellow, indicating a decline in energy and a flicker of unease.
145+
- The scale increases slightly, representing a possible push to keep going.
146+
147+
* **Final Stage (Green Shape - Complete Burnout):**
148+
- The yellow ultimately fades to green, signifying a depleted state.
149+
- The shapes shrink, visually representing the loss of motivation and a sense of becoming overwhelmed.
150+
151+
152+
The animation utilizes the following techniques:
153+
154+
155+
156+
**1. Color Transformation (Color Illusion):**
157+
158+
The gradual shift from red to yellow to green provides a visual representation of the psychological and emotional shift from energy to exhaustion.
159+
160+
161+
**2. Scale Animation (Amplified Visuals):**
162+
163+
- The initial scaling up emphasizes the effort to maintain momentum.
164+
- The subsequent shrinking visually portrays the depletion of resources and surrender to exhaustion.
165+
166+
**3. Opacity Manipulation:**
167+
- Fade-in and fade-out effects create a sense of gradual depletion and disappearance.
168+
169+
**4. Linear Timing:**
170+
The slow and steady animation mirrors the gradual nature of burnout and its cumulative effect.
171+
172+
**5. Repetition:**
173+
The `infinite` loop emphasizes the cycle of workload, stress, and exhaustion.
174+
175+
176+
177+
This animation aims to evoke a visceral understanding of what burnout feels like, going beyond mere words and tapping into the viewer's own experiences and emotions.
178+
179+
180+
181+

0 commit comments

Comments
 (0)