diff --git a/LOTUS_TODO.md b/LOTUS_TODO.md index 18b342612..625e1fa05 100644 --- a/LOTUS_TODO.md +++ b/LOTUS_TODO.md @@ -978,7 +978,7 @@ Themes: --- -### [ ] P5-4 · Animated Chat Backgrounds (CSS-animated wallpapers) +### [x] P5-4 · Animated Chat Backgrounds (CSS-animated wallpapers) **What:** 5 new animated wallpaper options in the chat background picker: @@ -991,6 +991,8 @@ Themes: **[AUDIT REQUIRED]** Study how existing wallpapers are applied in `lotus-terminal.css.ts` to extend the system correctly. **Complexity:** Medium. +**COMPLETED June 2026.** Five new CSS-only animated backgrounds added to the chat background picker via vanilla-extract keyframes: **Digital Rain** (two-layer vertical stripe scroll with parallax depth — wide stripes at 8s, narrow at 4s), **Star Drift** (three-layer radial-gradient dots drifting diagonally), **Grid Pulse** (orange/cyan neon grid lines expanding/contracting via backgroundSize keyframe), **Aurora Flow** (four large radial gradient ellipses sweeping across a 200% canvas), **Fireflies** (three layers of warm glowing radial-gradient dots drifting). All implemented in `src/app/styles/Animations.css.ts` (keyframes) + `src/app/features/lotus/chatBackground.ts` (CSSProperties). `getChatBg` updated with optional `pauseAnimations?: boolean` parameter; also respects `prefers-reduced-motion: reduce` by checking `window.matchMedia` at call time. "Pause Background Animations" toggle added to Settings → Appearance. Glassmorphism sidebar bug fixed simultaneously: sidebar now applies chat background to `document.body` so `backdrop-filter` has content to blur through (previously sidebar was a flex sibling with nothing behind it). + --- ### [x] P5-5 · Night Light / Blue Light Filter diff --git a/README.md b/README.md index d3f52e64f..3aecad8f8 100644 --- a/README.md +++ b/README.md @@ -175,7 +175,8 @@ Emoji reaction buttons styled for terminal mode via `button[data-reaction-key]` ### Settings (Appearance) -- **Glassmorphism Sidebar**: Settings → Appearance toggle (off by default). When enabled, the left sidebar becomes semi-transparent (`background: rgba(3,5,8,0.55)`) with `backdrop-filter: blur(12px)` so chat background patterns show through as a frosted glass effect. Implemented as a vanilla-extract `SidebarGlass` class applied to the `` container in `SidebarNav.tsx`. +- **Animated Chat Backgrounds**: Five CSS-only animated wallpapers added to the background picker — Digital Rain (two-layer vertical stripe scroll with parallax), Star Drift (three-layer radial-gradient star field drifting diagonally), Grid Pulse (neon grid lines expanding/contracting via `backgroundSize` keyframe), Aurora Flow (four radial gradient ellipses sweeping across a 200% canvas), Fireflies (three layers of glowing dots drifting). All use vanilla-extract `keyframes()` — no canvas, GPU-composited. Respects `prefers-reduced-motion: reduce` (animation stripped at call time). "Pause Background Animations" toggle in Settings → Appearance provides an in-app override. Implemented in `src/app/styles/Animations.css.ts` + `src/app/features/lotus/chatBackground.ts`. +- **Glassmorphism Sidebar**: Settings → Appearance toggle (off by default). When enabled, the left sidebar becomes semi-transparent (`background: rgba(3,5,8,0.55)`) with `backdrop-filter: blur(12px)` so chat background patterns show through as a frosted glass effect. Fix: the active chat background is mirrored onto `document.body` via `useEffect` in `SidebarNav.tsx` so the blur has content to work through (previously the sidebar was a flex sibling with nothing physically behind it). Implemented as a vanilla-extract `SidebarGlass` class applied to the `` container in `SidebarNav.tsx`. - **Night Light / Blue Light Filter**: Warm orange overlay (`rgba(255,140,0,N%)`) across the entire UI. Toggle + intensity slider (5–80%) in Settings → Appearance. `position:fixed; pointer-events:none; z-index:9998`. Persists across sessions.