xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/morganwill.com.
morganwill.com
hue
author
Morgan Williams
date
(Nov 26, 2025, 3:23 PM +0100)
commit
8fa255fa
8fa255fab93b13a161b2d2dec14b710cbecae25c
parent
56f76954
56f76954639023b49b72fe81c991823745032413
+35
-4
+35
-4
src/components/LinkIcons.svelte
+35
-4
src/components/LinkIcons.svelte
···
315
315
316
316
/* Animate individual QR modules (rects) popping in */
317
317
.qr-card-code :global(svg rect) {
318
-
fill: var(--default);
319
318
opacity: 0;
320
319
transform: scale(0);
321
-
animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
320
+
animation: popIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
322
321
}
322
+
323
+
/* Randomize hue rotation per rect using nth-child patterns */
324
+
.qr-card-code :global(svg rect:nth-child(3n+1)) { --hue-shift: 0deg; --hue-mid1: 120deg; --hue-mid2: 240deg; }
325
+
.qr-card-code :global(svg rect:nth-child(3n+2)) { --hue-shift: 60deg; --hue-mid1: 180deg; --hue-mid2: 300deg; }
326
+
.qr-card-code :global(svg rect:nth-child(3n)) { --hue-shift: 30deg; --hue-mid1: 150deg; --hue-mid2: 270deg; }
327
+
328
+
.qr-card-code :global(svg rect:nth-child(7n+1)) { --hue-shift: 45deg; }
329
+
.qr-card-code :global(svg rect:nth-child(7n+3)) { --hue-shift: 90deg; }
330
+
.qr-card-code :global(svg rect:nth-child(7n+5)) { --hue-shift: 135deg; }
331
+
332
+
.qr-card-code :global(svg rect:nth-child(11n+2)) { --hue-mid1: 60deg; --hue-mid2: 180deg; }
333
+
.qr-card-code :global(svg rect:nth-child(11n+5)) { --hue-mid1: 200deg; --hue-mid2: 320deg; }
334
+
.qr-card-code :global(svg rect:nth-child(11n+8)) { --hue-mid1: 280deg; --hue-mid2: 40deg; }
323
335
324
336
/* Stagger rects within each QR - waves of 20 rects at a time */
325
337
.qr-card-code :global(svg rect:nth-child(20n+1)) { animation-delay: calc(var(--delay, 0ms) + 0ms); }
···
353
365
@keyframes popIn {
354
366
0% {
355
367
opacity: 0;
356
-
transform: scale(0) rotate(-10deg);
368
+
transform: scale(0) rotate(-15deg);
369
+
fill: oklch(65% 0.25 var(--hue-shift, 0deg));
370
+
filter: blur(4px) brightness(1.5);
371
+
}
372
+
20% {
373
+
opacity: 0.7;
374
+
transform: scale(1.4) rotate(8deg);
375
+
fill: oklch(70% 0.3 var(--hue-mid1, 120deg));
376
+
filter: blur(2px) brightness(1.3);
377
+
}
378
+
40% {
379
+
opacity: 0.9;
380
+
transform: scale(0.8) rotate(-5deg);
381
+
fill: oklch(60% 0.28 var(--hue-mid2, 240deg));
382
+
filter: blur(1px) brightness(1.1);
357
383
}
358
384
60% {
359
385
opacity: 1;
360
-
transform: scale(1.15) rotate(2deg);
386
+
transform: scale(1.15) rotate(3deg);
387
+
fill: oklch(55% 0.2 calc(var(--hue-shift, 0deg) + 180deg));
388
+
filter: blur(0) brightness(1);
361
389
}
362
390
80% {
363
391
transform: scale(0.95) rotate(-1deg);
392
+
fill: oklch(40% 0.08 var(--hue-shift, 0deg));
364
393
}
365
394
100% {
366
395
opacity: 1;
367
396
transform: scale(1) rotate(0deg);
397
+
fill: var(--default, currentColor);
398
+
filter: blur(0) brightness(1);
368
399
}
369
400
}
370
401