Lottie / Rive Player
When to use: Embedding Lottie (After Effects) or Rive (vector) animations in web apps — loading states, illustrations, splash screens, and interactive animated icons.
npx skills add lottie-rive-playergit clone https://github.com/skillhub-community/lottie-rive-player.gitDescription
Unified animation player components for both Lottie (JSON from After Effects via Bodymovin) and Rive (interactive vector animations). The LottiePlayer wraps lottie-web with: autoplay/loop/segments control, playOnHover, state management for load/play/fail (with a fallback static image), and performance options (renderer: svg/canvas, preserveAspectRatio). The RivePlayer wraps @rive-app/canvas with: loading .riv files, triggering state machine inputs, and listening for animation state changes to drive UI.
Includes practical guidance: when to choose Lottie vs Rive (Lottie for rich After Effects exports, Rive for interactive/state-driven or tiny file sizes), how to trim animation files (removing unused layers via the player or preprocessing), lazy-loading animations only when near the viewport, and reduced-motion handling (serve a static frame instead of animating). Ships with a shared PlayerShell that gives both players a consistent API and dark/light theme awareness.
AI Hub
Need a model endpoint?
AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.
Open AI Hub