diff --git a/src/app/components/avatar-decoration/AvatarDecoration.tsx b/src/app/components/avatar-decoration/AvatarDecoration.tsx index 26666f610..8f44a7a70 100644 --- a/src/app/components/avatar-decoration/AvatarDecoration.tsx +++ b/src/app/components/avatar-decoration/AvatarDecoration.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { useAvatarDecoration } from '../../hooks/useAvatarDecoration'; +import { useReducedMotion } from '../../hooks/useReducedMotion'; import { decorationUrl } from '../../features/lotus/avatarDecorations'; const DEFAULT_INSET = 8; @@ -16,8 +17,14 @@ export function AvatarDecoration({ inset = DEFAULT_INSET, }: AvatarDecorationProps) { const slug = useAvatarDecoration(userId); + const reducedMotion = useReducedMotion(); - if (!slug) { + // Decorations are animated APNGs with no static asset to freeze to, so honor + // prefers-reduced-motion by not rendering the animation at all (consistent + // with the rest of the theming stack — chat backgrounds / seasonal overlays — + // which all suppress motion under this preference; also avoids dozens of live + // APNGs animating in scrolling mobile lists). + if (!slug || reducedMotion) { return <>{children}; }