Martin Dvorak
4ba80a9bf2
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.
57 lines
2.4 KiB
TypeScript
57 lines
2.4 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-bubble ice-bubble-11" />
|
|
<span className="ice-bubble ice-bubble-12" />
|
|
<span className="ice-bubble ice-bubble-13" />
|
|
<span className="ice-bubble ice-bubble-14" />
|
|
<span className="ice-bubble ice-bubble-15" />
|
|
<span className="ice-bubble ice-bubble-16" />
|
|
<span className="ice-bubble ice-bubble-17" />
|
|
<span className="ice-bubble ice-bubble-18" />
|
|
<span className="ice-grain" />
|
|
</div>
|
|
);
|
|
}
|