[Seasonal · human approval required] Deep Space: better design & features #238

New Issue

2026-09-25T13:03:47-04:00

jared commented

2026-09-25 13:03:47 -04:00

Deep Space seasonal theme: better design and features

Human approval required. AI may research, design, prototype and implement changes for this theme, but it may not approve or close this issue. Only a human (Jared) closes it, after reviewing the rendered result. Work happens on a branch (seasonal/deepspace) and reaches lotus only when a human merges it.

Active: Oct 4 – 10 (World Space Week) (auto), or any time via Settings → General → Seasonal Theme
Code: src/app/components/seasonal/themes/DeepSpace.tsx + DeepSpace.css.ts; schedule in seasonSchedule.ts

What it does today

Violet void with magenta/cyan nebula clouds, a faint galaxy spiral, a two-depth twinkling starfield and occasional comet streaks.

Baseline: what it actually looks like (rendered 2026-09-25, not inferred from the code)

Left to right: desktop mid-animation (5 s in), desktop with reduced motion, phone (Pixel 7). Light theme, a real room with messages.

What the render shows:

Subtle and mostly pleasant, but in the light theme it reads as a lilac wash, not space — stars are barely visible.
A comet streak crosses message text in the timeline.
The violet tint lowers contrast on secondary text.
The seasonal floating button (bottom-right) overlaps the composer's send button on a phone.
Only the light theme was rendered for this baseline; dark (and the other colour themes) must be checked too.

Ideas to explore (not decisions)

Consider a dark base while active (space needs darkness), or a dark-theme-only treatment.
Keep comets away from the reading column; make the starfield and nebula visible.
Optional: a real "what's in the sky tonight" touch, e.g. the ISS pass or current moon phase.

Hard requirements for any design

Text stays readable: nothing opaque or high-contrast over message text, names, the composer, headers or controls. Check WCAG AA contrast of text over the effect.
Reduced motion: a static version that still looks good (reduced prop).
Performance: transform/opacity animation only; no measurable jank while scrolling or typing; nothing runs when the theme is off.
No pointer interference: the overlay never blocks clicks or taps.

Required process: render and look, don't trust the code

Every iteration must be rendered in a real browser and looked at before it's proposed. Code review alone is not enough.

Screenshots of: desktop and phone, light and dark theme, reduced motion, and 2–3 frames of the animation (or a short recording), in a room with real messages.
Before/after images posted on this issue for each iteration, with a short note on what changed and why.
Checked against the hard requirements above, on the rendered images.

Approval (human only)

A human has reviewed the rendered design and approves it.
A human has merged seasonal/deepspace.
A human closes this issue.

## Deep Space seasonal theme: better design and features > **Human approval required.** AI may research, design, prototype and implement changes for this theme, but it **may not approve or close this issue**. Only a human (Jared) closes it, after reviewing the rendered result. Work happens on a branch (`seasonal/deepspace`) and reaches `lotus` only when a human merges it. **Active:** Oct 4 – 10 (World Space Week) (auto), or any time via Settings → General → Seasonal Theme **Code:** `src/app/components/seasonal/themes/DeepSpace.tsx` + `DeepSpace.css.ts`; schedule in `seasonSchedule.ts` ### What it does today Violet void with magenta/cyan nebula clouds, a faint galaxy spiral, a two-depth twinkling starfield and occasional comet streaks. ### Baseline: what it actually looks like (rendered 2026-09-25, not inferred from the code) Left to right: desktop mid-animation (5 s in), desktop with reduced motion, phone (Pixel 7). Light theme, a real room with messages. ![Deep Space baseline](https://code.lotusguild.org/attachments/368afeb0-c6d8-44ff-b0a4-1571e5a8464b) What the render shows: - Subtle and mostly pleasant, but in the light theme it reads as a **lilac wash, not space** — stars are barely visible. - A comet streak crosses message text in the timeline. - The violet tint lowers contrast on secondary text. - The seasonal floating button (bottom-right) overlaps the composer's send button on a phone. - Only the **light** theme was rendered for this baseline; dark (and the other colour themes) must be checked too. ### Ideas to explore (not decisions) - Consider a dark base while active (space needs darkness), or a dark-theme-only treatment. - Keep comets away from the reading column; make the starfield and nebula visible. - Optional: a real "what's in the sky tonight" touch, e.g. the ISS pass or current moon phase. ### Hard requirements for any design - **Text stays readable**: nothing opaque or high-contrast over message text, names, the composer, headers or controls. Check WCAG AA contrast of text *over* the effect. - **Reduced motion**: a static version that still looks good (`reduced` prop). - **Performance**: transform/opacity animation only; no measurable jank while scrolling or typing; nothing runs when the theme is off. - **No pointer interference**: the overlay never blocks clicks or taps. ### Required process: render and look, don't trust the code Every iteration must be **rendered in a real browser and looked at** before it's proposed. Code review alone is not enough. - [ ] Screenshots of: desktop and phone, light and dark theme, reduced motion, and 2–3 frames of the animation (or a short recording), in a room with real messages. - [ ] Before/after images posted on this issue for each iteration, with a short note on what changed and why. - [ ] Checked against the hard requirements above, on the rendered images. ### Approval (human only) - [ ] A human has reviewed the rendered design and approves it. - [ ] A human has merged `seasonal/deepspace`. - [ ] A human closes this issue.

deepspace-baseline.png

1.1 MiB

jared added the enhancement ux area: appearance needs-human-review labels 2026-09-25 13:03:47 -04:00

jared commented

2026-09-25 13:37:17 -04:00

A lead from the Autumn work (#237, PR #241). Not a fix; this still needs its own rendered review.

On Autumn, the falling leaves were almost invisible because each one sat in a small wrapper pinned near the top with contain: layout paint style. Paint containment clips children to that box, so a moving particle stops being drawn once it leaves its first few pixels. This theme uses the same contain: 'layout paint style' on its animated wrappers. That probably explains the barely-visible stars/comets or the invisible snow in the baseline.

How to check: render it (frames at 10, 15 and 20 s) with and without paint in those contain values, and compare. A DOM or position check will not show this; only the image does.

**A lead from the Autumn work (#237, PR #241). Not a fix; this still needs its own rendered review.** On Autumn, the falling leaves were almost invisible because each one sat in a small wrapper pinned near the top with `contain: layout paint style`. Paint containment clips children to that box, so a moving particle stops being drawn once it leaves its first few pixels. This theme uses the same `contain: 'layout paint style'` on its animated wrappers. That probably explains the barely-visible stars/comets or the invisible snow in the baseline. **How to check:** render it (frames at 10, 15 and 20 s) with and without `paint` in those `contain` values, and compare. A DOM or position check will not show this; only the image does.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: LotusGuild/cinny#238