feitangyuan/motion-web

해결하는 문제

motion-web는 창의적 웹 개발에서 "AI의 흐릿함(AI slop)"이라는 문제를 해결합니다. AI가 생성한 애니메이션은 일반적으로 단순하고 선형적이며 물리적 사실성 부족이라는 경향이 있습니다. 이 프로젝트는 움직임을 장식적인 보조 요소가 아니라 핵심 소재로 다루는 고접촉형 모션 우선 웹사이트를 구축할 수 있는 프레임워크를 제공하여, 상호작용이 자연스럽고 전문적인 느낌을 주도록 합니다.

작동 방식

이 프로젝트는 Claude와 같은 AI 에이전트와 프론트엔드 엔지니어를 위한 "스킬"로 작동합니다. 스프링-댐퍼 시스템, 이방성 힘, Verlet 적분과 같은 물리 법칙의 세트와 엄격한 검증 시스템을 결합합니다. 합성적 왜곡이나 무반응 상호작용을 방지하기 위해 Playwright 기반의 헤드리스 오라클(verify_case.py)을 사용하여 변위 비율, 변형 오차, 상태 수렴을 수학적으로 검증함으로써 코드가 실제로 의도한 대로 작동함을 보장합니다.

대상 사용자

Vanilla Three.js, Canvas 2D, WebGL, CSS를 사용하여 무거운 빌드 도구나 외부 CDN에 의존하지 않고 고급 창의적 인터랙티브 웹사이트를 만들고 싶은 AI 에이전트와 프론트엔드 엔지니어를 위한 것입니다.

주요 특징

• 물리 기반 모션: 2차 스프링-댐퍼 시스템과 스텝 잼프를 포함한 실제 세계의 물리 법칙 구현으로 터치감을 강화합니다.
• 자동 검증: 애니메이션과 상호작용이 올바르게 작동하는지 수학적으로 검증하는 헤드리스 테스트 스위트 포함.
• 의존성 없음: 모든 사례는 외부 네트워크 의존 없이 독립 실행 가능한 단일 파일 HTML 페이지입니다.
• 다양한 사례 연구: 소프트바디 시계, WebGL2 잉크 군중, 인과적 생태계, Verlet 로프 커튼 등 7개의 검증된 인터랙티브 예제 제공.