Motion skills
Animation timing, easing, transitions and when not to animate at all.
63 skills, page 2 of 2
Skills
Video Interaction Mapperby figma
Analyze a UI screen recording and map interaction states into an annotated Figma Design storyboard with extracted before/after frames.
MotionExternalGitHub stars: 2.1K
Slide Wrightby arifszn
Create beautiful, animated web presentations from a topic, rough notes, or an outline. Generates a custom theme and a short two-slide preview, then builds the full deck only once the user confirms the direction. Use when the user wants to make slides, a presentation, a talk deck, or a pitch deck.
MotionExternalGitHub stars: 65
60fps Animationby iart-ai
Web animation performance guidance for avoiding layout thrashing and reaching smooth 60/120fps motion with compositor-friendly techniques.
MotionExternalGitHub stars: 64
Accessible Animationby iart-ai
Tiered reduced-motion patterns for CSS, GSAP, Framer Motion, Lenis, and other web animation systems.
AccessibilityExternalGitHub stars: 64
Ascii Animationby iart-ai
This skill should be used when the user asks to "make an ASCII animation", "build a terminal/CLI intro or loader", "convert an image or video to ASCII art", "add an ASCII shader/post-effect to a canvas or Three.js scene", "create retro/hacker text-character motion", or "animate text characters with a brightness ramp". Covers generative ASCII fields, image/video/3D-to-ASCII, and animated character art for both web and terminal.
MotionExternalGitHub stars: 64
Glassmorphismby iart-ai
This skill should be used when the user asks to "add a glassmorphism effect", "frosted glass UI", "Apple liquid glass style", "frosted blur card", "translucent glass panel animation", "make a frosted nav bar", "build a glass modal/dialog", "animate a glass card on hover", or "add a refracting liquid-glass hero". Covers frosted translucent panels with backdrop-filter blur, edge/specular highlights, SVG liquid-glass refraction, motion on hover/scroll/enter, and accessible reduced-transparency fallbacks.
MotionExternalGitHub stars: 64
Gsap Webby iart-ai
GSAP guidance for code-driven web motion, including timelines, ScrollTrigger, SplitText, Flip, and smooth-scroll synchronization.
MotionExternalGitHub stars: 64
Lottie Animationby iart-ai
Lottie and dotLottie integration guidance for playback control, interactivity, runtime theming, and cross-platform export workflows.
MotionExternalGitHub stars: 64
Micro Interactionby iart-ai
UI motion guidance for hover and press feedback, toggles, toasts, drawers, modals, list transitions, and shared-element interactions.
InteractionExternalGitHub stars: 64
Page Transition Animationby iart-ai
Page and route transition patterns using the View Transitions API and Framer Motion, including reliable Next.js App Router exits.
MotionExternalGitHub stars: 64
Svg Animationby iart-ai
SVG animation techniques for stroke draw-on effects, path morphing, motion paths, animated icons, gradients, and filters.
MotionExternalGitHub stars: 64
Transitions Devby Jakubantalik
Production-ready CSS transition patterns for web apps, with drop-in snippets for cards, modals, dropdowns, panels, and page transitions.
MotionExternalGitHub stars: 46
12 Principles of Animationby raphaelsalaja
Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.
MotionExternalGitHub stars: 42
Mastering Animate Presenceby raphaelsalaja
Audit Motion and Framer Motion exit/presence patterns with practical fixes for AnimatePresence usage.
MotionExternalGitHub stars: 42
Morphing Iconsby raphaelsalaja
Build icon components that morph between SVG shapes with smooth, line-based transformation.
MotionExternalGitHub stars: 42
Pseudo Elementsby raphaelsalaja
Audit CSS pseudo-elements and View Transitions usage for hover effects, decorative layers, and transitions.
MotionExternalGitHub stars: 42
To Spring or Not to Springby raphaelsalaja
Audit animation timing choices to decide when springs versus easing curves produce better motion.
MotionExternalGitHub stars: 42
Motion Without Annoying Peopleby UI Skillbook
Use short, purposeful easing curves that clarify state changes instead of decorating them.
Motion
Pressed Button Feedbackby UI Skillbook
Give every interactive control an immediate, physical-feeling response to a press.
Interaction
Siteplane Animated Buttonsby UI Skillbook
Buttons that animate on hover with sweeping or pass-through fills, a moving arrow, actions that expand, and entrance effects.
Siteplane UI
Siteplane Icon Morphsby UI Skillbook
A menu button whose bars morph into an X while its navigation panel is open.
Siteplane UI
Siteplane Motionby UI Skillbook
Ready-made parts that animate list items entering, leaving and moving, content swaps and changing numbers.
Siteplane UI
Siteplane Theme Togglesby UI Skillbook
Animated sun and moon toggles that switch an app between light and dark mode.
Siteplane UI