BYLD Wealth — Animation Catalog

01 · Shared

Shared Animations

Universal keyframes from byld-animations.css. Used across all 171 screens, all tiers. Tier overrides (e.g. breathe glow color) applied in tier CSS.

shimmer 3s linear ∞

fadeInUp 1.2s ease-out alt

breathe 2.5s ease-in-out ∞

borderGlow 4s ease-in-out ∞

gold-pulse 2s ease-in-out ∞

subtle-glow 2.5s ease-in-out ∞

notifPulse 1.5s ease-in-out ∞

drawLine 2s ease-in-out alt

pulse 2s ease-in-out ∞

slideIn 1s ease-out alt

typingBounce 1.2s ease-in-out ∞

typingDot 1.2s ease-in-out ∞

SIP

chipPop 1.5s ease-out alt

cardSlideIn 1.2s ease-out alt

dotFadeIn 0.8s ease-out alt

barGrow 1.5s ease-out alt

slideUp 1s ease-out alt

MIA_

typeIn 0.6s ease-out alt

focusPulse 2s ease-in-out ∞

+₹12K

floatBadge 2.5s ease-in-out ∞

progressFill 2s ease-out alt

02 · Bloom

MIA Bloom Animations

Keyframes from byld-mia-bloom.css. The lotus (padma) motion system — quiet, organic, restrained luxury. Each animation layer is compositional and never jarring.

bloom-breathe 5s ease-in-out ∞

bloom-core-pulse 3.5s ease-in-out ∞

bloom-rotate-slow 8s linear ∞

petal-sway 1–6 5.3–6.2s ease ∞

petal-sway-1 5.5s ease-in-out ∞

petal-sway-2 6s · delay 0.4s

petal-sway-3 5.8s · delay 0.8s

petal-sway-4 5.3s · delay 1.1s

petal-sway-5 6.2s · delay 0.2s

petal-sway-6 5.6s · delay 0.6s

iris-glow 3s ease-in-out ∞

neural-signal 3s linear ∞

spore-ascend 3.5s ease-out ∞

bloom-think 2.5s ease-in-out ∞

bloom-float 6s ease-in-out ∞

03 · Accessibility

Reduced Motion

When prefers-reduced-motion: reduce is active, all animations collapse to instantaneous. No motion = same visual state, static. WCAG 2.3.3 Animation from Interactions.

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }
Applied to bloom entity, bloom-mark-header, bloom-avatar, and all shared animations.

breathe → static

Shadow frozen at 0% keyframe

STATIC

shimmer → static

Skeleton bar with no sweep

STATIC

typingBounce → static

Dots at baseline, opacity 0.4

STATIC

petal-sway → static

Petals at initial position

STATIC

Do ✓

→ Apply reduced motion via CSS media query only
→ Preserve layout — element stays in final visual state
→ Use opacity to signal state (e.g. dimmed typing dots)
→ Keep transitions for state-based changes (hover, focus)
→ Test with macOS: System Prefs → Accessibility → Reduce Motion

Don't ✗

→ Never disable transitions entirely (breaks interactions)
→ Don't hide elements that were animated (causes layout shift)
→ Don't use JS-only animation without a CSS fallback
→ Don't override with !important at component level
→ Never use inline animation-duration on elements