A set of rules for interface animation and motion in the Knowledge Agent Template. It covers when animation should be used, how long it should last, and how elements should enter or leave the screen.

Use it when adding or reviewing animations for components, menus, modals, drawers, tooltips, loading states, and other interface changes.

It gives developers consistent guidance for making movement feel useful and unobtrusive, including when removing animation is the better choice.

motion — Cursor rule by azacdev

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add rules/azacdev/knowledge-agent-template/motion

Clone the repo

git clone --depth 1 https://github.com/azacdev/knowledge-agent-template

Made for: Cursor.

Per session 764 This file is loaded in full into every session.

When invoked 764 The same file — it is already loaded in full.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.00764	$0.00764
Opus 5	$0.00382	$0.00382
Sonnet 5	$0.00153	$0.00153
Haiku 4.5	$0.00076	$0.00076

Measured yesterday against content hash 6530722c8337, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

motion scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.cursor/rules/motion.mdc · 79 lines

How it starts

The opening of the file, as written. The whole thing — 79 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Motion

Every new component, section, overlay, and state change follows these rules. Full catalog: .agents/skills/improve-animations/AUDIT.md.

Does it animate at all?

Frequency	Decision
Keyboard shortcuts, command palette	No animation. Ever.
Hover, list navigation	Remove or drastically reduce
Modals, drawers, toasts	Standard animation
First-run, success, celebration	Delight allowed

Deleting an animation is a valid — often the best — fix.

Easing and duration

Use the project tokens, never a raw cubic-bezier or a bare CSS keyword: ease-out (entering/exiting, and the default), ease-in-out (moving on screen), ease-drawer (edge-anchored panels). They are defined in app/globals.css.

ease-in on UI is always wrong — it delays the moment the user is watching. linear is only for constant motion (progress, marquee, looping indicators).

Budgets — UI stays under 300ms: press 100–160ms, tooltips 125–200ms, dropdowns 150–250ms, modals/drawers 200–500ms.

Physicality

Never scale(0). Enter from 0.9–0.97 plus opacity: 0.
Popovers, dropdowns, and tooltips scale from their trigger via the origin-(--radix-*-transform-origin) variable — not from center. Modals are exempt; centered origin is correct there.
Pressable elements get press feedback. Button already has it; hand-rolled clickables need active:scale-[0.97] with scale in the transition list.

Performance and interruptibility

Animate transform, scale, and opacity only. Never width, height, margin, padding, top, or left.
Never transition-all — list the properties.
Prefer transitions over keyframes for anything reversible mid-flight; transitions retarget, keyframes restart from zero.
Keep backdrop-blur to layers that earn it. Do not put it on repeated list items sitting over the hero image.

Accessibility

app/globals.css flattens enter/exit movement under prefers-reduced-motion: reduce while keeping fades. Motion driven from JS must check it explicitly — see hooks/use-stick-to-bottom.ts. Gate hover-only motion behind pointer-fine: so a tap does not leave a stuck hover state.

Read the full file on GitHub · 79 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

yesterday First seen · 79 lines · 764 tokens per session scan A 6530722c8337

Subscribe to this mod's changes

motion is a cursor rule published in the GitHub repository azacdev/knowledge-agent-template (2 stars, last pushed 6d ago), licensed MIT. It adds 764 tokens to every session, about $0.0038 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Creative and media

motion

Getting it into your agent

What it costs to keep this loaded

Grade A, and why

Nothing flagged

How it starts

Motion

Does it animate at all?

Easing and duration

Physicality

Performance and interruptibility

Accessibility

What this file has done since we first saw it

Other cursor rules, from other repositories

android-viewmodel

livkiet-plugins-playai

angular-20

dev-standard

typescript

coolify-ai-docs