UI Skillbook
2

Motion

Ready-made parts that animate list items entering, leaving and moving, content swaps and changing numbers.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-motion and follow the Siteplane Motion skill it prints for this task.

Paste this into your agent.

Motion animates data changes: rows added or removed, chips reflowing, a panel swapping steps, or a total rolling to a new figure. You write no animation code, and changes turn instant under reduced motion.

Install

bashnpx shadcn@4.18.0 add @siteplane/motion

Import it from @/siteplane/components/motion. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Collapsible: Skip Motion for components that already animate themselves, such as Collapsible, Dialog or Toast.
  • vs Skeleton: Pick Skeleton instead to fill space while data loads; Motion animates the change once it arrives.

Rules

  • Give every MotionItem a stable key from the data, never the array index.
  • Set the space between items with gap on MotionList, not a CSS gap.
  • Move focus to a neighbouring item before removing one, because a leaving item is inert.
  • Use MotionReveal with open for one block, MotionSwap with a changing swapKey for replaced content, and MotionNumber for figures.
  • Virtualize lists with hundreds of rows instead of wrapping each in a Motion element.

Reference

  • Motion docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Layout & utilities. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-motion

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

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

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

Gsap Performanceby greensock

Official GSAP performance guidance for compositor-friendly transforms, quickTo, stagger batching, and smooth 60fps animation.

MotionExternalGitHub stars: 17.5K

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

Back to Siteplane UI