Motion.dev Complete Documentation

Complete Motion.dev documentation - modern animation library for React, JavaScript, and Vue (formerly Framer Motion)

Security Scan

This is an instruction-only documentation skill for the Motion.dev animation library and its declared files and runtime instructions are consistent with that purpose.

Purpose & Capability

The name/description say 'Motion.dev documentation' and the SKILL.md and included docs provide quick-start and reference content for Motion/Framer Motion; there are no unrelated credentials, binaries, or capabilities requested.

Instruction Scope

SKILL.md contains only documentation, usage examples, and a 'read_when' guide for when to use the skill; it does not instruct the agent to read unrelated files, access environment variables, or transmit data to unexpected endpoints.

Install Mechanism

There is no install spec and no code files; this instruction-only skill does not write or execute files on disk.

Credentials

The skill declares no required environment variables, credentials, or config paths — proportionate for a documentation-only skill.

Persistence & Privilege

No 'always' flag is set and no special privileges are requested. Model invocation is enabled by default (normal for skills), but the skill does not request persistent credentials or elevated access.

Assessment

This skill is low-risk: it's instruction-only documentation for the Motion.dev library with no installs or credential requests. Before installing, you may want to: (1) verify the content and links point to the official Motion project (links shown are to motion.dev and a GitHub repo), (2) confirm you trust the skill publisher if provenance matters (registry metadata shows an owner id but no homepage), and (3) if you prefer the model not call the skill autonomously, require explicit invocation by disabling model invocation or adjusting agent policies.

Motion.dev Documentation

Motion is a modern animation library for React, JavaScript, and Vue. It's the evolution of Framer Motion, offering:

• Tiny size: Just 2.3kb for the mini HTML/SVG version
• High performance: Hardware-accelerated animations
• Flexible: Animate HTML, SVG, WebGL, and JavaScript objects
• Easy to use: Intuitive API with smart defaults
• Spring physics: Natural, kinetic animations
• Scroll animations: Link values to scroll position
• Gestures: Drag, hover, tap, and more

Quick Reference

Installation

npm install motion

Basic Animation

import { animate } from "motion"

// Animate elements
animate(".box", { rotate: 360, scale: 1.2 })

// Spring animation
animate(element, { x: 100 }, { type: "spring", stiffness: 300 })

// Stagger multiple elements
animate("li", { opacity: 1 }, { delay: stagger(0.1) })

React

import { motion } from "motion/react"

<motion.div
  animate={{ rotate: 360 }}
  transition={{ duration: 2 }}
/>

Scroll Animations

import { scroll } from "motion"

scroll(animate(".box", { scale: [1, 2, 1] }))

Documentation Structure

• quick-start.md - Installation and first animation
• More docs to be added...

When to Use This Skill

Use this skill when:

• Implementing animations in web applications
• Optimizing animation performance
• Creating scroll-based effects
• Building interactive UI with gestures
• Migrating from Framer Motion to Motion

External Resources

• Official site: https://motion.dev
• GitHub: https://github.com/motiondivision/motion
• Examples: https://motion.dev/examples