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>
82 lines
4.8 KiB
TypeScript
82 lines
4.8 KiB
TypeScript
import { CSSProperties } from 'react';
|
||
import { ChatBgVariants } from './types';
|
||
import { auroraFlow } from './animAurora.css';
|
||
|
||
// Aurora Flow — a premium ANIMATED aurora: soft ribbons of northern-lights color
|
||
// slowly drifting and curling over a deep, calm base.
|
||
//
|
||
// CONCEPT
|
||
// Broad, heavily-feathered gradient bands stacked over a deep midnight base, with
|
||
// a gentle vignette that darkens the edges and keeps the reading center calm.
|
||
// The distinct STATIC 'aurora' is a favorite still; this one earns its own slot
|
||
// by MOVING — see animAurora.css.ts, which slowly pans each ribbon along its own
|
||
// path via `background-position` so the curtains appear to fold and cross.
|
||
//
|
||
// LAYER ORDER (must stay in lockstep with auroraFlow's per-layer position list):
|
||
// 1. green ribbon 2. teal ribbon 3. violet ribbon 4. sky highlight
|
||
// 5. calm reading core (static) 6. vignette (static)
|
||
//
|
||
// READABILITY
|
||
// Every ribbon is a wide ellipse fading fully to transparent well before its
|
||
// edge, at low alpha (~0.05–0.13), so no band ever concentrates enough contrast
|
||
// under the message column to threaten WCAG-AA. Layer 5 lifts a soft, even wash
|
||
// through the vertical center — the reading zone — so text always sits on a calm,
|
||
// low-variance field. oklch() keeps every hue perceptually smooth and low-chroma.
|
||
//
|
||
// MOTION / SEAMLESS LOOP
|
||
// backgroundSize is >100% per animated layer, giving room to drift; the keyframe
|
||
// returns every band to its start over one long, ease-in-out period, so the loop
|
||
// is seamless and the motion barely-perceptible. willChange/animation are added
|
||
// (and stripped for reduced-motion) by getChatBg; the static positions below are
|
||
// the finished still that shows when motion is off.
|
||
|
||
const dark: CSSProperties = {
|
||
// Deep midnight blue — the polar night sky the aurora glows over.
|
||
backgroundColor: 'oklch(0.17 0.045 255)',
|
||
backgroundImage: [
|
||
// 1. Green ribbon — the signature aurora band.
|
||
'radial-gradient(ellipse 70% 45% at 50% 50%, oklch(0.7 0.14 160 / 0.13) 0%, oklch(0.7 0.14 160 / 0.05) 45%, transparent 72%)',
|
||
// 2. Teal ribbon — cool counterpart, offset.
|
||
'radial-gradient(ellipse 80% 40% at 50% 50%, oklch(0.65 0.12 200 / 0.12) 0%, oklch(0.65 0.12 200 / 0.04) 48%, transparent 74%)',
|
||
// 3. Violet ribbon — the high curtain fold.
|
||
'radial-gradient(ellipse 65% 55% at 50% 50%, oklch(0.55 0.13 300 / 0.11) 0%, oklch(0.55 0.13 300 / 0.04) 46%, transparent 70%)',
|
||
// 4. Sky/aqua highlight — subtle shimmer that counter-drifts.
|
||
'radial-gradient(ellipse 55% 35% at 50% 50%, oklch(0.72 0.1 220 / 0.09) 0%, transparent 65%)',
|
||
// 5. Calm reading core (static) — a soft even wash down the center column so
|
||
// message text always rests on a low-variance field.
|
||
'radial-gradient(ellipse 120% 60% at 50% 50%, oklch(0.2 0.04 255 / 0.5) 0%, transparent 70%)',
|
||
// 6. Vignette (static) — gently darkens the edges for luminous depth.
|
||
'radial-gradient(ellipse 130% 120% at 50% 50%, transparent 55%, oklch(0.12 0.04 260 / 0.55) 100%)',
|
||
].join(','),
|
||
backgroundSize: '260% 240%, 300% 260%, 240% 280%, 220% 200%, 100% 100%, 100% 100%',
|
||
backgroundPosition: '0% 30%, 100% 70%, 50% 0%, 20% 80%, 50% 50%, 50% 50%',
|
||
backgroundRepeat: 'no-repeat',
|
||
animation: `${auroraFlow} 60s ease-in-out infinite`,
|
||
};
|
||
|
||
const light: CSSProperties = {
|
||
// Pale cool base — a soft pre-dawn sky the pastel aurora dreams over.
|
||
backgroundColor: 'oklch(0.97 0.012 240)',
|
||
backgroundImage: [
|
||
// 1. Mint ribbon.
|
||
'radial-gradient(ellipse 70% 45% at 50% 50%, oklch(0.85 0.08 160 / 0.5) 0%, oklch(0.85 0.08 160 / 0.16) 45%, transparent 72%)',
|
||
// 2. Sky ribbon.
|
||
'radial-gradient(ellipse 80% 40% at 50% 50%, oklch(0.83 0.07 220 / 0.48) 0%, oklch(0.83 0.07 220 / 0.14) 48%, transparent 74%)',
|
||
// 3. Lilac ribbon — the high curtain fold.
|
||
'radial-gradient(ellipse 65% 55% at 50% 50%, oklch(0.82 0.07 300 / 0.42) 0%, oklch(0.82 0.07 300 / 0.12) 46%, transparent 70%)',
|
||
// 4. Aqua highlight — subtle shimmer that counter-drifts.
|
||
'radial-gradient(ellipse 55% 35% at 50% 50%, oklch(0.88 0.06 200 / 0.34) 0%, transparent 65%)',
|
||
// 5. Calm reading core (static) — a bright even wash down the center column
|
||
// so dark message text always rests on a light, low-variance field.
|
||
'radial-gradient(ellipse 120% 60% at 50% 50%, oklch(0.99 0.005 240 / 0.6) 0%, transparent 70%)',
|
||
// 6. Vignette (static) — a whisper of cool shade at the edges for depth.
|
||
'radial-gradient(ellipse 130% 120% at 50% 50%, transparent 55%, oklch(0.9 0.02 250 / 0.45) 100%)',
|
||
].join(','),
|
||
backgroundSize: '260% 240%, 300% 260%, 240% 280%, 220% 200%, 100% 100%, 100% 100%',
|
||
backgroundPosition: '0% 30%, 100% 70%, 50% 0%, 20% 80%, 50% 50%, 50% 50%',
|
||
backgroundRepeat: 'no-repeat',
|
||
animation: `${auroraFlow} 60s ease-in-out infinite`,
|
||
};
|
||
|
||
export const animAurora: ChatBgVariants = { dark, light };
|