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

Aero button glass + homework report control; reduced-motion sheet glitch

Browse source 
Buttons: the recipe's thin veils let btn-secondary/btn-ghost/glass-pill
blend into the grass and sky - they now carry a stronger pale-glass veil
(the Ask-pill look) over the blurred scene, ghosts plus a rim and
full-contrast text. Homework make/check results gained the same red "!"
report control as the feeds and the guide (a synthetic short-answer
activity maps into the report flow; pinned in phase3).

Reduced motion: the manual toggle only fed framer's MotionConfig, which
strips transform animations - while components branched on the OS-only
useReducedMotion - so translucent sheets still spring-faded their opacity
in over the page (the "ugly visual glitch with the settings panel"). All
16 components now read useAppReducedMotion() (OS or toggle), and the
settings sheet/scrim and the library's phone sheet go instant. Verified
frame by frame: opacity 1.00 from the first frame.

Contrast 0 findings, axe clean; mobile 126/126, chat 102/102, providers
20/20, wizard 95/95, phase3 31/31, bubbles 34/34, i18n 13/13, native
33/33. Version 0.5.4, SW -> freezmo-v76.
This commit is contained in:
Martin Dvořák 2026-10-14 09:19:54 +00:00
commit 7da308fa1e
26 changed files with 155 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

38
app/globals.css
View file

@ -621,6 +621,7 @@
.aero .glass-chip,
.aero .glass-pill,
.aero .btn-secondary,
.aero .btn-ghost,
.aero .chat-header,
.aero .chat-empty,
.aero .segmented {
@ -651,6 +652,43 @@
}
}
/* Buttons need more presence than the cards: a stronger veil so a button reads
as pale glass over grass, sky or water — the "Ask pill" look — instead of
blending into the blurred scene. */
.aero .btn-secondary,
.aero .glass-pill {
background-image:
linear-gradient(
180deg,
rgb(255 255 255 / 0.52) 0%,
rgb(255 255 255 / 0.36) 46%,
rgb(255 255 255 / 0.32) 53%,
rgb(255 255 255 / 0.44) 100%
),
url("/aero/background-blur.webp?v=3");
background-size: 100% 100%, cover;
background-position: 0 0, center 42%;
background-attachment: scroll, fixed;
background-repeat: no-repeat, no-repeat;
}
.aero .btn-ghost {
background-image:
linear-gradient(
180deg,
rgb(255 255 255 / 0.52) 0%,
rgb(255 255 255 / 0.36) 46%,
rgb(255 255 255 / 0.32) 53%,
rgb(255 255 255 / 0.44) 100%
),
url("/aero/background-blur.webp?v=3");
background-size: 100% 100%, cover;
background-position: 0 0, center 42%;
background-attachment: scroll, fixed;
background-repeat: no-repeat, no-repeat;
border: 1px solid rgb(255 255 255 / 0.6);
color: var(--text);
}
/* Chat header: the same glass as the cards, a touch more fill — its title and
scope line sit directly over the sky. */
.aero .chat-header {