Motion Component Performance Checklist for React

Record a production build on representative mobile and desktop hardware. Compare initial load, the first interaction, a repeated interaction, and idle time. A smooth animation can still delay input when hydration, layout, image decoding, and several effects begin in the same frame.

• Inspect long main-thread tasks around hydration and interaction.
• Watch layout shift while shared markers and panels move.
• Check transferred JavaScript before and after adding a motion package.
• Record CPU and memory while the page is visible but idle.

Lab measurements are not field Core Web Vitals. Use real-user data when available and keep the two evidence sources labelled separately.

Keep copy, headings, static images, and data loading on the server. Move only event handling, browser APIs, and changing visual state into a client component. Passing serializable content into that island is usually cheaper than marking an entire page as client-rendered.

The Animated Tabs component is stateful and client-rendered. The route around it does not need to share that boundary.

Prefer opacity and transform for decorative movement. Height, width, inset, and grid changes may be necessary for meaningful layout transitions, but measure their cost with the final content. Avoid animating large blur and shadow surfaces without testing low-power devices.

• Reserve media dimensions so animation does not mask layout shift.
• Do not add will-change to every animated element.
• Keep spring overshoot from moving focus targets under the pointer.
• Pause requestAnimationFrame loops when hidden or offscreen.

Remove motion that is decorative or creates spatial travel. Keep state changes understandable through text, color, icons, and instant visibility changes. A zero-duration branch should not leave stale inline transforms or a hidden panel.

• Test the preference before the first interaction.
• Change the preference while the page is open.
• Verify loaders still communicate progress without relying on spin.
• Verify drag-only actions have a button or keyboard alternative.

1. Build and test the exact production route.
2. Replay keyboard, pointer, touch, and reduced-motion paths.
3. Test at narrow and wide breakpoints with realistic content.
4. Confirm offscreen and background effects stop doing work.
5. Record lab results without presenting them as field outcomes.