How does this skill handle Next.js SSR errors with Lottie?

The skill provides a dynamic import wrapper with 'ssr: false', ensuring the Lottie library (which requires browser-only APIs like canvas and SVG) only loads on the client side.

Can I sync Lottie animations with page scrolling?

Yes, the skill includes implementation patterns for both Intersection Observer triggers and frame-by-frame scroll progress synchronization.

Does this support React 19 and Next.js 15+?

Yes, the provided patterns are optimized for the latest versions of React and Next.js, including considerations for the App Router and Biome/ESLint configurations.

Is Lottie better for performance than GIFs or MP4s?

Generally, yes. Lottie files are small JSON vectors that can be up to 600% smaller than GIFs and remain sharp at any resolution without pixelation.

Next.js Lottie Animations

Name: Next.js Lottie Animations
Author: mattwoodco

bymattwoodco

•

设计工具

Integrates high-performance, interactive JSON-based vector animations into Next.js applications using lottie-react.

This skill simplifies the process of adding Lottie animations to Next.js projects by providing production-ready patterns for both the App Router and Pages Router. It specifically addresses common Next.js pain points, such as Hydration Mismatch errors, by utilizing dynamic imports with SSR disabled. From simple micro-interactions to complex scroll-synced storytelling, this skill enables developers to implement scalable vector graphics that are significantly lighter than GIFs while remaining fully interactive via hover, click, and intersection triggers.

主要功能

01Built-in accessibility support for prefers-reduced-motion media queries

02Comprehensive playback controls for speed, direction, and frame-specific navigation

033 GitHub stars

04Interactive trigger patterns for hover, click, and scroll-based animations

05SSR-safe dynamic import wrappers to prevent hydration errors in Next.js

06TypeScript-optimized components with full prop types and event callbacks

使用场景

01Implementing scroll-synced progress animations for landing pages and hero sections

02Creating interactive UI elements that respond to user hover or click events

03Replacing heavy GIFs with lightweight, scalable vector loading states and icons

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills lottie

For use in Claude.ai and ChatGPT

Download Skill