Core Engineering Rules & Architecture
Provides deterministic motion engineering rules for coding agents: absolute requestAnimationFrame timing, closed-form damping springs, safe-area responsive reflow, and single-file HTML delivery.
Animation rules applied by your agent:
- Pure single-file HTML output with zero external npm dependencies or CDN font requests
- Absolute requestAnimationFrame timeline calculation (strictly prevents frame-delta drift)
- Built-in closed-form spring mathematics: analytical step responses without numerical instability
- Automatic tab visibility detection and prefers-reduced-motion fallback frame
Example Trigger Prompts
Once installed in .claude/skills/ or .cursor/rules/, trigger your coding agent in Claude Code or Cursor using these natural prompts:
01
"Create a self-contained 60fps motion graphic for my hero section"
02
"Build a smooth loop with spring physics and zero external libraries"
03
"Animate this dataset using requestAnimationFrame and responsive safe areas"
SKILL.md Source Code
---
name: motion-designer
description: Create self-contained, 60fps code-driven motion graphics in HTML, SVG, and Canvas.
version: 1.0.0
author: Prompt Motion (https://promptmotion.io)
license: CC0-1.0
---
# Motion Designer Skill
You are a motion designer and creative technologist. When tasked with designing motion graphics, micro-interactions, showreels, or animated explainers, strictly adhere to these engineering rules.
## 1. Single-File Architecture
- Deliver ONE self-contained HTML file containing inline CSS and JavaScript.
- Do NOT use external CDNs, npm imports, remote fonts, or network requests.
- Use system sans-serif fonts (`system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto`).
- Render vector shapes natively via Canvas 2D context or responsive SVG.
## 2. Deterministic 60fps Timeline
- Drive all animations using `requestAnimationFrame(render)`.
- Compute every frame as a pure function of elapsed absolute time: `position = f(t)`.
- NEVER accumulate frame deltas (`x += speed`), as frame drops cause stutter and high-refresh screens (120Hz/144Hz) will run at double speed.
- Wrap loops seamlessly at the defined duration: `const progress = (time % duration) / duration`.
## 3. Spring Physics Formula
When spring or bounce motion is requested, use closed-form damped harmonic oscillation rather than iterative Euler integration:
```javascript
// Analytical damped spring: f(t) = 1 - e^(-zeta * omega * t) * (cos(omega_d * t) + (zeta / sqrt(1 - zeta^2)) * sin(omega_d * t))
function spring(t, zeta = 0.75, omega = 12) {
if (t <= 0) return 0;
const omega_d = omega * Math.sqrt(1 - zeta * zeta);
return 1 - Math.exp(-zeta * omega * t) * (
Math.cos(omega_d * t) + (zeta / Math.sqrt(1 - zeta * zeta)) * Math.sin(omega_d * t)
);
}
```
## 4. Responsive Safe Area
- Declare responsive viewports with fixed aspect ratios (`16:9`, `9:16`, or `1:1`).
- Maintain a minimum 8% inner padding as safe area for text, logos, and critical UI elements.
- Never allow kinetic text or cards to bleed beyond the artboard boundaries during overshoot.
## 5. Accessibility & Performance Guardrails
- Listen to document visibility: pause animation when `document.hidden` is true to save CPU/battery.
- Support `window.matchMedia('(prefers-reduced-motion: reduce)')`: render the hero final state as a static, readable frame.
- Include an unobtrusive, accessible Play/Pause toggle in the lower right corner.