dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More shinier bubbles; the chat's top edge fades instead of clipping

Browse source 
Bubbles: ten -> eighteen (interleaved, 18px to 96px, 10-23s runs), with a
tighter specular hotspot, a reflected-light glint low on the sphere, a 1px
glass edge and a brighter inner rim on both the bubbles and the drifting
orbs. Bodies stay translucent with capped opacity, so wallpaper text stays
readable; bubble-perf shows no added frame cost.

Chat: the conversation scrolls up to the glass header, and a line clipped
exactly at that edge read as a rendering bug over the busy wallpaper - the
scroller now carries a 14px top mask in Aero, shorter than the column's
16px top padding so a fresh conversation shows no dimming.

Contrast 0 findings, axe clean, chat 101/101, mobile 123/123 (bubble count
pinned to 18), regression 44/44, i18n 13/13, native 33/33.
Version 0.3.7, SW -> freezmo-v66.
This commit is contained in:
Martin Dvořák 2026-10-13 13:19:12 +00:00
commit 4ba80a9bf2
7 changed files with 74 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

65
app/globals.css
View file

@ -276,14 +276,21 @@
/* The orbs become extra bubbles over the photo. */
.aero .ice-orb {
background: radial-gradient(
circle at 32% 28%,
rgb(255 255 255 / 0.95) 0%,
rgb(226 248 255 / 0.4) 22%,
rgb(125 211 252 / 0.14) 56%,
rgb(56 189 248 / 0.38) 100%
);
box-shadow: inset -8px -12px 20px -10px rgb(3 74 124 / 0.5), inset 8px 10px 16px -10px rgb(255 255 255 / 0.95), 0 12px 26px -16px rgb(3 74 124 / 0.55);
background:
radial-gradient(circle at 30% 24%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0) 16%),
radial-gradient(circle at 72% 80%, rgb(255 255 255 / 0.4) 0%, rgb(255 255 255 / 0) 20%),
radial-gradient(
circle at 32% 28%,
rgb(255 255 255 / 0.9) 0%,
rgb(226 248 255 / 0.4) 22%,
rgb(125 211 252 / 0.14) 56%,
rgb(56 189 248 / 0.38) 100%
);
box-shadow:
inset -8px -12px 20px -10px rgb(3 74 124 / 0.5),
inset 8px 10px 16px -10px rgb(255 255 255 / 1),
inset 0 0 0 1px rgb(255 255 255 / 0.35),
0 12px 26px -16px rgb(3 74 124 / 0.55);
}
/* The Aero gloss for the floating surfaces (sheets, dropdowns and the sticky
@ -313,14 +320,22 @@
bottom: -14vh;
border-radius: 50%;
opacity: 0;
background: radial-gradient(
circle at 32% 28%,
rgb(255 255 255 / 0.95) 0%,
rgb(226 248 255 / 0.38) 24%,
rgb(125 211 252 / 0.12) 58%,
rgb(56 189 248 / 0.34) 100%
);
box-shadow: inset -6px -10px 16px -8px rgb(3 74 124 / 0.45), inset 6px 8px 14px -8px rgb(255 255 255 / 0.9), 0 10px 22px -14px rgb(3 74 124 / 0.5);
background:
radial-gradient(circle at 30% 24%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0) 16%),
radial-gradient(circle at 72% 80%, rgb(255 255 255 / 0.4) 0%, rgb(255 255 255 / 0) 20%),
radial-gradient(
circle at 32% 28%,
rgb(255 255 255 / 0.9) 0%,
rgb(226 248 255 / 0.38) 24%,
rgb(125 211 252 / 0.12) 58%,
rgb(56 189 248 / 0.34) 100%
);
box-shadow:
inset -6px -10px 16px -8px rgb(3 74 124 / 0.5),
inset 6px 8px 14px -8px rgb(255 255 255 / 1),
inset 0 0 0 1px rgb(255 255 255 / 0.35),
0 10px 22px -14px rgb(3 74 124 / 0.5);
border: 1px solid rgb(255 255 255 / 0.25);
animation: aero-bubble-rise var(--bubble-duration, 20s) linear infinite;
animation-delay: var(--bubble-delay, 0s);
will-change: transform, opacity;
@ -347,6 +362,14 @@
.aero .ice-bubble-8 { width: 46px; height: 46px; left: 78%; --bubble-duration: 16s; --bubble-delay: -13s; --bubble-sway: 4vw; }
.aero .ice-bubble-9 { width: 24px; height: 24px; left: 87%; --bubble-duration: 14s; --bubble-delay: -6s; --bubble-sway: -3vw; }
.aero .ice-bubble-10 { width: 120px; height: 120px; left: 92%; --bubble-duration: 27s; --bubble-delay: -20s; --bubble-sway: -5vw; --bubble-opacity: 0.75; }
.aero .ice-bubble-11 { width: 18px; height: 18px; left: 4%; --bubble-duration: 12s; --bubble-delay: -3s; --bubble-sway: 3vw; }
.aero .ice-bubble-12 { width: 58px; height: 58px; left: 12%; --bubble-duration: 18s; --bubble-delay: -11s; --bubble-sway: -3vw; }
.aero .ice-bubble-13 { width: 30px; height: 30px; left: 21%; --bubble-duration: 15s; --bubble-delay: -5s; --bubble-sway: -2vw; }
.aero .ice-bubble-14 { width: 96px; height: 96px; left: 34%; --bubble-duration: 23s; --bubble-delay: -19s; --bubble-sway: 4vw; --bubble-opacity: 0.8; }
.aero .ice-bubble-15 { width: 22px; height: 22px; left: 42%; --bubble-duration: 10s; --bubble-delay: -8s; --bubble-sway: -3vw; }
.aero .ice-bubble-16 { width: 44px; height: 44px; left: 54%; --bubble-duration: 16s; --bubble-delay: -2s; --bubble-sway: 2vw; }
.aero .ice-bubble-17 { width: 62px; height: 62px; left: 62%; --bubble-duration: 21s; --bubble-delay: -14s; --bubble-sway: -4vw; }
.aero .ice-bubble-18 { width: 26px; height: 26px; left: 74%; --bubble-duration: 13s; --bubble-delay: -6s; --bubble-sway: 3vw; }
/* Helper lines that sit straight on the wallpaper (the keyboard tip, the AI
note) need their own surface in Aero: dark text on the grass measured
@ -516,6 +539,16 @@
box-shadow: inset 0 2px 8px rgb(2 62 110 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.8);
}
/* The conversation scrolls right up to the glass header; a hard-clipped line
of text at that edge reads as a rendering bug over the busy wallpaper, so
the top of the scroll area fades out instead (the mask is fixed to the
element, not the content — and stays inside the column's 16px top padding,
so at the very top nothing is dimmed). */
.aero .chat-scroll {
mask-image: linear-gradient(to bottom, transparent 0, black 14px);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, black 14px);
}
/* Chat: the longest text in the app sits straight on the wallpaper. The
assistant answers are deliberately bubble-less in the flat themes, and the
user bubble's thin tint washes out over the bright parts of the scene — in