LotusGuild/cinny
3
0
Fork 0
Code Issues 48 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

[Seasonal · human approval required] Halloween: better design & features #239

New Issue
Closed
opened 2026-09-25 13:03:47 -04:00 by jared · 2 comments
jared commented 2026-09-25 13:03:47 -04:00
Owner
Copy Link
Copy Source

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

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

What it does today

Haunted indigo wash, a toxic-green moon glow, flying bats, a corner cobweb and ember sparks.

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.

Halloween baseline

What the render shows:

  • The green moon glow is a large blurred blob sitting directly over the members list — "Joined", the member search box and "alice" become unreadable. Same on a phone over the room header.
  • Bats are tiny and look like dark smudges; the cobweb isn't noticeable.
  • The purple wash lowers contrast across the whole app.
  • 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)

  • Move the moon to an empty area and make it a moon (crisp disc + soft glow), not a blob.
  • Bigger, fewer bats with a clear flight path at the edges; a visible corner cobweb.
  • Optional: jack-o'-lantern, occasional ghost drifting across an empty area.

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/halloween.
  • A human closes this issue.
## Halloween 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/halloween`) and reaches `lotus` only when a human merges it. **Active:** Oct 15 – Nov 1 (auto), or any time via Settings → General → Seasonal Theme **Code:** `src/app/components/seasonal/themes/Halloween.tsx` + `Halloween.css.ts`; schedule in `seasonSchedule.ts` ### What it does today Haunted indigo wash, a toxic-green moon glow, flying bats, a corner cobweb and ember sparks. ### 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. ![Halloween baseline](https://code.lotusguild.org/attachments/74b72f87-1e43-4e47-a6e2-f71cb4dbf369) What the render shows: - The green moon glow is a **large blurred blob sitting directly over the members list** — "Joined", the member search box and "alice" become unreadable. Same on a phone over the room header. - Bats are tiny and look like dark smudges; the cobweb isn't noticeable. - The purple wash lowers contrast across the whole app. - 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) - Move the moon to an empty area and make it a moon (crisp disc + soft glow), not a blob. - Bigger, fewer bats with a clear flight path at the edges; a visible corner cobweb. - Optional: jack-o'-lantern, occasional ghost drifting across an empty area. ### 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/halloween`. - [ ] A human closes this issue.
halloween-baseline.png
1011 KiB
hw-cmp-light.png
515 KiB
hw-cmp-dark.png
731 KiB
hw-cmp-rp.png
690 KiB
hw-h2-bats.png
18 KiB
hw-h2-ghost.png
52 KiB
hw-tile.png
73 KiB
hw-m2-light.png
424 KiB
hw-witch-close.png
17 KiB
hw-m2-phone.png
118 KiB
hw-m4.png
351 KiB
hw-cmp-light.png hw-cmp-dark.png hw-cmp-rp.png hw-h2-bats.png hw-h2-ghost.png hw-tile.png hw-m2-light.png hw-witch-close.png hw-m2-phone.png hw-m4.png
jared added the enhancementuxarea: appearanceneeds-human-review labels 2026-09-25 13:03:47 -04:00
jared commented 2026-09-25 14:51:05 -04:00
Author
Owner
Copy Link
Copy Source

Redesign ready for human review: PR #242 (branch seasonal/halloween)

The same approach as Autumn: no tint, and motifs that read clearly over the app. Only a human approves this, merges it and closes #239.

What changed

  • Removed: the full-screen purple wash, the fog and the blurred green "moon". The moon sat over the member list and made it unreadable, including with reduced motion and on phones. As with Autumn, the app now looks like itself.
  • Corner cobwebs: threads radiate from the corner with sagging catch-rings. They're thin, readable in both themes, and smaller on phones.
  • A spider on a thread: it hangs in the empty space under the member list (near the top on phones), bobbing and swaying.
  • Bats: every 30 s (the first ~5 s after load), a group of four flaps across the top of the screen. They use a real bat silhouette, and the wing beat no longer flattens them into dashes.
  • A ghost: every 50 s (the first ~16 s after load), a small ghost rises and fades. It has an outline so it shows on light themes, and it's see-through, so text stays readable as it passes (checked on a phone, where it crossed a message).
  • Theme-aware colour: silhouettes are dark on light themes and a pale dusk-violet on dark themes, because a black bat on a black theme is invisible.
  • Reduced motion: the webs and the spider at rest; no bats or ghost.
  • Settings thumbnail: a night sky with a crescent moon, a bat across it and a corner web.
  • Performance: 60 fps with the theme on and off; the 95th-percentile frame is 16.7 ms either way.

