brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

made the pulse box animation look nice by starting the pulse from behind the box that it's pulsing

Browse source
This commit is contained in:
Carter 2026-03-16 14:49:28 -06:00
parent 575c84246c
commit 834bd518c1
1 changed files with 11 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/common/PulseBox.tsx
View file

@ -8,6 +8,8 @@ const useStyles = makeStyles((_theme: Theme) => ({
position: 'relative', position: 'relative',
display: 'block', display: 'block',
width: 'fit-content', width: 'fit-content',
isolation: 'isolate',
overflow: 'visible',
}, },
pulseRing: { pulseRing: {
position: 'absolute', position: 'absolute',
@ -18,23 +20,24 @@ const useStyles = makeStyles((_theme: Theme) => ({
borderRadius: 'inherit', borderRadius: 'inherit',
pointerEvents: 'none', pointerEvents: 'none',
boxSizing: 'border-box', boxSizing: 'border-box',
zIndex: -1,
animation: '$pulse 4.4s infinite ease-in-out', animation: '$pulse 4.4s infinite ease-in-out',
}, },
'@keyframes pulse': { '@keyframes pulse': {
/* Start behind box, then expand out and fade */
/* pulse, pause, pulse, pause - CONSISTENT: both pauses equal, both pulses equal */ /* pulse, pause, pulse, pause - CONSISTENT: both pauses equal, both pulses equal */
/* Pulse 1 (0-42%) */ /* Pulse 1 (0-42%) - gradual fade in to soften the start */
'0%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 0 }, '0%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 1 },
'2%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 1 },
'40%': { boxShadow: '0 0 0 14px var(--pulse-color)', opacity: 0 }, '40%': { boxShadow: '0 0 0 14px var(--pulse-color)', opacity: 0 },
'42%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 0 }, '42%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
/* Pause 1 (42-50%) */ /* Pause 1 (42-50%) */
'50%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 0 }, '50%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
/* Pulse 2 (50-92%) */ /* Pulse 2 (50-92%) */
'52%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 1 }, '52%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 1 },
'90%': { boxShadow: '0 0 0 14px var(--pulse-color)', opacity: 0 }, '90%': { boxShadow: '0 0 0 14px var(--pulse-color)', opacity: 0 },
'92%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 0 }, '92%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
/* Pause 2 (92-100%) - same length as Pause 1, color change at iteration */ /* Pause 2 (92-100%) - same length as Pause 1, color change at iteration */
'100%': { boxShadow: '0 0 0 2px var(--pulse-color)', opacity: 0 }, '100%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
}, },
})); }));