Explain how animations are created in After Effects, exported to Lottie JSON with Bodymovin rendered by the Lottie web engine, used in React via lottie-react, and switched between light and dark variants with next-themes.

• The app only needs Lottie JSON, place it wherever fits (e.g., assets/animation or public/lottie) and import or load by URL.
• After Effects project files are optional, store them wherever the team prefers (repo, shared drive, or design workspace).
• For theming, export two files and name them consistently (e.g., *-light.json and *-dark.json) so components can switch by resolvedTheme.

• In AE, adjust colors and text per theme; export JSON with the Bodymovin extension.
• Save light/dark JSON in assets/animation and version them with the AE file.
• Import the JSON in React and render with lottie-react.
• Use next-themes to select the light or dark JSON at runtime.

• 404 Page not found animation (light/dark).
• Dashboard Project placeholder animation (light/dark).

Prefer vector shapes and avoid heavy/unsupported effects to keep JSON small. Pause off-screen playback and disable autoplay for users who prefer educed motion.

When brand colors or fonts change, update the AE comps and re-export both theme files. Keep names stable to avoid code updates.