[Seasonal · human approval required] Autumn: better design & features #237

New Issue

Closed

opened 2026-09-25 13:03:46 -04:00 by jared · 2 comments

jared commented 2026-09-25 13:03:46 -04:00

Owner

Copy Link

Copy Source

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

Active: Sep 21 – Oct 14 (auto), or any time via Settings → General → Seasonal Theme
Code: src/app/components/seasonal/themes/Autumn.tsx + Autumn.css.ts; schedule in seasonSchedule.ts

What it does today

Amber-to-rust wash, sun shafts, drifting dust motes and maple/oak leaves tumbling down, with a warm vignette.

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:

• Almost invisible mid-animation at desktop size: the wash is faint and no leaves were on screen in the captured frame.
• The reduced-motion scene shows a few leaves, some on top of text ("Sends 179…", the members area).
• 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)

• Make it noticeably autumnal without covering text: leaves along the edges/bottom, a stronger warm light.
• Optional: a pile of leaves along the bottom edge that grows through the season.

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

## Autumn 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/autumn`) and reaches `lotus` only when a human merges it. **Active:** Sep 21 – Oct 14 (auto), or any time via Settings → General → Seasonal Theme **Code:** `src/app/components/seasonal/themes/Autumn.tsx` + `Autumn.css.ts`; schedule in `seasonSchedule.ts` ### What it does today Amber-to-rust wash, sun shafts, drifting dust motes and maple/oak leaves tumbling down, with a warm vignette. ### 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: - Almost **invisible** mid-animation at desktop size: the wash is faint and no leaves were on screen in the captured frame. - The reduced-motion scene shows a few leaves, some on top of text ("Sends 179…", the members area). - 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) - Make it noticeably autumnal without covering text: leaves along the edges/bottom, a stronger warm light. - Optional: a pile of leaves along the bottom edge that grows through the season. ### 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/autumn`. - [ ] A human closes this issue.

autumn-baseline.png

1.3 MiB

autumn-cmp-light.png

1.5 MiB

autumn-cmp-dark.png

1.5 MiB

autumn-cmp-reduced-phone.png

1.2 MiB

autumn-closeup.png

226 KiB

autumn-final-light.png

1.0 MiB

autumn-final-dark.png

1.0 MiB

autumn-final-rp.png

246 KiB

gust-mid.png

139 KiB

autumn-settings-crop.png

316 KiB

jared added the enhancementuxarea: appearanceneeds-human-review labels 2026-09-25 13:03:46 -04:00

jared referenced this issue from a commit 2026-09-25 13:36:17 -04:00

