모션 효과 선택기
출처: tools/repos/awesome-ai-motion (MIT; GSAP는 무료 라이선스 하에 번들로 제공, ATTRIBUTIONS.md 참조). 637개의 효과 카드, 그중 128개는 렌더링 클립 및 HTML 템플릿, 11개의 레시피, 의사 결정 테이블. 전체 인덱스를 읽지 말고 질의하세요.
단계
- 장면 의도와 매체를 한 문장으로 기술합니다("동영상을 여는 질문, 쇼츠").
- 질의:
python -S studio.py motion find reveal --purpose attention --medium shorts --rendered --limit 8
python -S studio.py motion show mask-reveal
python -S studio.py motion recipe # 레시피 목록
python -S studio.py motion recipe edu-hook # 시간 및 매개변수가 포함된 단계
목적: attention, explanation, comparison, sequence, emphasis, transition, data, feedback, atmosphere, branding. 매체: explainer, shorts, scrolldeck, presentation, product-demo, data-story, web-ui. 또한 --family, --level도 사용 가능.
3. 2~3개의 후보를 선택하고 각 카드의 use_when, avoid, params, ease, pairs_with를 읽습니다. 먼저 카드 기본값을 적용한 후 조정합니다.
4. 공유 규칙으로 구성: 장면당 하나의 초점, 하나의 주요 동작과 최대 두 개의 보조 동작, 완료 상태를 읽을 수 있을 만큼 충분히 유지, transform과 opacity만 사용.
5. 시간의 순수 함수로 구현합니다. 카드의 snippet은 GSAP입니다. 이를 번역하고 가져오지 마세요:
- 초에서 진행률로:
p = clamp((t - start) / duration); stagger =start + i * gap templates/motion-helpers.js의 이징 (easeOut,easeIn,easeInOut,backOut,elasticOut,spring):power3.out은easeOut(3)입니다.yPercent: 110 -> 0은overflow: hidden창 안의 라인에translateY(110% -> 0%)입니다.
motion-ui-polish(토큰 및 게이트)로 빌드하고, 시작, 주요 동작 및 최종 상태에서 프레임을 확인하고 카드의good_example과 비교합니다.
템플릿이 존재하는 경우
show가 html_template을 출력하면 열어서 구조와 타이밍을 확인하고, 작업의 source/에 복사한 후 텍스트나 데이터를 교체합니다. 타임라인은 유지합니다. 카탈로그의 render.mjs를 Playwright 종속성을 설치하지 않고 실행하지 마십시오. 우리의 파이프라인은 vstudio 또는 HTML 렌더러를 통해 렌더링합니다.
처음 5초 (교육 및 설명 동영상)
01초: 질문 또는 놀라운 결과; 13초: 메커니즘 또는 비교에 대한 단서; 3~5초: 읽을 수 있는 유지와 함께 학습 약속. 화면당 하나의 주장. 질문이나 결과를 드러내기 위한 큰 카메라 움직임만. motion recipe edu-hook으로 시작한 후 mask-reveal, split-compare, count-up, annotation-callout을 사용합니다.
제한 사항
- 카드 매개변수 이름은 부분적으로 한국어입니다. 값, 범위,
ease및snippet은 언어 중립적입니다. 설명과 프롬프트는 영어로 반환됩니다. planned카드에는 클립이나 템플릿이 없습니다. 해당 매개변수와 프롬프트만 사용합니다.- 과도하게 사용된 효과는 인위적으로 보입니다. 장면당 하나의 요소에 하나 이상의 효과를 반복하지 말고, 같은 순간에 세 가지 효과를 쌓지 마십시오.