74 lines
2.9 KiB
TypeScript
74 lines
2.9 KiB
TypeScript
|
import { keyframes } from '@vanilla-extract/css';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Deep Space overlay keyframes. Everything here animates ONLY transform/opacity
|
||
|
|
* so the compositor can run it cheaply. The `keyframes()` helper returns the
|
||
|
|
* generated class name string, which the component splices into inline
|
||
|
|
* `animation` shorthands.
|
||
|
|
*/
|
||
|
|
|
||
|
|
/** Cosmos breathe: the whole nebula backdrop drifts and dims almost imperceptibly. */
|
||
|
|
export const animCosmosDrift = keyframes({
|
||
|
|
'0%': { transform: 'translate3d(0, 0, 0) scale(1)', opacity: '0.9' },
|
||
|
|
'50%': { transform: 'translate3d(-1.5%, 1%, 0) scale(1.04)', opacity: '1' },
|
||
|
|
'100%': { transform: 'translate3d(0, 0, 0) scale(1)', opacity: '0.9' },
|
||
|
|
});
|
||
|
|
|
||
|
|
/** Nebula cloud drift: a single blurred cloud floats slowly across its layer. */
|
||
|
|
export const animNebulaA = keyframes({
|
||
|
|
'0%': { transform: 'translate3d(0, 0, 0) scale(1)' },
|
||
|
|
'50%': { transform: 'translate3d(4%, -3%, 0) scale(1.08)' },
|
||
|
|
'100%': { transform: 'translate3d(0, 0, 0) scale(1)' },
|
||
|
|
});
|
||
|
|
|
||
|
|
export const animNebulaB = keyframes({
|
||
|
|
'0%': { transform: 'translate3d(0, 0, 0) scale(1.05)' },
|
||
|
|
'50%': { transform: 'translate3d(-5%, 2.5%, 0) scale(1)' },
|
||
|
|
'100%': { transform: 'translate3d(0, 0, 0) scale(1.05)' },
|
||
|
|
});
|
||
|
|
|
||
|
|
/** Galaxy spiral: an exceptionally slow rotation of a distant pinwheel. */
|
||
|
|
export const animGalaxySpin = keyframes({
|
||
|
|
'0%': { transform: 'rotate(0deg) scale(1)' },
|
||
|
|
'50%': { transform: 'rotate(180deg) scale(1.03)' },
|
||
|
|
'100%': { transform: 'rotate(360deg) scale(1)' },
|
||
|
|
});
|
||
|
|
|
||
|
|
/** Tiny star twinkle: gentle opacity + micro-scale pulse. */
|
||
|
|
export const animTwinkle = keyframes({
|
||
|
|
'0%': { transform: 'scale(0.85)', opacity: '0.35' },
|
||
|
|
'50%': { transform: 'scale(1)', opacity: '1' },
|
||
|
|
'100%': { transform: 'scale(0.85)', opacity: '0.35' },
|
||
|
|
});
|
||
|
|
|
||
|
|
/** Bright star pulse: a slower, fuller bloom for the few hero stars. */
|
||
|
|
export const animStarPulse = keyframes({
|
||
|
|
'0%': { transform: 'scale(0.8) rotate(0deg)', opacity: '0.55' },
|
||
|
|
'50%': { transform: 'scale(1.15) rotate(45deg)', opacity: '1' },
|
||
|
|
'100%': { transform: 'scale(0.8) rotate(0deg)', opacity: '0.55' },
|
||
|
|
});
|
||
|
|
|
||
|
|
/** Parallax depth: a star layer drifts as if the viewer is gliding through space. */
|
||
|
|
export const animParallaxNear = keyframes({
|
||
|
|
'0%': { transform: 'translate3d(0, 0, 0)' },
|
||
|
|
'100%': { transform: 'translate3d(-3%, 1.5%, 0)' },
|
||
|
|
});
|
||
|
|
|
||
|
|
export const animParallaxFar = keyframes({
|
||
|
|
'0%': { transform: 'translate3d(0, 0, 0)' },
|
||
|
|
'100%': { transform: 'translate3d(-1.2%, 0.6%, 0)' },
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Comet streak: a thin meteor crosses the field on a diagonal, fading in then
|
||
|
|
* out. The element is rotated by the component; this only translates along its
|
||
|
|
* own local X axis (its length direction) and fades.
|
||
|
|
*/
|
||
|
|
export const animComet = keyframes({
|
||
|
|
'0%': { transform: 'translate3d(0, 0, 0)', opacity: '0' },
|
||
|
|
'6%': { opacity: '1' },
|
||
|
|
'40%': { opacity: '0.9' },
|
||
|
|
'60%': { transform: 'translate3d(150%, 0, 0)', opacity: '0' },
|
||
|
|
'100%': { transform: 'translate3d(150%, 0, 0)', opacity: '0' },
|
||
|
|
});
|