FreeVideo
App window with zoom
- 365365 downloads
- 125125 likes
- 188188 saves
Works with
+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PalateKit Pick
Build a UI animation that feels right v1.0.0
Use this resource to add an animation or transition to a UI component
New
- 387 downloads
- 250 likes
- 219 saves
$4.99
Lifetime access to this resource, with its updates.
Install with the CLI
In a terminal, from the folder you want:
npx --yes palatekit@latest install animation-build-sequenceWith 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 loginThe agent first decides whether the element should animate at all, based on how often it is used and what it is for. It then picks the simplest tool, the properties, the curve and the duration from fixed values, and plans interruption, exit and reduced motion. You get animation code that stays out of the way, with a short note on the choices made.
Updated November 2, 2026
Previews
Details
- Install guides
- Generates with
- Your agent's model
- Licence
- MIT
Similar resources
View all- Free
FreeVideo
One big number
- 463463 downloads
- 223223 likes
- 100100 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
PalateKit Motion, the library
- 338338 downloads
- 198198 likes
- 249249 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three bars head to head
- 348348 downloads
- 133133 likes
- 182182 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Before / after slider
- 322322 downloads
- 248248 likes
- 238238 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Three-card carousel
- 418418 downloads
- 157157 likes
- 101101 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Chat exchange
- 564564 downloads
- 127127 likes
- 161161 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
PROVideo
Checklist ticking off
- 442442 downloads
- 233233 likes
- 160160 saves
Works with+ HyperFrames- Claude Code
- Codex
- Cursor
- and 3 more
What you get
- SKILL.md: the decision sequence, curves, durations and the "never ship" list
- RECIPES.md: ready-to-build recipes (button, dropdown, tooltip, modal, drawer, toast, accordion and more)
- Reduced-motion and hover gating shipped with every animation
Good fit for
- Animating the opening of a modal, drawer or menu
- Making a button or toast feel alive without slowing it down
- Fixing an animation that feels slow or messy
Not for
- A motion design video or a long decorative animation
- Auditing every animation in an existing project
- A native mobile app
Tags
- animation
- css
- transitions
- ui
- motion
About
You say
"Animate the opening of this dropdown so it feels fast, without using a library."
Skill published by emilkowalski under the MIT license.
Show moreShow less
Prerequisites
- You bring
- The component or page to animate and Usage context (frequency, device)
How to use it
- Place the skill folder in your agent's skills folder.
- Describe the element to animate and how often it is used.
- Review the code and feel-check it at slowed-down speed.
Content preview
Files
- LICENSE1.1 KB
- NOTICE-PALATEKIT.md0.4 KB
- RECIPES.md8.1 KB
- SKILL.md11.8 KB
Origin and licence
Modified by PalateKit
- Author
- emilkowalski
- Source
- github.com/emilkowalski/skills/tree/a81dbca07f2217b7103e510c0f13f8d5b017afc9/skills/animate
- Licence
- MIT
Notice
Version modifiée de « animate » (emilkowalski, MIT) : traduction française et fiche par PalateKit.
User reviews
–
No ratings yet
Loading reviews…
Frequently asked questions
Why does the agent first reply with a single sentence?
The skill defines that greeting when invoked with no question. Then make your request as usual.
The skill mentions other skills (review-animations, pick-ui-library). Do I need them?
No. They are plain pointers. Building works with the files in this folder alone.