Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Web UI micro-interactions v1.0.0

Use this resource to animate the visual feedback of a web interface

New

  • 302 downloads
  • 233 likes
  • 214 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install ui-micro-interactions

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent applies precise principles (100 to 250 ms durations, transform and opacity only, entrances slower than exits) and chooses between Framer Motion and pure CSS. It delivers a standalone HTML demo whose every state can be frozen with ?state= to be captured and checked. Reduced motion is always handled.

Mostly picked by

Updated November 2, 2026

Animated like button, toggle and toast in a standalone HTML page, shown in idle and open states.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md with principles, recipes and the verification method
  • references/framer-motion-recipes.md: variants, AnimatePresence, layout, Reorder, gestures
  • references/css-recipes.md: @starting-style, allow-discrete, popovers, @property, reduced motion

Good fit for

  • You want a like button, a toggle or a toast that feels good to use
  • You are animating the opening of a drawer or modal, or list sorting
  • You want light effects without a heavy library

Not for

  • Cinematic animations or presentation videos
  • Complex SVG illustration animation
  • A site with no interactions to animate

Tags

  • micro-interaction
  • framer motion
  • css
  • ux
  • animation

About

You say

"Animate this add-to-cart button: instant press feedback, then a morph into a confirmation checkmark, with reduced motion respected."

Animated like button, toggle and toast in a standalone HTML page, shown in idle and open states.

Skill published by iart-ai under the MIT license, translated by PalateKit.

Show more

Prerequisites

You bring
The interface element to animate, or a screenshot and Your stack (React or HTML and CSS)

How to use it

  1. Install the skill in your agent's skills folder.
  2. Describe the interaction to animate and say whether your project uses React or pure CSS.
  3. Open the demo, test each state with ?state= and approve the result.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • references/css-recipes.md4.9 KB
  • references/framer-motion-recipes.md6 KB
  • SKILL.md8.6 KB

Origin and licence

Modified by PalateKit

Author
iart-ai
Source
github.com/iart-ai/web-animation-skills/tree/b6dba3eb759726845a44163ff0bad70dd9e7fbb6/skills/micro-interaction
Licence
MIT

Notice

Version modifiée de « micro-interaction » (iart-ai, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Do I need Framer Motion?

No. The skill also offers a pure CSS route (@starting-style, transition-behavior). Framer Motion (motion/react) is for gestures, animated exits and layout transitions.

What are the scripts mentioned in the text for?

Capturing demo states. They are not shipped here and are optional: the Playwright command given in the skill is enough.