모션 샘플 20개

받기

파일 2개 모두 motion-samples-20 폴더로 풀려요. 같은 곳에 풀다 README나 LICENSES를 덮어쓸지 물으면 덮어써도 돼요 (같은 파일). 실행은 컴퓨터에서 해요 (Node.js 필요).

20개 미리보기

1. 01해커 글자
2. 02숫자 티커
3. 03막대 그래프
4. 04진행 고리
5. 05체크리스트
6. 06채팅 메시지
7. 07카드 스와이프
8. 08타로 부채
9. 09시차 캐러셀
10. 10펼치는 띠
11. 11애벌레 탭
12. 12차례 목록
13. 13아이소메트릭 격자
14. 14하트 좋아요
15. 15펼치는 메뉴
16. 16와이파이 로더
17. 17다운로드 진행
18. 18마키 벽
19. 19스위치 토글
20. 20밀어서 비교

이렇게 써요

1. Node.js 22 이상 설치

   nodejs.org에서 받아요. MP4로 만들려면 FFmpeg도 있어야 해요.

2. zip 풀기

   받은 파일을 모두 같은 곳에 풀어요.

3. 터미널에서 샘플 폴더로
   cd motion-samples-20/05-checklist복사
4. 미리 보기
   npx --yes hyperframes preview복사

   브라우저에 미리보기 화면이 열려요.

5. MP4 만들기
   npx --yes hyperframes render . -o out.mp4복사

   폴더 안에 out.mp4가 생겨요.

준비가 됐는지 모르겠으면 npx --yes hyperframes doctor로 확인해요. 샘플은 hyperframes 0.8.70으로 만들고 확인했어요.

고치는 법 (index.html)

글자

화면 문장이 index.html 안에 그대로 있어요. 찾아서 바꿔요.

색

위쪽 <style> 안의 16진 색 값을 바꿔요.

사진

assets/photos/의 jpg를 같은 이름의 내 사진으로 덮어써요 (세로 2:3).

타이밍

<script> 안 GSAP 타임라인의 초를 바꿔요. 전체는 5초예요.

폴더마다 폰트, GSAP, 사진이 들어 있어 따로 완결돼요. 필요한 샘플만 복사해 써도 돼요.