motion-design

Plugin motion-design from marketplace agent-harness in Axonnic-Inc/agent-harness. Commands read from the repo's manifest — 19 days ago.

Skills (15)

• animate

  Build an animation from scratch in the order that makes it feel right — whether to animate, purpose, tool, properties, curve and duration, interruption, exit — and write it. Use when asked to animate, add motion, or build a transition; use review-animations to critique existing motion.

• animation-performance

  Fix janky or frame-dropping web animations — composite-only properties, main-thread pressure, CSS vs WAAPI vs rAF, Motion's accelerated path, React re-renders per frame, CSS variable recalc, blur cost, when will-change helps. Use when motion stutters or when choosing what to animate.

• apple-design

  Apple's interface and fluid-motion principles for the web — gesture-driven UI, springs with shipped values, drag/swipe/sheets, momentum and interruptible transitions, materials and depth, typography, reduced motion, restraint. Use when building or reviewing Apple-style interaction.

• gsap-core

  Official GSAP core API — gsap.to/from/fromTo/set, eases, stagger, defaults, autoAlpha, immediateRender, gsap.matchMedia for responsive and prefers-reduced-motion. Use for GSAP tweens on DOM or SVG in any framework.

• gsap-plugins

  Official GSAP plugins — registration, ScrollTo, ScrollSmoother, Flip, Draggable and Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, CustomEase/Wiggle/Bounce, physics, GSDevTools; all free since 3.13. Use for any GSAP plugin.

• gsap-react

  Official GSAP for React and Next.js — useGSAP hook, scope and dependencies, contextSafe handlers, gsap.context cleanup, SSR guard. Use for GSAP in React.

• gsap-scrolltrigger

  Official GSAP ScrollTrigger — scroll-linked animation, scrub, pinning, snapping, batch, scrollerProxy for smooth-scroll libraries (Lenis reference included), refresh and cleanup. Use for scroll-based animation, parallax and pinned sections.

• gsap-timeline

  Official GSAP timelines — gsap.timeline(), position parameter, labels, nesting, defaults, playback control. Use when sequencing or choreographing animations.

• micro-interaction

  UI micro-interactions with Motion (motion/react) and modern CSS — hover and press feedback, toggles, like buttons, toasts, drawers and modals, list add/remove and reorder, shared-element layout transitions. Use when polishing UI feedback.

• motion-react

  Motion (motion.dev, formerly Framer Motion) for React and vanilla JS — correct imports, variants, AnimatePresence exits, layout/layoutId, springs with good values, scroll-linked useScroll/useTransform, gestures, MotionConfig reducedMotion. Use when animating React UI with Motion or deciding Motion v

• review-animations

  Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.

• shader-glsl

  GLSL fragment shaders for the web — gradients, noise and fbm, SDF shapes, domain warping, image transitions (dissolve, displacement, glitch), distortion and chromatic aberration, Three.js ShaderMaterial uniforms and post-processing. Use for shader backgrounds and GPU effects.

• svg-animation

  SVG motion — stroke draw-on and signatures, path morphing (MorphSVG or Flubber), motion along a path, animated icons, logos, gradients and filters via CSS, SMIL or GSAP. Use when animating any SVG.

• threejs-animation

  Three.js and React Three Fiber motion — 3D heroes and WebGL backgrounds, camera moves and scroll-linked 3D, GLTF clips, InstancedMesh, post-processing, leak-free disposal. Use for any 3D or WebGL scene animation.

• web-motion-studio

  Shoot → critique → fix loop for web pages with premium motion — taste file, Playwright shots (viewports, scroll sheet, entrance and hover strips, reduced motion, frame-time and CSS checks), rubric scoring until every axis is 8/10. Use for landing pages, heroes, scroll sections, micro-interactions, o

Similar plugins