Skip to content

Commit 1923402

Browse files
byby-incbyby-inc
committed
flow state glitch
1 parent 7e98d7d commit 1923402

File tree

2 files changed

+119
-1
lines changed

2 files changed

+119
-1
lines changed

‎README.md

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

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

193-
<a href="./digital-deja-vu.html">Digital deja vu</a> <br/><br/><a href="./simulated-reality-shift.html">Simulated reality shift</a> <br/><br/><a href="./fear-of-missing-output.html">Fear of missing output</a> <br/><br/><a href="./the-overwhelm-algorithm.html">The overwhelm algorithm</a> <br/><br/><a href="./the-impostor-syndrome-matrix.html">The impostor syndrome matrix</a> <br/><br/><a href="./the-imposter-code.html">The imposter code</a> <br/><br/><a href="./the-blink-rate-dilemma.html">The blink rate dilemma</a> <br/><br/>
193+
<a href="./digital-deja-vu.html">Digital deja vu</a> <br/><br/><a href="./simulated-reality-shift.html">Simulated reality shift</a> <br/><br/><a href="./fear-of-missing-output.html">Fear of missing output</a> <br/><br/><a href="./the-overwhelm-algorithm.html">The overwhelm algorithm</a> <br/><br/><a href="./the-impostor-syndrome-matrix.html">The impostor syndrome matrix</a> <br/><br/><a href="./the-imposter-code.html">The imposter code</a> <br/><br/><a href="./the-blink-rate-dilemma.html">The blink rate dilemma</a> <br/><br/><a href="./flow-state-glitch.html">Flow state glitch</a> <br/><br/>

‎flow-state-glitch.html

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
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: #181F25;
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; }
38+
.property { color: #66D9EF; }
39+
.value-number { color: #AE81FF; }
40+
.value-string { color: #E6DB74; }
41+
.value-color { color: #A6E22E; }
42+
.brace { color: #F8F8F2; }
43+
.comment { color: #75715E; }
44+
.function { color: #A6E22E; }
45+
46+
.animation-container {
47+
position: absolute;
48+
top: 75%;
49+
left: 50%;
50+
transform: translate(-50%, -50%);
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
width: 100%;
55+
height: 50%;
56+
overflow: hidden;
57+
background:transparent;
58+
}
59+
.element {
60+
/* CSS animation specifics go here */
61+
position: absolute;
62+
width: 100px;
63+
height: 100px;
64+
65+
}
66+
67+
/* Example elements - change and add to your liking */
68+
.element:nth-child(1) {
69+
background: radial-gradient(circle, #0000cc, transparent);
70+
animation:pulse 1s infinite ease-in-out;
71+
}
72+
73+
@keyframes pulse {
74+
0% { transform: scale(1); }
75+
50% { transform: scale(1.1); }
76+
100% { transform: scale(1); }
77+
}
78+
79+
.element:nth-child(2) {
80+
background: linear-gradient(to right, #ff0000, #00ff00);
81+
animation:slide 2s infinite linear;
82+
}
83+
84+
@keyframes slide {
85+
0% { transform: translatey(0); }
86+
50% { transform: translatey(-50px); }
87+
100% { transform: translatey(0); }
88+
}
89+
90+
91+
</style>
92+
</head>
93+
<body>
94+
95+
<div class="codigo">
96+
.element {
97+
/* You can add more nested properties and selectors */
98+
background: linear-gradient(to bottom, #0077FF, #00F0FF);
99+
/* Cor de fundo que muda gradativamente */}
100+
101+
.element {
102+
filter: blur(1px);
103+
}
104+
</div>
105+
<div class="animation-container">
106+
<div class="element"></div>
107+
<div class="element"></div>
108+
<div class="element"></div>
109+
<div class="element"></div>
110+
<div class="element"></div>
111+
<div class="element"></div>
112+
</div>
113+
114+
115+
</body>
116+
</html>
117+
118+
```

0 commit comments

Comments
 (0)