Guides

How to use animated components well in real React projects: where they fit, how to keep them fast and accessible, and the code to start from.

• Animated hero backgrounds in Next.jsAdd an animated background behind a Next.js App Router hero: choose DOM, canvas or WebGL, stack content on top, keep text readable and spare the battery.
• Text animations in React: which one to usePick a React text animation by its job: entrance, scroll reveal, CTA highlight, stats or decoding state, with screen reader text and reduced motion built in.
• Gamification UI in React: XP, streaks, leaderboardsBuild XP bars, streaks, daily rewards, achievements, leaderboards and loot reveals in React, and learn when each one helps users and when it turns into noise.
• Respecting prefers-reduced-motion in ReactRead prefers-reduced-motion in React with Motion or CSS, decide what reduced should mean, pause canvas and WebGL loops, and test the setting in Chrome DevTools.
• Install React components from a shadcn registryHow the shadcn CLI installs components from a custom registry URL, what lands in your project, and how to add, update and edit Mekai UI components.