Skip to content

Commit 536fe11

Browse files
byby-incbyby-inc
committed
dopamine decay
1 parent 12bd939 commit 536fe11

File tree

2 files changed

+143
-1
lines changed

2 files changed

+143
-1
lines changed

‎README.md

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

231231
<a href="./algorithm-anxiety.html">Algorithm anxiety</a> <br/><br/>
232232

233-
<a href="./the-imposter-syndrome-showcase.html">The imposter syndrome showcase</a> <br/><br/>
233+
<a href="./the-imposter-syndrome-showcase.html">The imposter syndrome showcase</a> <br/><br/><a href="./dopamine-decay.html">Dopamine decay</a> <br/><br/>

‎dopamine-decay.html

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
```html
2+
<!DOCTYPE html>
3+
<html lang="pt-BR">
4+
<head>
5+
<style>
6+
* {
7+
margin: 0;
8+
padding: 0;
9+
box-sizing: border-box;
10+
}
11+
body {
12+
background-color: #1C2737;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
height: 100vh;
17+
overflow: hidden;
18+
}
19+
.codigo {
20+
position: absolute;
21+
top: 0;
22+
left: 50%;
23+
transform: translateX(-50%);
24+
background: #272822;
25+
color: #F8F8F2;
26+
font-family: 'Consolas', 'Monaco', monospace;
27+
font-size: 18px;
28+
padding: 20px;
29+
border-radius: 8px;
30+
white-space: pre-line;
31+
text-align: left;
32+
line-height: 1.6;
33+
max-height: 50%;
34+
width: 100%;
35+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
36+
}
37+
.selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; }
38+
.animation-container {
39+
position: absolute;
40+
top: 75%;
41+
left: 50%;
42+
transform: translate(-50%, -50%);
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
46+
width: 100%;
47+
height: 50%;
48+
overflow: hidden;
49+
background:transparent;
50+
}
51+
52+
.container__1 {
53+
54+
position: relative;
55+
width: 200px;
56+
height: 200px;
57+
animation: dopamine__decay 8s linear infinite;
58+
}
59+
60+
@keyframes dopamine__decay {
61+
0% {
62+
filter: blur(0px); /* Começando nítido, como um pico de prazer */
63+
}
64+
25% {
65+
filter: blur(10px); /* Aumenta a névoa, simbolizando o começo da decadência */
66+
}
67+
50% {
68+
filter: blur(15px); /* Intensifica o efeito de desfoque */
69+
}
70+
71+
75% {
72+
filter: blur(20px); /* A distorção se torna mais visível */
73+
}
74+
100% {
75+
filter: blur(30px); /* Perda completa da nitidez, representando o vazio */
76+
}
77+
}
78+
79+
80+
81+
.gradient {
82+
width: 100%;
83+
height: 100%;
84+
background: linear-gradient(to bottom, #C72C41 0%, #FDB61C 50%, #00D9C4 100%); /* Gradiente simulado de emoção */
85+
position: absolute;
86+
left: 0;
87+
top: 0;
88+
pointer-events: none; /* Permitir interação com elementos por trás */
89+
}
90+
91+
.element__1 {
92+
position: absolute;
93+
top: 50%;
94+
left: 50%;
95+
transform: translate(-50%, -50%);
96+
width: 80px;
97+
height: 80px;
98+
background: #BF0000;
99+
border: 4px solid transparent;
100+
border-radius: 50%;
101+
animation: pulse 2.5s cubic-bezier(0.8, 0.4, 0.2, 1) infinite;
102+
}
103+
104+
105+
@keyframes pulse {
106+
0% {
107+
transform: scale(1);
108+
box-shadow: 0 0 12px rgba(255, 0, 0, 0.4);
109+
}
110+
50% {
111+
transform: scale(1.1);
112+
box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
113+
}
114+
100% {
115+
transform: scale(1);
116+
box-shadow: 0 0 12px rgba(255, 0, 0, 0.4);
117+
}
118+
}
119+
</style>
120+
</head>
121+
<body>
122+
<div class="codigo">
123+
<span class="selector">/* Gradiente de emissão de dopamina, */</span>
124+
<span class="property">background </span>
125+
<span class="value-string">linear-gradient(to bottom,</span> <span class="value-string">#C72C41</span> <span class="value-number">0%</span><span class="value-number">,</span> <span class="value-string">#FDB61C</span> <span class="value-number">50%</span><span class="value-number">,</span> <span class="value-string">#00D9C4</span> <span class="value-number">100%</span><span class="value-string">)</span>;
126+
127+
/* */
128+
</div>
129+
130+
<div class="animation-container">
131+
<div class="container__1">
132+
<div class="gradient"></div>
133+
<div class="element__1"></div>
134+
</div>
135+
136+
</div>
137+
138+
139+
</body>
140+
</html>
141+
142+
```

0 commit comments

Comments
 (0)