Martin Dvorak
67e2cefcfe
Frutiger Aero, closer to the mock: - The scene is water now: sun shafts through a bright surface, caustic patches, reeds on the left, a city silhouette on the right, and ten soap bubbles that actually rise (own keyframes, varied sizes/speeds/sway; the spans are display:none outside aero so they cost nothing elsewhere, and they sit still under reduced motion). - Pale blue glass at 0.8: still reads as glass, but dark navy text clears 4.5:1 over the water. The phone tab bar mixes the sheet glass instead of the page — in aero the page *is* the water, which left its labels at 3.9:1. - The aero page-level text (muted/subtle) is much darker for the same reason. - The PWA status bar follows the new water blue (#2fa7e6). The cookie notice is floating glass now (blurred backdrop, rim, shadow): as a plain card it read as part of the page background instead of a notice. Czech: "Tvoje mraznička" -> "Tvůj mrazák" (library title), test updated. Contrast: 0 below-minimum findings and 0 axe violations across every screen, all three themes. Version 0.2.1, SW -> freezmo-v55.
49 lines
2 KiB
TypeScript
49 lines
2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
/**
|
|
* The fixed ice scene behind every screen: a navy (or pale) base, four slow
|
|
* drifting glacier blobs, glossy ice orbs that rise slowly and fade at the
|
|
* edges, and a whisper of grain. Purely decorative — it never intercepts
|
|
* pointer events, only transform/opacity animate (each on its own composited
|
|
* layer), the rise stops under `prefers-reduced-motion`, and everything parks
|
|
* while the tab is hidden so a background tab costs no compositor work.
|
|
*/
|
|
export function IceBackdrop() {
|
|
const [hidden, setHidden] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const apply = () => setHidden(document.hidden);
|
|
apply();
|
|
document.addEventListener("visibilitychange", apply);
|
|
return () => document.removeEventListener("visibilitychange", apply);
|
|
}, []);
|
|
|
|
return (
|
|
<div className={`ice-scene${hidden ? " ice-paused" : ""}`} aria-hidden>
|
|
<span className="ice-blob ice-blob-a" />
|
|
<span className="ice-blob ice-blob-b" />
|
|
<span className="ice-blob ice-blob-c" />
|
|
<span className="ice-blob ice-blob-d" />
|
|
<span className="ice-orb ice-orb-1" />
|
|
<span className="ice-orb ice-orb-2" />
|
|
<span className="ice-orb ice-orb-3" />
|
|
<span className="ice-orb ice-orb-4" />
|
|
<span className="ice-orb ice-orb-5" />
|
|
{/* Aero-only bubbles: display:none unless the aero theme is on, so they
|
|
cost nothing in the other themes (see .ice-bubble in globals.css). */}
|
|
<span className="ice-bubble ice-bubble-1" />
|
|
<span className="ice-bubble ice-bubble-2" />
|
|
<span className="ice-bubble ice-bubble-3" />
|
|
<span className="ice-bubble ice-bubble-4" />
|
|
<span className="ice-bubble ice-bubble-5" />
|
|
<span className="ice-bubble ice-bubble-6" />
|
|
<span className="ice-bubble ice-bubble-7" />
|
|
<span className="ice-bubble ice-bubble-8" />
|
|
<span className="ice-bubble ice-bubble-9" />
|
|
<span className="ice-bubble ice-bubble-10" />
|
|
<span className="ice-grain" />
|
|
</div>
|
|
);
|
|
}
|