Wensity

Motion and animation skill.

Teaches Claude Code, Codex, Cursor and other AI coding agents when to animate and how: duration tiers, four easing curves, springs that never overshoot, reduced motion, and tested recipes in CSS, Motion for React and GSAP.

Motion should explain a change: where something came from, what changed, what answered a press. Added for its own sake, it makes the same interface feel slow and cheap. This skill gives your agent a decision rule for whether something should move at all, a small system for how it moves, and code recipes in CSS, Motion for React and GSAP, each run in a real browser with normal and reduced motion.

Skill
wensity-motion
Plan
Included with Wensity Pro
Loads when
Writing any transition, hover, open or close animation, scroll effect or gesture
Works in
Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI, OpenCode
Format
Agent Skills (SKILL.md), plain files in your project
Pack
One of the Wensity design skills for AI coding agents

Install

1. Sign in once. The CLI asks for an API token from your dashboard and saves it, so you never paste it into a chat.

terminal
pnpm dlx wensity@latest login

2. Add the skill. It goes into every agent the CLI finds in your project.

terminal
pnpm dlx wensity@latest skills add wensity-motion

Motion and animation comes with Wensity Pro, together with every Pro skill, component, block and template.

Get Pro

When it loads

You never call a skill by name. Your agent reads the short description at the top of every installed skill and loads this one when the work calls for it. Requests like these bring it in:

  • Add open and close animations to the options menu and the delete dialog.
  • The UI feels janky and the menus bounce. Fix the motion.
  • Add a subtle intro animation to the hero.

What it covers

Should it animate
Decided by how often the thing is seen and whether the keyboard started it. Frequent and keyboard-driven actions stay instant.
Timing
Six named duration tiers sized by how far something travels, with shorter exits so a dismissal feels final.
Easing and springs
Four curves with a job each, and springs tuned so interface elements land without wobbling.
What moves
Transform and opacity first, small travel, scale from the trigger, accordions without measuring, icon swaps that never change size.
Enter, exit, stagger, scroll
Interruptible transitions, short staggers, scroll effects used once and with care, loading states that do not flash.
Reduced motion and performance
What to keep, what to drop and how to wire it in CSS, React and GSAP, plus what to avoid animating on large surfaces.

Open a menu

The same menu, animated twice. Open and close each one a few times: one grows from the button you pressed and gets out of the way, the other makes you wait both ways.

Without the skill

Without the skill: A neat fade and scale, but it grows from its own middle instead of the button, and closes as slowly as it opened.

With the skill

With the skill: Grows a little from the button it belongs to, settles fast and leaves quicker than it came.

Press a button

Press both buttons quickly, then press and hold. Good press feedback answers before you let go and never makes you wait for the next click.

Without the skill

Press it a few times

Without the skill: Presses a little deep and eases in and out, so it lags your finger and is still coming back when you click again.

With the skill

Press it a few times

With the skill: Answers the moment your finger lands, with a small press, and is ready for the next click at once.

Switch tabs

Click across the tabs on each side. A highlight that travels tells you where you went; two that fade past each other only blur it.

Without the skill

Without the skill: Each tab fades its own background, so the highlight blinks from one place to the next and your eye has nothing to follow.

With the skill

With the skill: One highlight slides from tab to tab, so your eye follows it to the new section.

Key rules

No overshoot
Menus, dialogs, cards and buttons land precisely. A little bounce is kept for things the user physically threw.
Interface motion stays short
Things people trigger all day finish quickly. Only a single showpiece moment on a page gets to take its time.
Exits are quicker
Leaving takes about two thirds of the time it took to arrive.
Nothing grows from zero
Elements enter from slightly smaller and transparent, never from a point.
Never animate everything
Transitions name the properties they change, sections do not all slide in on scroll, and hovers never wobble.
Reduced motion is respected
Movement is removed or swapped for a fade when the visitor asks for less motion.

Change your mind

Open the filters, then click again before the panel lands. Only one of the two turns around where you caught it.

Without the skill

Orders

Filters

Paid

Overdue

Draft

Without the skill: Slides fine on a single click, but click again mid-way and it snaps to its first frame and starts over.

With the skill

Orders

Filters

Paid

Overdue

Draft

With the skill: Turns around from wherever it is the moment you click again.

Ask for less motion

Some people turn on reduced motion because movement makes them unwell. Open each dialog with the setting on, then off.

Acting as if your device asks for less motion.

Without the skill

Without the skill: A tidy rise and scale, but it moves the same way even when your device asks for less motion.

With the skill

With the skill: Fades in place. Nothing travels or grows, and the dialog works exactly the same.

Files

Everything installs as plain files in your project, in a folder named after the skill.

SKILL.md
The decision rule, the tiers, the curves and the rules.
references/recipes.md
Code recipes in CSS, Motion for React and GSAP, with reduced motion versions.

Works well with

  • Accessibility and UI states

    Pro

    Every interaction and data state, plus keyboard, touch, zoom, forced colors and screen readers.

  • Surfaces and depth

    Pro

    A four-level depth ladder, shadows, hairlines, radius, buttons, inputs, icons, glass and image frames.

  • UI review and polish

    Pro

    A tag-aware code scanner and a rendered review across 12 categories, ranked P0 to P2, with a full checklist.