feat(seasonal): Autumn: leaves actually fall; real leaf shapes and palette (#237)

jared referenced a pull request that will close this issue 2026-09-25 13:37:03 -04:00

Seasonal: Autumn redesign (#237), needs human approval #241

jared commented 2026-09-25 13:37:04 -04:00

Author

Owner

Copy Link

Copy Source

Pass 1 is ready for human review: PR #241 (branch seasonal/autumn)

The theme doesn't change on lotus until a human merges the PR. Only a human closes this issue.

What changed

• The main problem was a bug, not the design. Every falling leaf sat in a leaf-sized wrapper pinned to the top of the screen, and that wrapper had contain: layout paint style. Paint containment clips children to the box, so each leaf stopped being drawn as soon as it fell out of its first ~40 px. That's why Autumn looked empty. The page still reported 10–16 leaves on screen, because a position check doesn't see the clipping; only the rendered image showed it. It's now contain: layout style.
• Leaf shapes: a flag-style maple with bold lobes and a stem, which stays recognisable at 30 px (the old outline read as a star or splat), an oak with a stem, and a new aspen. Each has a gradient body and darker veins.
• Palette: crimson, pumpkin orange, gold, russet and burnt orange, instead of muted tans that read as beige on the light theme.
• Density: 12 leaves (was 16) at 28–52 px, with opacity capped at 0.5–0.65 so text under a passing leaf stays readable.
• Dark themes: the leaves are brightened there. In the first redesign pass they sank into the dark warm wash.
• Reduced motion: the resting leaves moved into empty parts of the layout (the middle of the left icon rail and the space under the member list), partly off-edge. They previously sat on the sidebar, the member list, the composer and the corner controls.

How it was judged

I captured frames at 10, 15 and 20 s after load, in light, dark, phone and reduced motion. The capture script also counts visible leaves and how many sit on text. That count missed the clipping bug; only looking at the images caught it. There were three passes:

1. Fixed the clipping. The leaves appeared, but read as splats in a beige palette.
2. New shapes and palette. Good in light mode, but the leaves nearly vanished in dark, and the resting leaves covered controls.
3. Brightened the leaves in dark mode and moved the resting leaves to empty areas. This is the pass shown below.

Light, 15 s in (left: before, right: after)

Dark, 15 s in

Reduced motion and phone at 20 s (before / after / before / after)

Close-up of the new leaves (light theme, actual size)

Open questions for the reviewer

• Falling leaves still pass over text now and then, for a second each; the text stays readable underneath (see the dark frame). Is that acceptable, or should leaves avoid the reading column?
• Is the light-theme intensity right? It's gentle, not loud.
• The sun-shaft light bands and the warm wash are unchanged. Should they be kept, toned down or dropped?
• Not in this pass: the "leaf pile" idea and any other features.

## Pass 1 is ready for human review: PR #241 (branch `seasonal/autumn`) **The theme doesn't change on `lotus` until a human merges the PR. Only a human closes this issue.** ### What changed - **The main problem was a bug, not the design.** Every falling leaf sat in a leaf-sized wrapper pinned to the top of the screen, and that wrapper had `contain: layout paint style`. Paint containment clips children to the box, so each leaf stopped being drawn as soon as it fell out of its first ~40 px. That's why Autumn looked empty. The page still reported 10–16 leaves on screen, because a position check doesn't see the clipping; only the rendered image showed it. It's now `contain: layout style`. - **Leaf shapes:** a flag-style maple with bold lobes and a stem, which stays recognisable at 30 px (the old outline read as a star or splat), an oak with a stem, and a new aspen. Each has a gradient body and darker veins. - **Palette:** crimson, pumpkin orange, gold, russet and burnt orange, instead of muted tans that read as beige on the light theme. - **Density:** 12 leaves (was 16) at 28–52 px, with opacity capped at 0.5–0.65 so text under a passing leaf stays readable. - **Dark themes:** the leaves are brightened there. In the first redesign pass they sank into the dark warm wash. - **Reduced motion:** the resting leaves moved into empty parts of the layout (the middle of the left icon rail and the space under the member list), partly off-edge. They previously sat on the sidebar, the member list, the composer and the corner controls. ### How it was judged I captured frames at 10, 15 and 20 s after load, in light, dark, phone and reduced motion. The capture script also counts visible leaves and how many sit on text. That count missed the clipping bug; only looking at the images caught it. There were three passes: 1. Fixed the clipping. The leaves appeared, but read as splats in a beige palette. 2. New shapes and palette. Good in light mode, but the leaves nearly vanished in dark, and the resting leaves covered controls. 3. Brightened the leaves in dark mode and moved the resting leaves to empty areas. This is the pass shown below. **Light, 15 s in** (left: before, right: after)  **Dark, 15 s in**  **Reduced motion and phone at 20 s** (before / after / before / after)  **Close-up of the new leaves** (light theme, actual size)  **Open questions for the reviewer** - Falling leaves still pass over text now and then, for a second each; the text stays readable underneath (see the dark frame). Is that acceptable, or should leaves avoid the reading column? - Is the light-theme intensity right? It's gentle, not loud. - The sun-shaft light bands and the warm wash are unchanged. Should they be kept, toned down or dropped? - Not in this pass: the "leaf pile" idea and any other features.

jared referenced this issue 2026-09-25 13:37:17 -04:00

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

jared referenced this issue 2026-09-25 13:37:17 -04:00

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

jared referenced this issue from a commit 2026-09-25 13:58:21 -04:00

feat(seasonal): Autumn pass 2 — no tint, a gust, a real preview (#237)

jared commented 2026-09-25 13:58:40 -04:00

Author

Owner

Copy Link

Copy Source

Pass 2 is ready for human review (PR #241, now at 3e132069)

Jared said the orange tint felt off and asked me to keep redesigning until I was satisfied. These are the changes since pass 1, each judged on renders:

• Tint removed. The amber wash, sun-shaft bands and vignette are gone. They turned the user's theme beige (muddy brown on dark) and lowered contrast everywhere. Autumn is now the app as it is, with leaves.
• Dust motes removed. They were invisible specks that added nothing.
• New: a gust. About every 42 s (the first ~8 s after load), five leaves blow across the screen together, rising and spinning, in about 5 s. I tracked their positions frame by frame. The first version stalled mid-screen for a second, because an eased timing curve is applied to each keyframe segment. It now uses linear timing and keeps moving.
• Softer flutter. Leaves used to flatten into slivers mid-flip.
• Stronger leaf colour (opacity 0.58–0.73, a less pale gold) and brighter leaves on the dark themes.
• Phones with reduced motion. A phone has no icon rail, so the resting leaves were landing on the timeline icons. They now tuck further off-edge and are smaller.
• Settings thumbnail. It used the reduced scene and came out as a black square with two leaf fragments at its edges. A new optional preview prop on the seasonal overlays lets Autumn draw a composition made for the tile.
• Performance: 60 fps with the theme on and off; the 95th-percentile frame is 16.7 ms either way.

Light: original vs now

Dark: original vs now

Reduced motion (desktop), phone, and phone with reduced motion

A gust passing, full size (t ≈ 10 s)

Settings thumbnail

Still open for the reviewer

• Leaves still cross text for a moment as they fall, and the gust briefly crosses the middle of the screen. Text stays readable underneath.
• With reduced motion on a phone the scene is very calm (a few leaves tucked at the edges). I chose that deliberately, since there's no empty space on a phone.

Only a human approves this, merges PR #241 and closes #237.

## Pass 2 is ready for human review (PR #241, now at `3e132069`) Jared said the orange tint felt off and asked me to keep redesigning until I was satisfied. These are the changes since pass 1, each judged on renders: - **Tint removed.** The amber wash, sun-shaft bands and vignette are gone. They turned the user's theme beige (muddy brown on dark) and lowered contrast everywhere. Autumn is now the app as it is, with leaves. - **Dust motes removed.** They were invisible specks that added nothing. - **New: a gust.** About every 42 s (the first ~8 s after load), five leaves blow across the screen together, rising and spinning, in about 5 s. I tracked their positions frame by frame. The first version stalled mid-screen for a second, because an eased timing curve is applied to each keyframe segment. It now uses linear timing and keeps moving. - **Softer flutter.** Leaves used to flatten into slivers mid-flip. - **Stronger leaf colour** (opacity 0.58–0.73, a less pale gold) and brighter leaves on the dark themes. - **Phones with reduced motion.** A phone has no icon rail, so the resting leaves were landing on the timeline icons. They now tuck further off-edge and are smaller. - **Settings thumbnail.** It used the reduced scene and came out as a black square with two leaf fragments at its edges. A new optional `preview` prop on the seasonal overlays lets Autumn draw a composition made for the tile. - **Performance:** 60 fps with the theme on and off; the 95th-percentile frame is 16.7 ms either way. **Light: original vs now**  **Dark: original vs now**  **Reduced motion (desktop), phone, and phone with reduced motion**  **A gust passing, full size (t ≈ 10 s)**  **Settings thumbnail**  **Still open for the reviewer** - Leaves still cross text for a moment as they fall, and the gust briefly crosses the middle of the screen. Text stays readable underneath. - With reduced motion on a phone the scene is very calm (a few leaves tucked at the edges). I chose that deliberately, since there's no empty space on a phone. Only a human approves this, merges PR #241 and closes #237.

jared referenced a pull request that will close this issue 2026-09-25 13:58:41 -04:00

Seasonal: Autumn redesign (#237), needs human approval #241

jared closed this issue 2026-09-25 14:29:08 -04:00

jared referenced this issue from a commit 2026-09-25 14:29:09 -04:00

Merge pull request 'Seasonal: Autumn redesign (#237), needs human approval' (#241) from seasonal/autumn into lotus

Sign in to join this conversation.

No Branch/Tag Specified

Branches Tags

lotus

update-packages

sw-fix

read-me-update

image-path-changes

dm-calls

fix-2469

renovate/element-hq-element-call-embedded-0.x

renovate/npm-i18next-http-backend-vulnerability

renovate/npm-vite-vulnerability

dev

docs-update

more-theme

fix-257

imporve-thread-reply

revert-2402-improve-menu-congestion

mxidColor-toggle

update-sw-main-msg

v4.11.1

v4.10.5

v4.10.4

v4.10.3

v4.10.2

v4.10.1

v4.10.0

v4.9.1

v4.9.0

v4.8.1

v4.8.0

v4.7.1

v4.7.0

v4.6.0

v4.5.1

v4.5.0

v4.4.0

v4.3.2

v4.3.0

v4.2.3

v4.2.2

v4.2.1

v4.2.0

v4.1.0

v4.0.3

v4.0.0

v3.2.0

v3.1.0

v3.0.0

v2.2.6

v2.2.5

v2.2.4

v2.2.3

v2.2.2

v2.2.1

v2.2.0

v2.1.3

v2.1.2

v2.1.1

v2.1.0

v2.0.4

v2.0.3

v2.0.2

v2.0.1

v2.0.0

v1.8.2

v1.8.1

v1.8.0

v1.7.0

v1.6.1

v1.6.0

v1.5.1

v1.5.0

v1.4.0

v1.3.2

v1.3.1

v1.3.0

v1.2.1

v1.2.0

v1.1.0

v1.0.0

Labels

Clear labels

a11y

Accessibility: keyboard, screen reader, contrast, motion

area: appearance

Client area: appearance

area: auth-session

Client area: auth-session

area: build-ci

Client area: build-ci

area: calls

Client area: calls

area: desktop

Client area: desktop

area: media

Client area: media

area: messaging

Client area: messaging

area: mobile

Client area: mobile

area: moderation

Client area: moderation

area: navigation

Client area: navigation

area: notifications

Client area: notifications

area: settings

Client area: settings

area: threads

Client area: threads

bug

Something is not working

dependencies

Third-party package versions and advisories

docs

README / LOTUS_* docs wrong or missing

duplicate

This issue or pull request already exists

enhancement

New feature

help wanted

Need some help

invalid

Something is wrong

needs-human-review

performance

Re-render storms, leaks, heavy work on hot paths

planning

priority: critical

Data loss, security hole, or crash on a main path

priority: high

Broken feature or serious usability problem

priority: low

Minor issue or polish

priority: medium

Wrong behaviour in an edge case or notable degradation

qa

Manual QA: shipped, needs a human in a real environment

question

More information is needed

research

security

XSS, unsafe URLs, data leaks, auth/session

tech-debt

Code health, dead code, fragile patterns

ux

Usability or visual inconsistency

wontfix

This won't be fixed

No labels area: appearance enhancement needs-human-review ux

Milestone

No items

No Milestone

Projects

Clear projects

No projects

Assignees

Clear assignees

cole (Cole Keller) jared (Jared Vititoe) nathan (Nathan Vititoe)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: LotusGuild/cinny#237