What is the bundle size of the Motion library?

Motion is highly optimized, offering a 2.3 KB mini hook (useAnimate), a 4.6 KB LazyMotion configuration, or the full 34 KB feature set for complex interactions.

Is this skill compatible with Next.js App Router?

Yes, it includes specific implementation patterns for Next.js, including 'use client' wrapper strategies and optimizations for Server Components.

How does Motion handle user accessibility preferences?

Motion supports the 'prefers-reduced-motion' OS setting via the MotionConfig component, allowing developers to automatically disable or simplify animations for users who need it.

Can I use Motion with Tailwind CSS?

Yes. The recommended approach is using Tailwind for static responsive styling via class names and using Motion's props for dynamic animation properties to avoid transition conflicts.

Does Motion work with Cloudflare Workers?

As of December 2024, compatibility issues with Wrangler have been resolved, and Motion (and framer-motion) works directly with Cloudflare Workers and Pages.

Motion React Animations

Name: Motion React Animations
Author: brendadeeznuts1111

bybrendadeeznuts1111

デザインツール

Create production-grade React animations and interactive gestures using the declarative Motion library API.

概要

Motion (formerly Framer Motion) is the industry-standard React animation library that enables developers to build sophisticated web interactions with minimal code. This skill provides expert guidance on implementing hardware-accelerated gestures, scroll-linked effects, spring physics, and complex layout transitions using the FLIP technique. It includes specific optimization strategies for bundle size management (ranging from 2.3 KB to 34 KB) and detailed integration patterns for modern frameworks like Next.js 15 and Tailwind CSS v4.

主な機能

Declarative API for drag, hover, tap, and pan gestures across devices.
Automatic FLIP layout animations and shared element transitions (layoutId).
Comprehensive exit animation support via AnimatePresence for unmounting components.
Performance optimization tools including LazyMotion and the useAnimate mini hook.
0 GitHub stars
Hardware-accelerated scroll-triggered and scroll-linked animation effects.

ユースケース

Building interactive UI components like draggable carousels, sortable lists, and modal dialogs.
Creating engaging marketing pages with parallax effects and scroll-based reveal animations.
Implementing smooth layout shifts and route transitions in complex React single-page applications.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add brendadeeznuts1111/tier-1380-omega motion

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要