feitangyuan/motion-web

What it solves

motion-web addresses the issue of "AI slop" in creative web development—the tendency for AI-generated animations to be generic, linear, and lacking physical realism. It provides a framework for building high-touch, motion-first websites where movement is treated as a core material rather than a decorative afterthought, ensuring interactions feel organic and professional.

How it works

The project functions as a "skill" for AI agents (like Claude) and frontend engineers. It combines a set of physical laws—such as spring-damper systems, anisotropic forces, and Verlet integration—with a strict verification system. To prevent synthetic drift or dead interactions, it uses Playwright-based headless oracles (verify_case.py) that mathematically assert displacement ratios, deformation errors, and state convergence to ensure the code actually performs as intended.

Who it’s for

It is designed for AI agents and frontend engineers who want to create high-end, creative interactive websites using vanilla Three.js, Canvas 2D, WebGL, and CSS without relying on heavy build tools or external CDNs.

Highlights

• Physics-Driven Motion: Implements real-world physics including second-order spring-damper systems and stepped jitter for tactile feel.
• Automated Verification: Includes a headless testing suite to mathematically verify that animations and interactions are functioning correctly.
• Zero Dependencies: All cases are single-file HTML pages that run standalone without external network dependencies.
• Diverse Case Studies: Provides seven verified interactive examples ranging from softbody clocks and WebGL2 ink crowds to causal ecosystems and Verlet rope curtains.