71 lines
2.8 KiB
TypeScript
71 lines
2.8 KiB
TypeScript
|
import { keyframes } from '@vanilla-extract/css';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Heart rise — a soft heart drifts gently upward while bobbing sideways and
|
||
|
|
* breathing in scale, like a balloon caught in a warm draft. GPU-only: animates
|
||
|
|
* transform + opacity exclusively. The tall translateY lets one keyframe set
|
||
|
|
* serve every heart; per-heart duration/delay/scale supply the variety.
|
||
|
|
*/
|
||
|
|
export const animHeartRise = keyframes({
|
||
|
|
'0%': { transform: 'translate3d(0, 8vh, 0) scale(0.7) rotate(-6deg)', opacity: '0' },
|
||
|
|
'10%': { opacity: '1' },
|
||
|
|
'50%': { transform: 'translate3d(18px, -46vh, 0) scale(1) rotate(5deg)' },
|
||
|
|
'88%': { opacity: '0.85' },
|
||
|
|
'100%': { transform: 'translate3d(-12px, -108vh, 0) scale(1.12) rotate(-4deg)', opacity: '0' },
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Heart bob — a small lateral sway applied to each heart's wrapper so the rise
|
||
|
|
* reads as a wandering draft, decoupled from the vertical travel so the two
|
||
|
|
* combine into an organic path. Transform only.
|
||
|
|
*/
|
||
|
|
export const animHeartBob = keyframes({
|
||
|
|
'0%': { transform: 'translate3d(0, 0, 0)' },
|
||
|
|
'50%': { transform: 'translate3d(16px, 0, 0)' },
|
||
|
|
'100%': { transform: 'translate3d(0, 0, 0)' },
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Petal tumble — a rose petal falls while swaying horizontally and tumbling on
|
||
|
|
* its own axis, the way a real petal flutters. Opacity + transform only.
|
||
|
|
*/
|
||
|
|
export const animPetalTumble = keyframes({
|
||
|
|
'0%': { transform: 'translate3d(0, -8vh, 0) rotate(0deg)', opacity: '0' },
|
||
|
|
'8%': { opacity: '0.9' },
|
||
|
|
'30%': { transform: 'translate3d(30px, 28vh, 0) rotate(120deg)' },
|
||
|
|
'60%': { transform: 'translate3d(-26px, 62vh, 0) rotate(250deg)' },
|
||
|
|
'92%': { opacity: '0.7' },
|
||
|
|
'100%': { transform: 'translate3d(14px, 112vh, 0) rotate(380deg)', opacity: '0' },
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Bokeh breathe — dreamy blush orbs softly pulse in scale and brightness, like
|
||
|
|
* soft-focus lights drifting in and out of focus. Opacity + transform only.
|
||
|
|
*/
|
||
|
|
export const animBokehBreathe = keyframes({
|
||
|
|
'0%': { transform: 'translate3d(0, 0, 0) scale(0.9)', opacity: '0.45' },
|
||
|
|
'50%': { transform: 'translate3d(0, -10px, 0) scale(1.12)', opacity: '0.9' },
|
||
|
|
'100%': { transform: 'translate3d(0, 0, 0) scale(0.9)', opacity: '0.45' },
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Blush pulse — a barely-there breathing of the warm vignette so the static
|
||
|
|
* tint feels alive and tender without distracting motion. Opacity only.
|
||
|
|
*/
|
||
|
|
export const animBlushPulse = keyframes({
|
||
|
|
'0%': { opacity: '0.82' },
|
||
|
|
'50%': { opacity: '1' },
|
||
|
|
'100%': { opacity: '0.82' },
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Sparkle glint — a faint highlight winks on and off with a gentle scale, a
|
||
|
|
* romantic twinkle that never strobes. Transform + opacity only.
|
||
|
|
*/
|
||
|
|
export const animSparkle = keyframes({
|
||
|
|
'0%': { transform: 'scale(0.4) rotate(0deg)', opacity: '0' },
|
||
|
|
'15%': { transform: 'scale(1) rotate(45deg)', opacity: '0.9' },
|
||
|
|
'35%': { transform: 'scale(0.55) rotate(90deg)', opacity: '0' },
|
||
|
|
'100%': { transform: 'scale(0.4) rotate(90deg)', opacity: '0' },
|
||
|
|
});
|