jared
02b2ce8109
Same treatment as the seasonal themes: split the 502-line chatBackground.ts Record into one premium module per background under lotus/backgrounds/ (each exposes a tuned dark + light ChatBgVariants), one Opus agent per background against a shared brief. chatBackground.ts now assembles DARK/LIGHT from the modules; getChatBg is unchanged. Carbon + Aurora are kept inline as-is (user favorites); none stays the empty layer. Every redesign: layered oklch palettes, seamless tiling with worked-out tile math (integer-multiple periods; edge-wrapping inline-SVG data-URIs for circuit/hexgrid/waves/herringbone/chevron/tactical), independently-tuned dark+light (not a recolor), and low "felt-not-read" opacity so chat text stays WCAG-AA legible. The 5 animated backgrounds (rain, star drift, grid pulse, aurora flow, fireflies) each colocate a vanilla-extract keyframe .css.ts, animate only background-position for a jump-free loop, and — since getChatBg strips animation for reduced-motion — render a finished static frame too. Redesigned: blueprint, stars, topographic, herringbone, crosshatch, chevron, polka, triangles, plaid, tactical, circuit, hexgrid, waves, neon, anim-rain, anim-stars, anim-pulse, anim-aurora, anim-fireflies. Gates: tsc clean, ESLint clean, Prettier clean, build OK, 551 tests pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
92 lines
4.3 KiB
TypeScript
92 lines
4.3 KiB
TypeScript
import { ChatBgVariants } from './types';
|
|
|
|
// stars — a deep-space starfield with subtle depth.
|
|
//
|
|
// Concept: three parallax layers of stars at different tile sizes and offsets
|
|
// (so the repeat never lines up and reads as a genuine random field), lifted
|
|
// onto a faint deep-blue->violet nebula wash for depth, and finished with a
|
|
// gentle center vignette that keeps the reading column the calmest area of the
|
|
// canvas. Every layer is a stacked radial-gradient — pure CSS, no assets.
|
|
//
|
|
// Layer stacking order (topmost first, as CSS paints image #1 on top):
|
|
// 1. bright near stars (crisp, sparse, largest tile)
|
|
// 2. mid stars (dimmer, medium tile)
|
|
// 3. faint blue far stars (haze, smallest tile — most repeats, least visible)
|
|
// 4. calming center vignette
|
|
// 5. nebula wash (deep blue -> violet)
|
|
// The three star tiles use coprime-ish sizes (137/191/233 dark) so their least
|
|
// common repeat is enormous and no seam is perceivable.
|
|
|
|
export const stars: ChatBgVariants = {
|
|
// Dark: bright/dim white + faint blue stars on a near-black cosmos, with a
|
|
// deep-blue->violet nebula and a soft vignette that darkens the calm center.
|
|
dark: {
|
|
backgroundColor: 'oklch(0.16 0.03 275)',
|
|
backgroundImage: [
|
|
// 1. bright near stars — crisp cool-white, sparse
|
|
'radial-gradient(circle at center, oklch(0.98 0.01 260 / 0.85) 0.6px, transparent 1.4px)',
|
|
// 2. mid stars — softer, more of them
|
|
'radial-gradient(circle at center, oklch(0.92 0.02 265 / 0.55) 0.6px, transparent 1.3px)',
|
|
// 3. faint blue far dust — the parallax haze
|
|
'radial-gradient(circle at center, oklch(0.80 0.06 255 / 0.30) 0.5px, transparent 1.1px)',
|
|
// 4. center vignette — keeps the reading column calmest
|
|
'radial-gradient(ellipse 120% 90% at 50% 42%, transparent 42%, oklch(0.10 0.03 270 / 0.55) 100%)',
|
|
// 5. nebula wash — deep blue -> violet drift
|
|
'radial-gradient(ellipse 140% 120% at 78% 12%, oklch(0.25 0.08 280 / 0.55) 0%, transparent 55%)',
|
|
'radial-gradient(ellipse 130% 110% at 18% 92%, oklch(0.20 0.06 250 / 0.50) 0%, transparent 58%)',
|
|
].join(','),
|
|
backgroundSize: [
|
|
'137px 137px', // near stars
|
|
'191px 191px', // mid stars
|
|
'233px 233px', // far dust
|
|
'100% 100%', // vignette
|
|
'100% 100%', // nebula A
|
|
'100% 100%', // nebula B
|
|
].join(','),
|
|
backgroundPosition: [
|
|
'0 0', // near
|
|
'61px 43px', // mid (offset breaks alignment)
|
|
'113px 97px', // far (offset again)
|
|
'0 0', // vignette
|
|
'0 0', // nebula A
|
|
'0 0', // nebula B
|
|
].join(','),
|
|
},
|
|
|
|
// Light: an airy pre-dawn sky. No literal white stars on white — instead very
|
|
// soft pale sparkles paired with the faintest cool-grey speckles, floated on a
|
|
// gentle cool gradient. Reads as elegant atmosphere, never as noise over text.
|
|
light: {
|
|
backgroundColor: 'oklch(0.965 0.008 255)',
|
|
backgroundImage: [
|
|
// 1. pale warm pre-dawn sparkles — a hair brighter than the sky
|
|
'radial-gradient(circle at center, oklch(0.995 0.015 90 / 0.55) 0.6px, transparent 1.4px)',
|
|
// 2. tiny cool speckles — the merest hint of darkness for texture/contrast
|
|
'radial-gradient(circle at center, oklch(0.62 0.05 260 / 0.16) 0.5px, transparent 1.2px)',
|
|
// 3. faint far dust — very soft, most-repeated layer
|
|
'radial-gradient(circle at center, oklch(0.70 0.04 255 / 0.12) 0.5px, transparent 1.1px)',
|
|
// 4. center vignette — brightens the calm reading center slightly
|
|
'radial-gradient(ellipse 120% 90% at 50% 44%, oklch(1 0 0 / 0.45) 30%, transparent 100%)',
|
|
// 5. pre-dawn wash — cool blue high, warm blush low
|
|
'radial-gradient(ellipse 150% 120% at 80% 8%, oklch(0.90 0.05 255 / 0.60) 0%, transparent 60%)',
|
|
'radial-gradient(ellipse 140% 120% at 15% 95%, oklch(0.93 0.04 40 / 0.45) 0%, transparent 62%)',
|
|
].join(','),
|
|
backgroundSize: [
|
|
'149px 149px', // sparkles
|
|
'199px 199px', // speckles
|
|
'251px 251px', // far dust
|
|
'100% 100%', // vignette
|
|
'100% 100%', // wash A
|
|
'100% 100%', // wash B
|
|
].join(','),
|
|
backgroundPosition: [
|
|
'0 0', // sparkles
|
|
'71px 53px', // speckles
|
|
'127px 109px', // far dust
|
|
'0 0', // vignette
|
|
'0 0', // wash A
|
|
'0 0', // wash B
|
|
].join(','),
|
|
},
|
|
};
|