motion-dev

Overview

This skill is the motion development playbook for HyperFrames compositions — timeline choreography, easing, and animation primitives in HTML/CSS. Use it when building any animated video surface in code. It covers the animation techniques that make compositions feel designed rather than static.

Motion.dev — React Animation Library

Motion (formerly Framer Motion) is a production-ready React animation library. Hybrid engine uses Web Animations API + ScrollTimeline for 120fps performance, with JavaScript fallback for spring physics, interruptible keyframes, and gesture tracking.

Source: motion.dev | GitHub: motiondivision/motion

When to Use

• Building UI animations (enter/exit, hover, tap, drag)
• Layout animations (reorder, resize, shared element transitions)
• Scroll-triggered and scroll-linked effects (parallax, progress)
• SVG path drawing animations
• Micro-interactions (button feedback, loading states)
• Page transitions and route animations
• Gesture-driven interactions (drag, pan, pinch)
• Complex animation orchestration (stagger, sequence)

Install

npm install motion

Import from "motion/react":

import { motion } from "motion/react"

Core API

Motion Component

Prefix any HTML/SVG tag with motion. to unlock animation props:

<motion.div animate={{ opacity: 1, scale: 1 }} />
<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }} />
<motion.circle animate={{ pathLength: 1 }} />

Animation Props

Prop	Purpose	Example
animate	Target values	{ x: 100, opacity: 1 }
initial	Starting values	{ opacity: 0, scale: 0 }
exit	Exit animation (with AnimatePresence)	{ opacity: 0 }
whileHover	Hover state	{ scale: 1.1 }
whileTap	Tap/press state	{ scale: 0.95 }
whileFocus	Focus state	{ scale: 1.05 }
whileDrag	Drag state	{ scale: 1.1 }
whileInView	Scroll-triggered	{ opacity: 1 }
layout	Auto-layout animation	true or "position" or "size"