Animation

glow

2s ease-in-out infinite — pulsing aura on a hovered or featured element. Ramps brightness(100%→150%), blur(0px→1px), and a box-shadow halo at the 50% mark, then back.

accordion-down / accordion-up

0.2s ease-out — animates height to/from var(--radix-accordion-content-height). Radix accordion content expand/collapse.

fade-in

0.8s ease-out forwards — opacity 0→1 with translateY(30px)→0. Scroll/load entrance for content blocks.

logo-fade-in

1s cubic-bezier(0.4, 0, 0.2, 1) forwards — opacity 0→0.8, scale 0.85→1, blur(12px)→0. The blur-in logo entrance.

logo-slide-out / logo-slide-in

Both 0.4s forwards (ease-in out, ease-out in) — opacity + translateY swap between rotating logos.

Ambient float loops

float (4s), float-reverse (5s), float-gentle (6s), illustration-float (8s) — gentle translateY + sub-degree rotation drift on illustrations. All ease-in-out infinite. Storybook/story surfaces only.

GradientButton gradient-slide

The signature CTA pattern. Not a keyframe — a moving background:

• Outer wrapper: bg-gradient-to-r from sand-300 → red-400 → violet-600, sized bg-[length:200%_200%], positioned bg-left.
• On hover: hover:bg-right slides the oversized gradient + hover:scale-[1.02].
• All under transition-all duration-500 ease-in-out — the slow token, no bounce.

fast (200ms ease-out) — hover feedback

slow (500ms ease-in-out) — signature lift

material bezier (500ms) — card lift

Recommended global baseline

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

JS guard for animation loops

const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

if (!prefersReducedMotion) {
  requestAnimationFrame(animationLoop);
}