The three passes

  1. Cleaner, but the bats were small and flattened into dashes mid-flap, and the spider hung right next to a member's name.
  2. Bigger bats with a gentler flap, the spider moved into empty space, and a ghost added. The ghost was nearly opaque and hid a message on a phone.
  3. The ghost made see-through, and a bat added across the moon in the Settings thumbnail.

Light: before, then bats at 8 s, then the ghost at 19 s
light

Dark: before vs after
dark

Reduced motion and phone (before / after / before / after)
reduced and phone

Close-ups: the bats, and the ghost over the timeline
bats ghost

Settings thumbnail
tile

For the reviewer

  • Bats cross the header and the ghost crosses text for a few seconds each. Both are occasional, and the ghost is see-through.
  • The webs' thin threads cross the Home badge and the members close button (they're purely decorative, so clicks go straight through).
  • Is this "Halloween enough"? It is restrained on purpose. Pumpkins were left out because every candidate spot lands on UI.
## Redesign ready for human review: PR #242 (branch `seasonal/halloween`) The same approach as Autumn: no tint, and motifs that read clearly over the app. Only a human approves this, merges it and closes #239. ### What changed - **Removed:** the full-screen purple wash, the fog and the blurred green "moon". The moon sat over the member list and made it unreadable, including with reduced motion and on phones. As with Autumn, the app now looks like itself. - **Corner cobwebs:** threads radiate from the corner with sagging catch-rings. They're thin, readable in both themes, and smaller on phones. - **A spider on a thread:** it hangs in the empty space under the member list (near the top on phones), bobbing and swaying. - **Bats:** every 30 s (the first ~5 s after load), a group of four flaps across the top of the screen. They use a real bat silhouette, and the wing beat no longer flattens them into dashes. - **A ghost:** every 50 s (the first ~16 s after load), a small ghost rises and fades. It has an outline so it shows on light themes, and it's see-through, so text stays readable as it passes (checked on a phone, where it crossed a message). - **Theme-aware colour:** silhouettes are dark on light themes and a pale dusk-violet on dark themes, because a black bat on a black theme is invisible. - **Reduced motion:** the webs and the spider at rest; no bats or ghost. - **Settings thumbnail:** a night sky with a crescent moon, a bat across it and a corner web. - **Performance:** 60 fps with the theme on and off; the 95th-percentile frame is 16.7 ms either way. ### The three passes 1. Cleaner, but the bats were small and flattened into dashes mid-flap, and the spider hung right next to a member's name. 2. Bigger bats with a gentler flap, the spider moved into empty space, and a ghost added. The ghost was nearly opaque and hid a message on a phone. 3. The ghost made see-through, and a bat added across the moon in the Settings thumbnail. **Light: before, then bats at 8 s, then the ghost at 19 s** ![light](https://code.lotusguild.org/attachments/c78dd476-2971-4b9c-b214-5829e6c30da9) **Dark: before vs after** ![dark](https://code.lotusguild.org/attachments/cce8d9e0-5571-41bd-b692-bd0c1f45da10) **Reduced motion and phone** (before / after / before / after) ![reduced and phone](https://code.lotusguild.org/attachments/e88b7b91-3e14-46aa-88c5-a3b1a2f95b94) **Close-ups: the bats, and the ghost over the timeline** ![bats](https://code.lotusguild.org/attachments/d0cb2985-aee1-4419-ad29-ece4b9c38544) ![ghost](https://code.lotusguild.org/attachments/846934c5-410e-4f1e-9247-96d6ade08fb4) **Settings thumbnail** ![tile](https://code.lotusguild.org/attachments/d850b6e4-335b-4a2a-9a7c-3b0407db58cf) **For the reviewer** - Bats cross the header and the ghost crosses text for a few seconds each. Both are occasional, and the ghost is see-through. - The webs' thin threads cross the Home badge and the members close button (they're purely decorative, so clicks go straight through). - Is this "Halloween enough"? It is restrained on purpose. Pumpkins were left out because every candidate spot lands on UI.
jared commented 2026-09-25 15:17:38 -04:00
Author
Owner
Copy Link
Copy Source

