WCAG contrast compliance, keyboard navigation, ARIA semantics, and prefers-reduced-motion behavior.
Animations should never compromise usability, screen-reader comprehension, or vestibular comfort:
prefers-reduced-motionSupport: Components usingmotion/reactsubscribe touseReducedMotion(), and CSS/SVG/Canvas components include@media (prefers-reduced-motion: reduce)rules andmatchMedialisteners that disable continuous keyframe loops or instant-settle transitions.- Screen-Reader Integrity: Split-text components (
KineticType,GlyphCascade,AuroraHeadline) expose the full sentence viaaria-labelor.srOnlywhile marking animated glyph tokensaria-hidden="true".InfiniteMarqueemarks duplicated tracksaria-hidden="true". - Keyboard & Touch Fallbacks:
MagneticDocksupportsArrowLeft/ArrowRightfocus cycling,MorphingCommandPalettesupportsArrowUp/ArrowDown/Enter/Escape, andMagneticButton/ParallaxDepthSceneignore pointer displacement on touch devices (pointerType === 'touch').
@media (prefers-reduced-motion: reduce) { .travelingBeam, .ribbonLayer, .blob, .track { animation: none !important; }}