martin/musicmouse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Clock: hand outlines drawn once, bubbles beside the watch

Browse Source 
The hands' drop-shadow outline sat on their own compositor layers, so the GPU
recomputed it every frame a bubble moved. It is now on an inner box, painted
once into the hand's layer. The bubbles rise beside the watch, never behind it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Martin Bauer
2026-10-08 17:45:31 +02:00
parent e94e39addc
commit 701e90153c
2 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/styles/clock.css
View File

@@ -362,8 +362,12 @@
will-change: transform;
}
.clock-hand-hour,
.clock-hand-minute {
/* The outline and shadow, on the hand's inner box rather than the hand: a filter on the
layer itself would be recomputed on the GPU every frame anything on screen moves (the
bubbles), while one inside it is drawn once into the layer's picture. The shape is
one level further in, so the outline goes round the clipped arrow, not its box. */
.clock-hand-hour > div,
.clock-hand-minute > div {
filter: drop-shadow(0.35vmin 0 0 var(--clock-ink)) drop-shadow(-0.35vmin 0 0 var(--clock-ink))
drop-shadow(0 0.35vmin 0 var(--clock-ink)) drop-shadow(0 -0.35vmin 0 var(--clock-ink))
drop-shadow(0 1vmin 1vmin oklch(15% 0.05 210 / 0.3));
@@ -382,8 +386,18 @@
margin-left: -2.7vmin;
}
.clock-hand-hour > div {
.clock-hand-hour > div,
.clock-hand-minute > div {
bottom: -3.5vmin;
}
.clock-hand-hour > div > div,
.clock-hand-minute > div > div {
position: absolute;
inset: 0;
}
.clock-hand-hour > div > div {
background: oklch(92% 0.06 345);
clip-path: polygon(50% 0%, 100% 22%, 66% 22%, 66% 100%, 34% 100%, 34% 22%, 0% 22%);
}
@@ -394,8 +408,7 @@
margin-left: -2.5vmin;
}
.clock-hand-minute > div {
bottom: -3.5vmin;
.clock-hand-minute > div > div {
background: oklch(92% 0.05 200);
clip-path: polygon(50% 0%, 100% 14%, 64% 14%, 64% 100%, 36% 100%, 36% 14%, 0% 14%);
}