Motion skills
Animation timing, easing, transitions and when not to animate at all.
63 skills, page 1 of 2
Skills
Animateby pbakaus
Enhance UX with purposeful animation and micro-interactions that support usability and delight.
MotionExternalGitHub stars: 95.1K
Delightby pbakaus
Add personality and memorable moments through thoughtful interaction details and emotional UX touches.
InteractionExternalGitHub stars: 95.1K
Overdriveby pbakaus
Push interfaces into high-impact territory with advanced animation, shaders, and ambitious interaction systems.
MotionExternalGitHub stars: 95.1K
Animateby emilkowalski
Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.
MotionExternalGitHub stars: 51.4K
Animate Expoby emilkowalski
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
MotionExternalGitHub stars: 51.4K
Animation Vocabularyby emilkowalski
Sharpen motion language so animation choices feel deliberate and consistent.
MotionExternalGitHub stars: 51.4K
Apple Designby emilkowalski
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
MotionExternalGitHub stars: 51.4K
Find Animation Opportunitiesby emilkowalski
Find high-conviction opportunities for useful interface motion while rejecting animation that adds noise or slows users down.
MotionExternalGitHub stars: 51.4K
Improve Animationsby emilkowalski
Survey a codebase's animation and motion code as a senior motion advisor, then produce prioritized audit and self-contained implementation plans. Read-only on source code - it plans improvements, it does not apply them. Use when the user asks to improve animations, audit motion, make an app feel better, or wants a roadmap of animation fixes rather than a review of a single diff.
MotionExternalGitHub stars: 51.4K
Review Animationsby emilkowalski
Review animation quality, timing, and motion consistency with a production-critical eye.
MotionExternalGitHub stars: 51.4K
Interaction Designby wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns for delightful user experiences.
InteractionExternalGitHub stars: 42K
Frontend Slidesby zarazhangrui
Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.
MotionExternalGitHub stars: 31.6K
Bragby latent-spaces
Turn a finished project into a short shareable launch video with motion, music, and copy.
MotionExternalGitHub stars: 19.5K
Gsap Coreby greensock
Official GSAP core API guidance for gsap.to(), from(), easing, stagger, matchMedia, and responsive or reduced-motion animation patterns.
MotionExternalGitHub stars: 17.5K
Gsap Frameworksby greensock
Official GSAP guidance for Vue, Nuxt, Svelte, and SvelteKit lifecycle setup, scoped selectors, and cleanup on unmount.
MotionExternalGitHub stars: 17.5K
Gsap Performanceby greensock
Official GSAP performance guidance for compositor-friendly transforms, quickTo, stagger batching, and smooth 60fps animation.
MotionExternalGitHub stars: 17.5K
Gsap Pluginsby greensock
Official GSAP plugin guidance for Flip, Draggable, ScrollSmoother, SplitText, SVG tools, CustomEase, and gsap.registerPlugin() usage.
MotionExternalGitHub stars: 17.5K
Gsap Reactby greensock
Official GSAP guidance for React and Next.js with useGSAP, refs, gsap.context(), contextSafe callbacks, and SSR-safe cleanup.
MotionExternalGitHub stars: 17.5K
Gsap Scrolltriggerby greensock
Official ScrollTrigger guidance for scroll-linked animation, pinning, scrub, batch triggers, and horizontal containerAnimation patterns.
MotionExternalGitHub stars: 17.5K
Gsap Timelineby greensock
Official GSAP timeline guidance for sequencing, position parameters, labels, nesting, and playback control with gsap.timeline().
MotionExternalGitHub stars: 17.5K
Gsap Utilsby greensock
Official gsap.utils guidance for clamp, mapRange, snap, distribute, selector scoping, and other animation math helpers.
MotionExternalGitHub stars: 17.5K
Scroll Worldby oso95
Build an immersive scroll-scrubbed 3D world landing page for any brand with Higgsfield-generated scenes, seamless camera clips, and a portable scroll-scrub engine.
VisualExternalGitHub stars: 10.7K
Fixing Motion Performanceby ibelick
Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.
MotionExternalGitHub stars: 10.4K
Better Uiby jakubkrehel
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.
VisualExternalGitHub stars: 9.2K
Animation on Scrollby MengTo
Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.
MotionExternalGitHub stars: 7.1K
Animation Systemsby MengTo
Use when building a coherent animation system instead of one-off motion tweaks.
MotionExternalGitHub stars: 7.1K
Gsapby MengTo
Use when implementing motion with GSAP and you want practical animation structure and sequencing guidance.
MotionExternalGitHub stars: 7.1K
Gsap Scrolltrigger Storytellingby MengTo
Use when building scroll-based storytelling sections with GSAP ScrollTrigger.
MotionExternalGitHub stars: 7.1K
Marquee Loopby MengTo
Use when building looping marquees that need steady rhythm, spacing, and performance awareness.
MotionExternalGitHub stars: 7.1K
Masked Revealby MengTo
Use when revealing content with masked motion, clipped transitions, or layered entrances.
MotionExternalGitHub stars: 7.1K
Matterjsby MengTo
Use when building physics-driven interactions and layout behaviors with Matter.js.
MotionExternalGitHub stars: 7.1K
Progressive Blurby MengTo
Use when applying blur transitions or layered depth effects that need to feel smooth and controlled.
VisualExternalGitHub stars: 7.1K
Threejsby MengTo
Use when building 3D scenes, interactions, or WebGL-backed interface moments in Three.js.
VisualExternalGitHub stars: 7.1K
Slidevby antfu
Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.
MotionExternalGitHub stars: 6K
Refine Liveby Jakubantalik
Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.
MotionExternalGitHub stars: 5.9K
Remotion Best Practicesby remotion-dev
Domain-specific knowledge base for building videos with Remotion and React.
MotionExternalGitHub stars: 5.9K
Text to Lottieby diffusionstudio
Turn text prompts into polished Lottie animations for motion-heavy UI work.
MotionExternalGitHub stars: 5.6K
Threejs Animationby cloudai-x
Three.js animation guidance for keyframes, skeletal animation, morph targets, and animation blending.
VisualExternalGitHub stars: 3.8K
Figma Implement Motionby figma
Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.
MotionExternalGitHub stars: 2.1K
Figma Use Motionby figma
Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.
MotionExternalGitHub stars: 2.1K