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.
npx agentmods add skills/athevon/genjutsu/framer-motionnpx skills add AThevon/genjutsu --skill framer-motiongit clone --depth 1 https://github.com/AThevon/genjutsuWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/athevon/genjutsu/framer-motion)<a href="https://agentmods.dev/skills/athevon/genjutsu/framer-motion"><img src="https://agentmods.dev/badge/skills/athevon/genjutsu/framer-motion.svg" alt="Measured on agentmods" height="20"></a>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.1 | $0.00024 | $0.01445 |
| Opus 5 | $0.00012 | $0.00723 |
| Sonnet 5 | $0.00005 | $0.00289 |
| Haiku 4.5 | $0.00002 | $0.00145 |
Grade A, and why
framer-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 6d ago.
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.
This is a copy
100% identical to framer-motion — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 188 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Framer Motion — Sub-skill
Package:
motion(v11+, formerlyframer-motion). Import:import { motion, AnimatePresence } from "motion/react"
When to use Framer Motion vs alternatives
| Criteria | Framer Motion | GSAP | Native CSS |
|---|---|---|---|
| Layout animations | Excellent (layoutId) | Manual | Impossible |
| Exit animations | AnimatePresence | Timeline reverse | Limited (display) |
| Gestures (drag, hover) | Native, declarative | Draggable plugin | Basic |
| Scroll-driven | useScroll + useTransform | ScrollTrigger (more powerful) | scroll-timeline |
| Complex orchestration | Variants + propagation | Timeline (more flexible) | @keyframes |
| Bundle size | ~50kb tree-shaken | ~30kb core | 0kb |
| React integration | Native, component-first | Refs + useGSAP | className toggle |
Rule: Framer Motion for React UI interactions (modals, toasts, reorder, shared layout). GSAP for complex timelines, cinematic scroll-driven, SVG morphing.
AnimatePresence — Exit animations
<AnimatePresence mode="wait">
{isVisible && (
<motion.div
key="unique-key" // REQUIRED — identifies the component
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
)}
</AnimatePresence>
mode="wait"— waits for exit to finish before enter (page transitions)mode="sync"— exit and enter simultaneouslymode="popLayout"— removes from flow immediately (good for lists)onExitComplete— callback when all exit animations are finished
Layout animations
// Shared layout — the element "slides" between two positions
<motion.div layoutId="highlight" className={activeTab === id ? "active" : ""} />
// Auto layout — animates position/size when layout changes
<motion.div layout>
{isExpanded && <motion.p layout>Additional content</motion.p>}
</motion.div>
// layout="position" — animates position only (not size)
// layout="size" — animates size only
// layout="preserve-aspect" — preserves the ratio during the transition
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 6d ago First seen · 188 lines · 24 tokens per session scan A 198701316fbf
framer-motion is a skill published in the GitHub repository AThevon/genjutsu (330 stars, last pushed 1mo ago), licensed MIT. It adds 24 tokens to every session and 1,445 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to framer-motion, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
suanfish-design-system
算鱼设计系统(Suanfish)——多智能体界面设计系统。当用户要设计、制作、优化、重构或评审网页前端界面与交互体验时调用。常见说法包括：做个页面、做个登录页或注册页、搞个落地页或首屏、做个后台管理界面、加个弹窗或二次确认、做个多步表单或向导、画个图表或做数据看板/仪表盘、整个聊天或智能体对话界面、做个新手引导、加个动效动画、调个样式或配色、美化一下界面、优化交互体验、改改界面布局、做个空状态或图标、写界面文案、做响应式或移动端适配、做无障碍优化，以及需要多视角设计评审与辩证式批判体检时。由一支虚拟设计工作室的数十位专科匠人协作，保证品牌语言、设计令牌、动效、无障碍全程统一。技术栈以 React 与 Tailwind…
framer-motion
Creates smooth animations and micro-interactions using Framer Motion including page transitions, gestures, scroll-based animations, and orchestrated sequences. Use when users request "add animation", "framer motion", "page transition", "animate component", or "micro-interactions".
atelier-components
Atelier suite — turn the design system into real, accessible, production code. Scaffold a premium React/Next + Tailwind v4 + shadcn/ui project, wire the atelier-foundations tokens into shadcn's theme variables, install the best-in-class single-purpose components (Vaul drawer, Sonner toast, cmdk command palette, Tremor…
seed-design
SEED Design 통합 가이드. 공통 컴포넌트 스펙과 파운데이션을 공식 문서에서 찾고, React·Lynx 프로젝트의 구현·설치·CLI·마이그레이션을 안내하며, SEED 저장소 안에서는 컴포넌트·문서·changeset·제출 작업을 전용 seed- 스킬로 연결한다. SEED Design 사용법, 진단, 저장소 기여 작업을 시작할 때 사용한다.
ss-studio
Turn a product brief and optional references into three distinct creative directions, a human-selected StyleSeed interaction plan, generated image/video asset jobs, a working UI prototype, and a verified prototype-first showcase reel. Use for client concepts, app interaction exploration, trendy but coherent UI…
ss-lint
Quick automated lint — detects common design system violations in seconds.