Attention
Pulsing Glow Effect
A soft glow that breathes in and out — for highlights and active states.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.glow {
transform: translate3d(180px, 100px, 0);
width: 120px;
height: 120px;
background: #6366f1;
border-radius: 20px;
animation: glow-anim 1600ms linear 0ms infinite both;
will-change: transform, opacity;
}
@keyframes glow-anim {
0% {
box-shadow: none;
animation-timing-function: ease-in-out;
}
50% {
box-shadow: 0px 0px 42px 6px rgba(139, 123, 255, 0.8);
animation-timing-function: ease-in-out;
}
100% {
box-shadow: none;
}
}
@media (prefers-reduced-motion: reduce) {
.glow {
animation: none;
transition: none;
}
}Why it is built this way
The colour animates alongside the blur, fading the shadow to transparent at the low point instead of shrinking a visible ring. Shadows are comparatively expensive to animate, so keep this to a single focal element.
What it animates
3 properties across 1 CSS declaration. The bar shows when each one is moving.
box-shadowbox-shadowbox-shadowWhat it costs to run
Box-shadow repaint on every frame rather than running on the compositor. There is no reflow, so this is far cheaper than animating width or height — but keep the painted area modest.
It runs for 1.60s across 9 keyframe stops, with every property moving over the same window.
One curve throughout: Ease In Out on a plain box. Keeping a single easing across every property is what makes a multi-property animation read as one movement rather than several things happening at once.
Accessibility
Nothing here hides content — box-shadow move over 1.60s and the element is visible throughout. The exported prefers-reduced-motion guard still silences it, which matters most for the looping ones: motion that never stops is the kind that makes people feel unwell.