openhands
8a1b83b965
The first cloud pass was to subtle: only five, up to 190s per crossing, and they froze off-screen under prefers-reduced-motion. Rework: - Eight clouds across the top 60% of the viewport with visible drift (28s–66s loops, staggered by negative delays so they are always mid scene on load). - Higher opacity/steeper size contrast in light mode; dark mode dims them slightly. - Reduced motion now freezes a static, evenly-spread cloud field across the width instead of pushing the clouds off-screen.
19 lines
546 B
TypeScript
19 lines
546 B
TypeScript
/**
|
|
* Drifting cloud puffs that float across the public background.
|
|
* Pure decoration: fixed, behind the content, no pointer events.
|
|
*/
|
|
export function CloudsField() {
|
|
return (
|
|
<div className="clouds" aria-hidden="true">
|
|
<span className="cloud cloud-1" />
|
|
<span className="cloud cloud-2" />
|
|
<span className="cloud cloud-3" />
|
|
<span className="cloud cloud-4" />
|
|
<span className="cloud cloud-5" />
|
|
<span className="cloud cloud-6" />
|
|
<span className="cloud cloud-7" />
|
|
<span className="cloud cloud-8" />
|
|
</div>
|
|
);
|
|
}
|