Library.
모션그래픽 카드 405장
영상 위에 얹거나 장면 사이에 끼우는 모션그래픽 카드 405장이에요. 카드 하나가 HTML 파일 하나라서 브라우저로 열면 바로 재생되고, 클로드 코드(Claude Code)로 글자만 바꿔 내 영상에 넣을 수 있어요.
안에 든 것
- 405장모션 카드
- 31종제목·숫자·목차·강조·자막·화면·전환
- 13개스타일(색·글꼴 세트)
| 제목 | 섹션 타이틀, 표지 워드마크, 챕터 카드 |
|---|---|
| 목차·단계 | 번호 목차, 체크리스트, 프로세스 화살표, 로드맵, 타임라인 |
| 숫자·데이터 | 큰 숫자, 숫자 3칸, 막대 그래프, 링 진행률, 비교 표 |
| 강조 | 인용, 핵심 한 줄, 배지·도장, 화살표 주석 |
| 화자 옆 | 하단 자막, 라벨, 키워드 칩 (투명 배경, 촬영본 위에 얹는 용) |
| 화면 | 코드 카드, 브라우저 3D, 영상 카드 부채꼴 |
| 동작·전환 | 세로 스크롤 목록, 한 줄 이어쓰기, 단어 수렴, 막 전환, 파형 연결선, 말풍선 팩트, 사진 흩뿌리기, 아이콘 비트 |
카드를 영상에 꽂는 스크립트(mount.py), 검사기, 카드를 만든 프롬프트도 전부 같이 들어 있어요.
쓰는 법
- zip을 풀고 갤러리 열기맥은
gallery/갤러리_열기.command를 더블클릭하면 돼요. 카드를 눌러 재생해 보고, 마음에 드는 카드의 id를 복사해요. - 폴더를 클로드 코드로 열고 한 문장으로 부탁하기「creative-mode.big-number.count 카드를 골랐어. 숫자는 23, 단위는 %, 설명은 재구매율로 바꿔서 내 영상 12초 지점에 5초 동안 넣어 줘.」
- 브랜드 색으로 바꾸기
styles/<스타일>/FRAME.md의 색 표를 고치고python3 tools/make_tokens.py <스타일>를 실행하면 그 스타일 카드 31장이 한 번에 바뀌어요.
렌더는 하이퍼프레임(HyperFrames) CLI로 해요. Node 22 이상과 ffmpeg가 필요하고, 자세한 순서는 zip 안 README.md에 있어요.
사용 조건
- 내 영상·강의·광고·SNS 콘텐츠에 자유롭게 쓰세요. 상업용도 괜찮아요.
- 카드 묶음을 그대로 판매하거나 자료 사이트에 다시 올리는 건 안 돼요.
- 스타일은 HyperFrames 프레임 프리셋(Apache-2.0)을 바탕으로 했고, 글꼴은 OFL이에요. 원문은 zip 안에 있어요.