nvrl/pl8list-rewind
1
0 Fork 0
mirror of https://github.com/narrrl/pl8list-rewind.git synced 2026-11-04 00:46:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Put a 3D play/pause on the liquid drop and keep page swipes working

Browse Source 
The flat play/pause badge and the flash icon sat on top of the drop as two separate
symbols. With the drop on, both are gone: the icon is stamped out of the drop's front
instead, turns with it and catches the light. Pausing pops up the bars, which melt
into the play triangle; playing melts it back into the bars as they fade.

On touch only a clearly sideways drag turns the drop now, so diagonal swipes turn the
page again. A mouse released outside the window, or after turning the drop, no longer
leaves the pager dragging. The halo behind the drop drew a hard ring at the art's edge;
it is a soft radial glow now.
This commit is contained in:
nvrl committed 2026-11-01 15:39:21 +01:00
1 parent 482cfc299b
commit ca23cf5b7c
5 files changed
+104 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/style.css
+13 -4
View File
@@ -266,18 +266,27 @@ button.danger:not(.link) { background: var(--accent); border: none; color: #fff;
height: 200%;
pointer-events: none;
}
/* The halo stays behind the drop and pulses with it; the text sits on top where
the drop spills over it. */
/* A halo stays behind the drop and pulses with it; the text sits on top where the
drop spills over it. The drop shows play and pause on itself (blob/shaders.ts). */
.card.liquid .art {
z-index: 0;
background-image: none !important;
background-color: transparent;
box-shadow: 0 0 calc(30px + var(--energy) * 80px) color-mix(in oklab, var(--card-accent) calc(18% + var(--energy) * 40%), transparent);
box-shadow: none;
scale: 1;
}
.card.liquid .art::before {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(closest-side, color-mix(in oklab, var(--card-accent) calc(20% + var(--energy) * 40%), transparent), transparent);
pointer-events: none;
}
.card.liquid .content > :not(.art) { position: relative; z-index: 1; }
.card.liquid .title { text-shadow: 0 2px 16px #000b; }
.card.liquid .initial { display: none; }
.card.liquid .initial, .card.liquid .paused-badge { display: none; }
/* Hidden, not removed: it takes itself away when its animation ends. */
.card.liquid .flash { visibility: hidden; }
@media (pointer: fine) {
.card.liquid .art { cursor: grab; }
.card.turning, .card.turning .art { cursor: grabbing; }