More going on (PR #242, now at the latest commit)

Jared felt the first pass was too sparse for a full theme, and the numbers agreed: most of the time only two webs and a spider were on screen. Added:

  • Will-o'-the-wisps: six soft green and orange glows that wander and pulse. They're always there while the theme animates. They're left out of the still (reduced-motion) scene because I tried it, and still glows sat permanently on a room name, a message and a timestamp.
  • A witch on a broomstick: crosses just below the header about once a minute (first at ~22 s). Her first drawing read as a blob, so she was redrawn as a seated figure with a hat, cloak, arm and boot (close-up below).
  • More bats: the group now flies every 20 s instead of 30, plus a faster swarm of eight every 60 s.
  • The big spider climbs: it climbs its thread and drops back with a small bounce.
  • A second small spider on the left web.
  • A tiny jack-o'-lantern with a flickering candle, hanging by the right web (desktop only). It sits in the gap between the "2 Members" title and the close button.

Still no tint and nothing opaque over messages. Performance is unchanged (60 fps; the 95th-percentile frame is 16.8 ms on vs 16.7 ms off).

Quiet moment at 12 s, light and dark (wisps, spiders, lantern)
quiet

The witch
witch

Phone: witch and bats at 27 s, the swarm at 41 s
phone

Light 27 s · dark 12 s · reduced motion · phone 27 s
all

Only a human approves this, merges PR #242 and closes #239.

## More going on (PR #242, now at the latest commit) Jared felt the first pass was too sparse for a full theme, and the numbers agreed: most of the time only two webs and a spider were on screen. Added: - **Will-o'-the-wisps:** six soft green and orange glows that wander and pulse. They're always there while the theme animates. They're left out of the still (reduced-motion) scene because I tried it, and still glows sat permanently on a room name, a message and a timestamp. - **A witch on a broomstick:** crosses just below the header about once a minute (first at ~22 s). Her first drawing read as a blob, so she was redrawn as a seated figure with a hat, cloak, arm and boot (close-up below). - **More bats:** the group now flies every 20 s instead of 30, plus a faster swarm of eight every 60 s. - **The big spider climbs:** it climbs its thread and drops back with a small bounce. - **A second small spider** on the left web. - **A tiny jack-o'-lantern** with a flickering candle, hanging by the right web (desktop only). It sits in the gap between the "2 Members" title and the close button. Still no tint and nothing opaque over messages. Performance is unchanged (60 fps; the 95th-percentile frame is 16.8 ms on vs 16.7 ms off). **Quiet moment at 12 s, light and dark** (wisps, spiders, lantern) ![quiet](https://code.lotusguild.org/attachments/accaceb2-eb22-46c8-9143-7e785bf75fc6) **The witch** ![witch](https://code.lotusguild.org/attachments/f3e927a9-c5ed-4c41-a425-ad9db8d7ee21) **Phone: witch and bats at 27 s, the swarm at 41 s** ![phone](https://code.lotusguild.org/attachments/87ddcad8-7cd3-4403-bc94-6054448897ee) **Light 27 s · dark 12 s · reduced motion · phone 27 s** ![all](https://code.lotusguild.org/attachments/6d7794fd-f0ac-4445-a1c3-4be3a56ff3d3) Only a human approves this, merges PR #242 and closes #239.
jared closed this issue 2026-09-25 15:33:53 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
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
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: LotusGuild/cinny#239