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%',
|
|||
|
|
},
|
|||
|
|
});
|