Seasonal & Holiday Theming

The HTML report supports seasonal and holiday themes with different mascots, particles, and glow effects.

Theme system

getTheme(date) in html-report.ts returns a ThemeKey. Holidays are checked first (they override seasons).

Currently hardcoded to summer (white sparkles, default mascot) until all seasonal assets are finalized. To enable auto-detection, change:

// const theme: ThemeKey = 'summer';
const theme = getTheme(new Date());

Holidays (checked first, by date range)

Theme key	Date range	Particles	Mascot	Glow
new-year	Dec 30 – Jan 2	🎆 sparkle	default	gold
valentines	Feb 13 – Feb 15	💕 petal	default	pink
easter	Thu before – Mon after Easter	🐣 petal	default	warm yellow
may17	May 16 – May 18	🇳🇴 petal	default	red
midsummer	Jun 20 – Jun 24	🌻 petal	default	warm yellow
halloween	Oct 25 – Nov 1	🎃 leaf	halloween	orange
christmas	Dec 1 – Dec 29	❄ snowflake	christmas	ice blue

Easter is computed dynamically using the Anonymous Gregorian algorithm (easterSunday(year)).

Seasons (fallback)

Theme key	Months	Particles	Mascot	Glow
winter	Jan–Feb	❄ snowflake	default	ice blue
spring	Mar–May	🌸 petal	default	pink
summer	Jun–Aug	✦ sparkle (CSS diamond)	default	white
autumn	Sep–Nov	🍂 leaf	default	orange

Config structure

THEME_CONFIG maps each ThemeKey to:

• particles — emoji/character for floating particles in the hero header
• particleShape — CSS class suffix (shape-snowflake, shape-petal, shape-sparkle, shape-leaf)
• mascot — key into MASCOT_ASSETS ('default', 'christmas', 'halloween')
• glow — rgba() color for the hero corner glow animation

Mascot assets

Key	File	Status
default	bubbles-normal.ts	Done (Bubbles normal, 200px height, ~50KB base64)
christmas	bubbles-christmas.ts	Done (Bubbles with Santa hat, ~43KB)
halloween	bubbles-halloween.ts	Done (Bubbles halloween variant, ~54KB)

Source PNGs are in /Users/nicolay/Cavai/CavaiAssets/. Original resolution ~3000px, resized to 200px height (retina) using sips -Z 200.

How to add a new mascot

1. Export the image as PNG (transparent background)
2. Resize to ~200px height: sips -Z 200 image.png
3. Convert to base64: base64 -i image.png | tr -d '\n'
4. Create a new file like bubbles-spring.ts:

   export const BUBBLES_SPRING_BASE64 = 'data:image/png;base64,...';

5. Import in html-report.ts:

   import { BUBBLES_SPRING_BASE64 } from './bubbles-spring.js';

6. Add to MASCOT_ASSETS:

   spring: BUBBLES_SPRING_BASE64,

7. Update THEME_CONFIG entries that should use this mascot

Hero glow

The hero header has a ::after pseudo-element with a radial gradient positioned in the bottom-right corner (where the mascot is). It uses --season-glow CSS custom property and pulses with a 5s glow-pulse animation. The on-brand Cavai gradient is always preserved — the glow is purely additive.

Console preview

setSeason(themeKey) is available in the browser console for previewing any theme. It animates the mascot swap (slide out/in), updates particles, and changes the glow color. Available keys: all theme keys above plus normal (alias for summer).

TODO: Future assets

Particle assets

Currently particles use emoji characters. Could be replaced with proper SVG/PNG:

• Snowflake — delicate, white, semi-transparent (winter/christmas)
• Cherry blossom petal — soft pink, organic shape (spring)
• Leaf — warm orange/brown, organic (autumn)
• Holiday-specific — fireworks, Easter eggs, flags, etc.

Additional mascot variants

• Spring — Bubbles with flowers?
• Summer — Bubbles with sunglasses?
• Autumn — Bubbles with scarf?
• Valentine's — Bubbles with hearts?

Future enhancements

• Gradient tweaks — warm tones in summer, cooler in winter
• Animation variants — snowfall drift vs. petal scatter vs. leaf tumble
• User override — allow metadata to force a specific theme