vielle.dev
[Archived] Archived WIP of vielle.dev
Add rudimentary balloons to the cables
- randomised size + adjusted gap to make them more visible
- increase .top-offset
+28
-8
+19
-3
src/components/blog/Balloon.astro
+19
-3
src/components/blog/Balloon.astro
···
8
8
9
9
const { id, of } = Astro.props;
10
10
11
-
const length = utils.getRandom(blog.balloons.size);
11
+
const length = utils.getRandom(blog.balloons.length);
12
12
const offset = utils.getRandom(blog.balloons.offset);
13
13
const rotation = new Array(5)
14
14
.fill(0)
···
16
16
---
17
17
18
18
<div
19
+
class="cable"
19
20
style={`--length: ${length}rem;
20
21
--id: ${id};
21
22
--of: ${of};
···
24
25
--timing: ${utils.getRandom(blog.balloons.timing)}s;
25
26
`}
26
27
>
28
+
<div
29
+
class="balloon"
30
+
style={`--width: ${utils.getRandom(blog.balloons.size[0])}rem;
31
+
--height: ${utils.getRandom(blog.balloons.size[1])}rem;`}
32
+
>
33
+
</div>
27
34
</div>
28
35
29
36
<style>
···
80
87
}
81
88
}
82
89
83
-
div {
90
+
.cable {
84
91
position: absolute;
85
92
86
93
width: 0.5rem;
87
94
height: var(--length);
88
95
background: black;
89
96
90
-
top: calc(-1 * var(--length));
97
+
/* .5rem accounts for border (z-index doesn't work) */
98
+
top: calc(-1 * var(--length) - 0.5rem);
91
99
left: calc(
92
100
100% / var(--of) * var(--id) + 100% / 2 / var(--of) + var(--offset)
93
101
);
···
98
106
@media (prefers-reduced-motion: no-preference) {
99
107
animation: infinite var(--timing) linear tilt;
100
108
}
109
+
}
110
+
111
+
.balloon {
112
+
width: var(--width);
113
+
height: var(--height);
114
+
border-radius: calc(var(--width) / 2);
115
+
background: red;
116
+
translate: -50% -100%;
101
117
}
102
118
</style>
+8
-4
src/config.ts
+8
-4
src/config.ts
···
3
3
width: 30,
4
4
xPadding: 2,
5
5
yLeeway: 5,
6
-
yGap: 10,
6
+
yGap: 20,
7
7
drift: [0.1, 1],
8
8
timing: [10, 20],
9
9
},
···
38
38
},
39
39
balloons: {
40
40
numBalloons: [1, 3],
41
-
size: [10, 20],
42
-
offset: [-5, 5],
41
+
length: [5, 15],
42
+
offset: [-2.5, 2.5],
43
43
rotation: [-10, 10],
44
-
timing: [30, 45]
44
+
timing: [30, 45],
45
+
size: [
46
+
[5, 10],
47
+
[10, 20],
48
+
],
45
49
},
46
50
} as const;
47
51