Experiment to rebuild Diffuse using web applets.
feat: artwork controller tweaks
author
Steven Vandevelde
date
(Jun 14, 2025, 4:46 PM +0200)
commit
21781647
21781647c233e9ae95b4ef2708fad89e2ac21351
parent
a8617c69
a8617c69cfc58a41dd779450033472a9370cbd9c
+67
-65
+67
-65
src/pages/constituents/blur/artwork-controller/_applet.astro
+67
-65
src/pages/constituents/blur/artwork-controller/_applet.astro
···
9
9
---
10
10
11
11
<main>
12
+
<section class="artwork"></section>
13
+
12
14
<section class="controller">
13
15
<div class="gradient-blur">
14
16
<div></div>
···
21
23
<div></div>
22
24
</div>
23
25
26
+
<div class="controller__background"></div>
27
+
24
28
<!-- Content -->
25
29
<section class="controller__inner"></section>
26
30
</section>
···
30
34
main {
31
35
background: var(--color-3);
32
36
color: white;
37
+
display: flex;
38
+
flex-direction: column;
33
39
font-size: var(--fs-sm);
34
40
height: 100vh;
35
-
max-width: var(--container-3xs);
41
+
max-width: var(--container-2xs);
36
42
overflow: hidden;
37
43
position: relative;
38
44
transition:
···
43
49
/* Artwork */
44
50
45
51
.artwork {
46
-
aspect-ratio: 1 / 1;
47
-
height: 90%;
48
-
left: 50%;
52
+
flex: 1;
53
+
pointer-events: none;
54
+
position: relative;
55
+
}
56
+
57
+
.artwork img {
58
+
height: 100%;
59
+
left: 0;
49
60
object-fit: cover;
50
-
pointer-events: none;
51
61
position: absolute;
52
62
top: 0;
53
-
transform: translateX(-50%);
54
63
width: 100%;
55
-
z-index: 0;
56
64
}
57
65
58
66
/* Progress bars */
···
81
89
/* Controller */
82
90
83
91
.controller {
84
-
bottom: 0;
85
-
left: 0;
92
+
flex-shrink: 0;
86
93
padding: var(--space-md);
94
+
position: relative;
95
+
}
96
+
97
+
.controller__background {
98
+
inset: 0;
99
+
opacity: 0.5;
87
100
position: absolute;
88
-
right: 0;
89
-
z-index: 10;
101
+
transition: background-color 500ms;
102
+
z-index: 1;
90
103
}
91
104
92
105
.controller__inner {
···
171
184
172
185
.gradient-blur {
173
186
bottom: 0;
174
-
height: 200%;
187
+
height: 125%;
175
188
left: 0;
176
189
pointer-events: none;
177
190
position: absolute;
178
191
right: 0;
179
-
z-index: 0;
192
+
z-index: 2;
180
193
}
181
194
182
195
.gradient-blur > div {
···
185
198
}
186
199
187
200
.gradient-blur > div:nth-of-type(1) {
188
-
backdrop-filter: blur(0.5px);
201
+
backdrop-filter: blur(1px);
189
202
mask: linear-gradient(
190
203
to bottom,
191
204
rgba(0, 0, 0, 0) 0%,
192
-
rgba(0, 0, 0, 1) 12.5%,
193
-
rgba(0, 0, 0, 1) 25%,
194
-
rgba(0, 0, 0, 0) 37.5%
205
+
rgba(0, 0, 0, 1) 4.166666665%,
206
+
rgba(0, 0, 0, 1) 8.333333332%,
207
+
rgba(0, 0, 0, 0) 12.499999999%
195
208
);
196
209
z-index: 1;
197
210
}
198
211
199
212
.gradient-blur > div:nth-of-type(2) {
200
-
backdrop-filter: blur(1px);
213
+
backdrop-filter: blur(2px);
201
214
mask: linear-gradient(
202
215
to bottom,
203
-
rgba(0, 0, 0, 0) 12.5%,
204
-
rgba(0, 0, 0, 1) 25%,
205
-
rgba(0, 0, 0, 1) 37.5%,
206
-
rgba(0, 0, 0, 0) 50%
216
+
rgba(0, 0, 0, 0) 4.166666665%,
217
+
rgba(0, 0, 0, 1) 8.333333332%,
218
+
rgba(0, 0, 0, 1) 12.499999999%,
219
+
rgba(0, 0, 0, 0) 16.666666666%
207
220
);
208
221
z-index: 2;
209
222
}
210
223
211
224
.gradient-blur > div:nth-of-type(3) {
212
-
backdrop-filter: blur(2px);
225
+
backdrop-filter: blur(4px);
213
226
mask: linear-gradient(
214
227
to bottom,
215
-
rgba(0, 0, 0, 0) 25%,
216
-
rgba(0, 0, 0, 1) 37.5%,
217
-
rgba(0, 0, 0, 1) 50%,
218
-
rgba(0, 0, 0, 0) 62.5%
228
+
rgba(0, 0, 0, 0) 8.333333332%,
229
+
rgba(0, 0, 0, 1) 12.499999999%,
230
+
rgba(0, 0, 0, 1) 16.666666666%,
231
+
rgba(0, 0, 0, 0) 20.833333333%
219
232
);
220
233
z-index: 3;
221
234
}
222
235
223
236
.gradient-blur > div:nth-of-type(4) {
224
-
backdrop-filter: blur(4px);
237
+
backdrop-filter: blur(8px);
225
238
mask: linear-gradient(
226
239
to bottom,
227
-
rgba(0, 0, 0, 0) 37.5%,
228
-
rgba(0, 0, 0, 1) 50%,
229
-
rgba(0, 0, 0, 1) 62.5%,
230
-
rgba(0, 0, 0, 0) 75%
240
+
rgba(0, 0, 0, 0) 12.499999999%,
241
+
rgba(0, 0, 0, 1) 16.666666666%,
242
+
rgba(0, 0, 0, 1) 20.833333333%,
243
+
rgba(0, 0, 0, 0) 25%
231
244
);
232
245
z-index: 4;
233
246
}
234
247
235
248
.gradient-blur > div:nth-of-type(5) {
236
-
backdrop-filter: blur(8px);
249
+
backdrop-filter: blur(16px);
237
250
mask: linear-gradient(
238
251
to bottom,
239
-
rgba(0, 0, 0, 0) 50%,
240
-
rgba(0, 0, 0, 1) 62.5%,
241
-
rgba(0, 0, 0, 1) 75%,
242
-
rgba(0, 0, 0, 0) 87.5%
252
+
rgba(0, 0, 0, 0) 16.666666666%,
253
+
rgba(0, 0, 0, 1) 20.833333333%,
254
+
rgba(0, 0, 0, 1) 25%,
255
+
rgba(0, 0, 0, 0) 100%
243
256
);
244
257
z-index: 5;
245
258
}
246
259
247
260
.gradient-blur > div:nth-of-type(6) {
248
-
backdrop-filter: blur(16px);
249
-
mask: linear-gradient(
250
-
to bottom,
251
-
rgba(0, 0, 0, 0) 62.5%,
252
-
rgba(0, 0, 0, 1) 75%,
253
-
rgba(0, 0, 0, 1) 87.5%,
254
-
rgba(0, 0, 0, 0) 100%
255
-
);
256
-
z-index: 6;
257
-
}
258
-
259
-
.gradient-blur > div:nth-of-type(7) {
260
261
backdrop-filter: blur(32px);
261
262
mask: linear-gradient(
262
263
to bottom,
263
-
rgba(0, 0, 0, 0) 75%,
264
-
rgba(0, 0, 0, 1) 87.5%,
264
+
rgba(0, 0, 0, 0) 20.833333333%,
265
+
rgba(0, 0, 0, 1) 25%,
265
266
rgba(0, 0, 0, 1) 100%
266
267
);
267
-
z-index: 7;
268
+
z-index: 6;
268
269
}
269
270
270
-
.gradient-blur > div:nth-of-type(8) {
271
+
.gradient-blur > div:nth-of-type(7) {
271
272
backdrop-filter: blur(64px);
272
-
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%);
273
-
z-index: 8;
273
+
mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 100%);
274
+
z-index: 7;
274
275
}
275
276
</style>
276
277
···
316
317
const context = register();
317
318
318
319
// Stored state
319
-
const STORE_PREFIX = "@applets/constituents/blur/artwork-controller";
320
+
const STORE_PREFIX = `@applets/constituents/blur/artwork-controller/${context.groupId || "main"}`;
320
321
const STATE_KEY = `${STORE_PREFIX}/state`;
321
322
const stored = localStorage.getItem(STATE_KEY);
322
323
···
462
463
////////////////////////////////////////////
463
464
// UI
464
465
////////////////////////////////////////////
466
+
const bg = document.body.querySelector<HTMLElement>(".controller__background");
467
+
const controller = document.body.querySelector<HTMLElement>(".controller__inner");
465
468
const main = document.body.querySelector("main");
466
-
const controller = document.body.querySelector(".controller__inner");
469
+
const showcase = document.body.querySelector<HTMLElement>(".artwork");
467
470
468
-
if (!main || !controller) throw new Error("Missing DOM elements");
471
+
if (!bg || !controller || !main || !showcase) throw new Error("Missing DOM elements");
469
472
470
473
const h = (
471
474
tag: string,
···
481
484
const art = artwork();
482
485
483
486
// TODO: Remove existing art?
484
-
if (art.length === 0) return;
487
+
if (art.length === 0) {
488
+
return;
489
+
}
485
490
486
491
// Show artwork
487
492
const blob = new Blob([art[0].bytes], { type: art[0].mime });
···
489
494
490
495
// Remove existing artwork
491
496
// TODO: Fade in new artwork and then remove other
492
-
const existingArtwork = document.querySelector(".artwork");
493
-
existingArtwork?.remove();
497
+
showcase.innerHTML = "";
494
498
495
499
// Create img for new artwork
496
500
const img = h("img", { src: url, className: "artwork" });
···
500
504
const fac = new FastAverageColor();
501
505
const color = fac.getColor(img as HTMLImageElement);
502
506
main.style.backgroundColor = color.rgba;
507
+
bg.style.backgroundColor = color.rgba;
503
508
};
504
509
505
-
// TODO: Switch to dark/light based on color?
506
-
// USE color.isDark OR color.isLight
507
-
508
510
// Insert new artwork
509
-
main.appendChild(img);
511
+
showcase.appendChild(img);
510
512
});
511
513
512
514
////////////////////////////////////////////