Are the animation patterns accessible?

Yes, the skill includes patterns for the useReducedMotion hook, ensuring your animations automatically adapt for users with motion sensitivities.

How does this skill help with Next.js development?

It provides specific implementation patterns for the Next.js App Router, including using template.tsx for page-level transitions and managing 'use client' boundaries.

Does it support complex layout changes?

Absolutely. It includes patterns for LayoutGroup and layoutId to handle shared element transitions and automatic layout animations when component sizes change.

Are these animations optimized for mobile performance?

The patterns emphasize using GPU-accelerated transform and opacity properties over layout-triggering properties like width or height to ensure 60fps performance.

Framer Motion Patterns

Name: Framer Motion Patterns
Author: Naw3

byNaw3

Design Tools

Implements production-ready React animations and interactive motion design using the Framer Motion library.

About

This skill provides Claude with standardized patterns for creating sophisticated UI animations in React and Next.js applications using Framer Motion. It covers core concepts like variants and AnimatePresence, as well as complex interactions like scroll-linked effects, shared element transitions, and gesture-based movements. By leveraging these patterns, developers can ensure their animations are performant, accessible by respecting reduced motion preferences, and compatible with modern React architectures including Server Components.

Key Features

Standardized animation variants for consistent UI behavior across components
Accessibility-first design with built-in support for reduced motion detection
Seamless page and layout transitions optimized for Next.js App Router
0 GitHub stars
Advanced gesture interactions including physics-based drag and spring-based hover effects
Performance optimization patterns using GPU-accelerated transforms and will-change hints

Use Cases

Implementing shared element transitions between list and detail views in a web app
Building interactive dashboard elements with stagger animations and layout groups
Creating high-performance scroll-linked parallax effects for marketing landing pages

About

Key Features

Standardized animation variants for consistent UI behavior across components
Accessibility-first design with built-in support for reduced motion detection
Seamless page and layout transitions optimized for Next.js App Router
0 GitHub stars
Advanced gesture interactions including physics-based drag and spring-based hover effects
Performance optimization patterns using GPU-accelerated transforms and will-change hints

Use Cases

Implementing shared element transitions between list and detail views in a web app
Building interactive dashboard elements with stagger animations and layout groups
Creating high-performance scroll-linked parallax effects for marketing landing pages