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>
50 lines
2.3 KiB
TypeScript
50 lines
2.3 KiB
TypeScript
import { keyframes } from '@vanilla-extract/css';
|
||
|
||
// Aurora Flow — a SLOW, gentle pan of layered soft aurora ribbons.
|
||
//
|
||
// The living-aurora illusion is a pure `background-position` drift: each
|
||
// comma-separated gradient layer is authored larger than the viewport
|
||
// (backgroundSize 200%–300%, see animAurora.ts) so there is slack to slide it
|
||
// around. Panning several broad blurred bands by DIFFERENT
|
||
// amounts and along DIFFERENT paths makes the ribbons appear to curl and cross
|
||
// like real northern lights — no single layer ever moves in lockstep.
|
||
//
|
||
// LAYER ORDER (must match animAurora.ts exactly — one position value per layer):
|
||
// 1. green ribbon (drifts a wide, lazy horizontal arc)
|
||
// 2. teal ribbon (drifts on a slower, offset diagonal)
|
||
// 3. violet ribbon (drifts vertically, the "curtain" fold)
|
||
// 4. sky/aqua highlight (small counter-drift for shimmer)
|
||
// 5. calm reading core (STATIC — kept at 50% 50% so the center never moves)
|
||
// 6. vignette (STATIC — kept at 50% 50% so edges never move)
|
||
//
|
||
// SEAMLESS LOOP: every animated layer starts and ends on the SAME position
|
||
// ('0%'/'100%' being identical sample points of the repeating gradient tile),
|
||
// so one period returns each band to its origin with no visible jump. The two
|
||
// static layers list their fixed position at every stop so they never pan.
|
||
//
|
||
// SLOW & GENTLE: paired with a long duration + ease-in-out in animAurora.ts, the
|
||
// motion reads as a barely-perceptible breathing drift, keeping the reading
|
||
// center calm and text crisp.
|
||
//
|
||
// getChatBg adds `willChange: 'background-position'` here and STRIPS the whole
|
||
// `animation` for prefers-reduced-motion / pause-animations, at which point the
|
||
// static `backgroundPosition` authored in animAurora.ts is what shows — already
|
||
// a finished, gorgeous aurora.
|
||
export const auroraFlow = keyframes({
|
||
'0%': {
|
||
backgroundPosition: '0% 30%, 100% 70%, 50% 0%, 20% 80%, 50% 50%, 50% 50%',
|
||
},
|
||
'25%': {
|
||
backgroundPosition: '35% 45%, 70% 55%, 55% 35%, 45% 60%, 50% 50%, 50% 50%',
|
||
},
|
||
'50%': {
|
||
backgroundPosition: '65% 60%, 40% 40%, 45% 70%, 70% 35%, 50% 50%, 50% 50%',
|
||
},
|
||
'75%': {
|
||
backgroundPosition: '35% 45%, 70% 55%, 55% 35%, 45% 60%, 50% 50%, 50% 50%',
|
||
},
|
||
'100%': {
|
||
backgroundPosition: '0% 30%, 100% 70%, 50% 0%, 20% 80%, 50% 50%, 50% 50%',
|
||
},
|
||
});
|