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

[Seasonal · human approval required] New Year: better design & features #230

New Issue
Open
opened 2026-09-25 13:03:43 -04:00 by jared · 1 comment
jared commented 2026-09-25 13:03:43 -04:00
Owner
Copy Link
Copy Source

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

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

What it does today

Midnight celebration: a navy wash, firework bursts drawn as expanding rings, a champagne-gold shimmer, falling confetti and twinkling stars.

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.

New Year baseline

What the render shows:

  • The firework rings are large, solid and very saturated (magenta/cyan/coral). Mid-animation they sit on top of message text in the timeline and the room header area; on a phone three rings overlap and cover several messages at once.
  • With reduced motion a full ring is still frozen over the timeline, so the static version has the same legibility problem.
  • The rings read as "targets"/UI highlights more than fireworks — no trails, sparks or fade.
  • 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)

  • Fireworks that burst outside the reading column (edges, top band) and fade fast; sparks/trails instead of hard rings.
  • A countdown moment around midnight local time (opt-in), e.g. a brief burst when the clock rolls over.
  • A calmer static version for reduced motion (a single small burst in a corner, confetti at the edges).

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/newyear.
  • A human closes this issue.
## New Year 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/newyear`) and reaches `lotus` only when a human merges it. **Active:** Dec 31 – Jan 2 (auto), or any time via Settings → General → Seasonal Theme **Code:** `src/app/components/seasonal/themes/NewYear.tsx` + `NewYear.css.ts`; schedule in `seasonSchedule.ts` ### What it does today Midnight celebration: a navy wash, firework bursts drawn as expanding rings, a champagne-gold shimmer, falling confetti and twinkling stars. ### 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. ![New Year baseline](https://code.lotusguild.org/attachments/f16366f0-b83f-4aa3-8602-fbe8a626f680) What the render shows: - The firework rings are large, solid and very saturated (magenta/cyan/coral). Mid-animation they sit **on top of message text** in the timeline and the room header area; on a phone three rings overlap and cover several messages at once. - With reduced motion a full ring is still frozen over the timeline, so the static version has the same legibility problem. - The rings read as "targets"/UI highlights more than fireworks — no trails, sparks or fade. - 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) - Fireworks that burst **outside** the reading column (edges, top band) and fade fast; sparks/trails instead of hard rings. - A countdown moment around midnight local time (opt-in), e.g. a brief burst when the clock rolls over. - A calmer static version for reduced motion (a single small burst in a corner, confetti at the edges). ### 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/newyear`. - [ ] A human closes this issue.
newyear-baseline.png
1.2 MiB
jared added the enhancementuxarea: appearanceneeds-human-review labels 2026-09-25 13:03:43 -04:00
jared commented 2026-10-25 23:24:21 -04:00
Author
Owner
Copy Link
Copy Source

Iteration 1, ready for review (branch seasonal/newyear, commit d3048ea7). The PR is not set to merge on its own.

Before and after images: https://claude.ai/artifact/SxSSoJB32hZRVKMATXTpwo. The page is private to Jared.

  • Production build, real messages.
  • 1440×900 and Pixel 7, light and dark, reduced motion, and five animation frames.

The baseline render (current lotus) confirmed the issue:

  • big neon rings over message text on desktop and phone;
  • a ring frozen over the timeline in reduced motion;
  • rings that read as targets.

What changed

  • Spark bursts: 14 thin rays with ember tips that pop, drift down a little and fade within about a second.
  • Placement: only at the very top edge (fanning down through the header) or the side edges, and smaller (90–150 px, was 130–240 px).
  • Reduced motion: two faint still bursts in the top corners.

Against the hard requirements

  • Readability: the timeline is clear in every frame.
  • Reduced motion: has its own static version.
  • Performance: transform and opacity only, with one element per burst instead of three.
  • Clicks: the overlay ignores pointer events.

Open for your call

  • Top bursts briefly cross the header icons. Should they be limited to the side edges?
  • The midnight countdown burst isn't built; it would be a separate opt-in.

🤖 Generated with Claude Code

**Iteration 1, ready for review** (branch `seasonal/newyear`, commit `d3048ea7`). The PR is not set to merge on its own. **Before and after images:** https://claude.ai/artifact/SxSSoJB32hZRVKMATXTpwo. The page is private to Jared. - Production build, real messages. - 1440×900 and Pixel 7, light and dark, reduced motion, and five animation frames. **The baseline render** (current `lotus`) confirmed the issue: - big neon rings over message text on desktop and phone; - a ring frozen over the timeline in reduced motion; - rings that read as targets. **What changed** - **Spark bursts:** 14 thin rays with ember tips that pop, drift down a little and fade within about a second. - **Placement:** only at the very top edge (fanning down through the header) or the side edges, and smaller (90–150 px, was 130–240 px). - **Reduced motion:** two faint still bursts in the top corners. **Against the hard requirements** - **Readability:** the timeline is clear in every frame. - **Reduced motion:** has its own static version. - **Performance:** transform and opacity only, with one element per burst instead of three. - **Clicks:** the overlay ignores pointer events. **Open for your call** - Top bursts briefly cross the header icons. Should they be limited to the side edges? - The midnight countdown burst isn't built; it would be a separate opt-in. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
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#230