[Seasonal · human approval required] Christmas: better design & features #240

New Issue

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

jared commented

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

Christmas 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/christmas) and reaches lotus only when a human merges it.

Active: Dec 10 – 30 (auto), or any time via Settings → General → Seasonal Theme
Code: src/app/components/seasonal/themes/Christmas.tsx + Christmas.css.ts; schedule in seasonSchedule.ts

What it does today

Falling snow at three depths and a string of bokeh fairy lights sagging across the top edge.

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:

The string lights sit over the header: on a phone a red light covers the room name; on desktop they overlap header icons.
The snow is white on the light theme and is invisible in all three renders.
No sense of the season beyond the lights.
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)

Hang the lights above the header (or in its gap) without covering text/controls.
Snow that shows on light backgrounds (soft grey-blue with a highlight) and on dark.
Optional: snow gently gathering on the composer edge; a small tree or wreath in an empty corner.

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/christmas.
A human closes this issue.

## Christmas 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/christmas`) and reaches `lotus` only when a human merges it. **Active:** Dec 10 – 30 (auto), or any time via Settings → General → Seasonal Theme **Code:** `src/app/components/seasonal/themes/Christmas.tsx` + `Christmas.css.ts`; schedule in `seasonSchedule.ts` ### What it does today Falling snow at three depths and a string of bokeh fairy lights sagging across the top edge. ### 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. ![Christmas baseline](https://code.lotusguild.org/attachments/e606f65b-7a9d-4dba-9c97-532c505db36c) What the render shows: - The string lights sit **over the header**: on a phone a red light covers the room name; on desktop they overlap header icons. - The snow is white on the light theme and is **invisible** in all three renders. - No sense of the season beyond the lights. - 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) - Hang the lights above the header (or in its gap) without covering text/controls. - Snow that shows on light backgrounds (soft grey-blue with a highlight) and on dark. - Optional: snow gently gathering on the composer edge; a small tree or wreath in an empty corner. ### 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/christmas`. - [ ] A human closes this issue.

christmas-baseline.png

843 KiB

jared added the enhancement ux area: appearance needs-human-review labels 2026-09-25 13:03:48 -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#240