Hand-drawn iced Americano motion graphic in one HTML file

아이스 아메리카노 손그림 모션그래픽 명세서 아래 명세를 전부 읽고 손그림 모션그래픽을 HTML 파일 하나로 만들어 줘. 미리보기에서 바로 재생되게. 화면 - 세로 1080×1920, 22초, 끝나면 반복. 아래에 재생 버튼과 재생 위치 막대, 창 크기에 맞춰 전체가 보이게 - 모든 움직임은 시간 t(초) 하나로 계산하는 render(t) 함수로. 막대로 어느 순간에 가도 같은 그림이 나오게 - 코드 맨 위에 문구, 색, 장면 시간표, 카메라 위치를 모아 둬 종이 - 가로 1200 × 세로 4600짜리 모눈 연습장 한 장. 크림색 #ECE6DA 바탕에 40칸 청록 모눈(아주 옅게), 200칸마다 조금 진하게 - 화면 가장자리는 갈색으로 살짝 어둡게 연필 선 규칙 (모든 그림에 적용) - 선은 점을 이어 그리되, 점마다 좌우로 2px쯤 흔들어 손으로 그은 느낌 - 같은 선을 흔들림만 다르게 3벌 만들어 1초에 12번 번갈아 보여 줘. 선이 계속 미세하게 떨려 - 진한 선(#2E2622, 굵기 4) 위에 절반 굵기·흐린(45%) 선을 한 번 더 겹쳐 - 선은 한쪽 끝부터 펜으로 긋듯 그려지며 나타나 글자 - 구글 폰트 Gaegu Bold. 왼쪽부터 쓱 써지듯 나타나게(1초에 10칸씩 계단처럼) - 단계 라벨은 앞에 연필 동그라미 번호, 다 써지면 형광 노랑 밑줄이 그어져 배치 (종이 위 좌표, 가운데 기준) - 제목 "아이스 아메리카노" (540, 335) 크기 106, 0.0초에 쓰기 시작 - 부제 "한 잔이 되기까지" (540, 508) 크기 58, 0.9초 - ① 볶은 원두 (430, 1375) 크기 74, 3.05초 - ② 곱게 갈기 (760, 2235) 크기 74, 6.3초 - ③ 에스프레소 추출 (450, 3122) 크기 64, 10.6초 - ④ 얼음 + 찬물 (812, 3412) 크기 62, 14.45초 - ⑤ 완성! (620, 4222) 크기 76, 17.3초 - 끝 제목 "아이스 아메리카노" (620, 4340) 크기 98, 20.15초 / 서명 (620, 4418) 크기 34, 20.75초 카메라 (시각: 바라보는 곳 x, y · 확대 배율 · 움직이는 방식) - 0초 (520, 380) ×1.42 - 1.9초 (545, 470) ×1.26 천천히 - 2.55초 (445, 1060) ×1.16 휙 - 4.35초 (450, 1070) ×1.24 천천히 - 5.1초 (640, 1890) ×1.2 가속 - 7.75초 (650, 1930) ×1.31 천천히 - 8.3초 (450, 2790) ×1.15 휙 - 10.0초 (445, 2805) ×1.23 천천히 - 10.45초 (448, 2960) ×1.55 확 줌인 - 11.95초 (448, 2972) ×1.63 천천히 - 12.6초 (620, 3790) ×1.06 휙 - 15.3초 (622, 3800) ×1.13 천천히 - 18.25초 (612, 3770) ×1.28 천천히 - 18.85초 (620, 2240) ×0.43 가속 (종이 전체가 보이게 쭉 빠짐) - 19.55초 (620, 2230) ×0.45 천천히 - 20.12초 (620, 4000) ×1.07 확 줌인 - 22초 (620, 4010) ×1.12 천천히 - 휙 = 짧고 빠르게 가서 도착하면 살짝 멈칫, 천천히 = 부드럽게 다가감, 확 줌인 = 한순간에 당김 - 휙 넘어가는 순간에만 화면에 모션 블러 - 종이 뒤에 옅은 낙서 층을 하나 더 두고 카메라보다 느리게(위치 82%, 확대 72%) 움직여 깊이감 원두 → 가루 → 에스프레소 - 재료는 전부 위의 연필 선 규칙으로 그려. 주인공은 원두 한 알이야. - 색은 원두 #6B4127, 원두 골 #3A2215, 가루 #5A3620, 크레마 #C58E57만 써. - 0.9~1.28초: 원두 한 알이 위에서 떨어져 제목 밑줄(760, 378)에 착지. 찌그러졌다 튕기며 자리 잡기 - 1.62~2.9초: 원두가 오른쪽으로 굴러간 뒤, 연필 경로선을 따라 그릇(450, 1060 근처)으로 내려감. 경로선도 같이 그어져 - 2.05~2.95초: 그릇이 그려지고, 그 안에 원두 더미가 톡톡 튀어나오며 쌓임. 3.3초부터 김이 모락모락 - 4.15~4.55초: 그릇이 기울고, 원두들이 차례로 포물선을 그리며 그라인더(660, 1900) 위로 쏟아져 쏙 빠져 들어감 - 4.45~5.45초: 핸드 그라인더가 그려짐. 5.75~7.65초 손잡이가 두 바퀴 넘게 돌아가고, 도는 동안 그라인더가 살짝 떨림 - 6.05~8.1초: 가루 알갱이들이 그라인더 아래에서 경로를 따라 포터필터로 흘러내려 쌓임 - 8.25~10.0초: 에스프레소 머신 헤드가 그려지고, 탬퍼가 내려와 가루를 꾹 눌렀다 빠짐(눌리는 순간 살짝 찌그러짐). 포터필터가 위로 올라가 머신에 딸깍 장착 - 10.15~11.75초: 에스프레소 두 줄기가 샷잔(450, 2955)으로 떨어지며 샷잔이 차오름. 위에 크레마 층. 끝나면 방울 몇 개 똑똑 얼음잔 → 완성 → 마무리 - 색은 얼음 하늘색(#CEE8F4, 테두리 #4F7F9A), 찬물 아주 옅은 파랑, 커피 진한 갈색만. - 12.0~12.62초: 샷잔이 연필 경로를 따라 걸어 내려가듯 흔들리며 이동해 큰 유리잔(640, 3830) 왼쪽에 멈춤 - 12.3~12.95초: 큰 유리잔이 그려짐 - 13.1 / 13.45 / 13.8초: 얼음 세 개가 차례로 떨어져 찌그러졌다 튕기며 쌓이고, 떨어질 때 물방울 튐 - 14.2~15.15초: 위에서 찬물 줄기가 들어와 물 높이가 올라가고, 수면이 살짝 출렁 - 15.35~16.95초: 샷잔을 들어 기울여 커피를 부음. 곡선 줄기, 잔 속 물이 아래부터 커피색으로 물듦, 소용돌이 선 - 17.25~17.55초: 빨대가 위에서 꽂혀 살짝 흔들림. 17.55~18.15초 잔 표면에 물방울이 톡톡 맺힘, ⑤ 완성! 쓰일 때 잔 주변 반짝임 선 - 18.35~19.35초: 카메라가 빠지는 동안, 지나온 연필 경로선 전체를 갈색으로 한 번 더 덧칠 - 18.95~19.45초: ①~④ 라벨 옆에 빨간(#B2432F) 체크가 하나씩 그어짐 - 마지막: 큰 제목과