cd line-art-animation-studio
npm ci
npm run dev

npm run typecheck
npm run build

git clone https://github.com/JDhruv14/line-art-animation.git
cd line-art-animation
git checkout c43d698913cf0ad44f984c7ae14c5348010594d3
npm ci
npm run dev

line-art-animation 스킬로 "개발자 스튜디오의 하루"라는 복잡한 인터랙티브 SVG 장면을 만들어 줘.

결과부터 보고 써 보고 싶어질 만큼, 여러 행동이 동시에 이어지게 해 줘. 따뜻한 종이 위 가는 먹선, 청록과 커피색 포인트를 유지하고 화면을 UI 상자들로 채우지는 마.

2층 건물을 단면으로 보여 줘. 위층에는 개발자 두 명이 일하는 작업실과 코드 리뷰 보드, 아래층에는 바리스타가 있는 커피 바와 서버 랙 세 개가 있는 서버실을 배치해 줘. 건물 앞 거리에는 보행자 두 명과 배달 자전거가 지나가고, 하늘에는 새와 천천히 흐르는 구름, 지붕에는 굴뚝과 태양광 패널이 있어.

다음 반응을 구현해 줘.
- 개발자를 클릭하면 인사하고 원래 자세로 돌아와.
- 커피 머신을 누르면 커피가 내려오고 김이 올라와.
- 고양이는 누르면 잠에서 깨고, 잠시 뒤 다시 쉬어.
- 리뷰 보드나 서버를 누르면 빌드 → 케이블을 따라 전송 → 서버 불빛이 차례로 바뀌어. 실제 서버 작업이 아니라 애니메이션 연출이라고 밝혀 줘.
- 자전거를 누르면 벨 울림을 선으로 표현하고, 풍경을 누르면 자연스럽게 흔들려.
- 밤이면 건물의 램프가 켜지고 선과 종이색이 바뀌어. 페이지 바깥 배경은 그대로 유지해 줘.

인물은 원본 gait()의 보행 속도와 pose를 함께 써서 발이 미끄러지지 않게 해 줘. 자전거 바퀴와 페달은 이동에 맞춰 움직이게 해 줘. 인물의 몸 전체를 사인파로 흔드는 방식은 쓰지 마.

클릭 면적을 충분히 주고 Tab과 Enter로도 조작할 수 있게 해 줘. 새 SVG 요소를 매 프레임 만들지 말고 기존 요소의 좌표와 속성만 갱신해 줘. npm ci, npm run dev, npm run typecheck, npm run build로 독립 실행되는 TypeScript + Vite 프로젝트로 만들어 줘. lib/와 원본 MIT 라이선스를 보존해 줘.

완성 뒤 브라우저에서 모든 반응과 원상 복귀, 낮밤 전환 중간의 대비, 모바일 가로 넘침을 검사해 줘. debug 모드에서 시간을 정확히 바꾸고, 클릭 전후와 낮밤 스틸을 비교할 수 있게 해 줘. 조작 가능한 데모와 소스, 짧은 무음 시연 영상을 함께 제공해 줘.

완성된 개발자 스튜디오 SVG를 실행해 보고, 다음 항목을 수정해 줘.

장면과 캐릭터의 정체성은 유지해 줘. 관찰한 문제와 수정 내용을 전후 스틸, 변경한 함수와 함께 기록해 줘.
1. 걷는 인물은 gait()의 period, speed, pose를 같은 시간에 연결하고 발 접지 프레임을 비교해 줘.
2. 커피 머신, 고양이, 리뷰 보드와 서버를 각각 클릭해 시작 → 동작 → 복귀 상태를 확인해 줘. 각 대상은 Tab과 Enter로도 조작할 수 있게 해 줘.
3. 빌드 → 케이블 전송 → 서버 준비 순서를 보여 주되 실제 배포라고 표현하지 마.
4. 낮, 해질녘, 밤과 그 사이 팔레트에서 글자와 선이 배경에 묻히지 않는지 확인해 줘. 페이지 바깥 배경은 유지해 줘.
5. 터치 화면에서도 누르기 쉬운 투명 클릭 영역을 두고 390px 너비에서 가로 스크롤이 생기지 않게 해 줘.
6. npm run typecheck와 npm run build를 통과시키고 브라우저 오류를 확인해 줘. 실패한 항목을 숨기거나 검사 대신 성공이라고 적지 마.

결과물: 수정된 소스, 실제 검사 결과, 수정 전후 스틸, 남은 한계.

const walk=gait({kind:'walk'});
// figure().draw(t, P) 내부 발췌
  const moving=mode==='walk';const phase=moving?t/walk.period:0;
  pos=moving?(((startX+direction*walk.speed*scale*t+160)%1460)+1460)%1460-160:startX;
  pose=walk.pose(phase,moving?1:0);const b=pose.bob;
  place(g,pos,floor,direction,scale);coat.setAttribute('fill',nightTint(colour,P));
  pose.feet.forEach((foot,i)=>{legs[i].draw([pose.hip,foot.knee,foot.ankle]);shoe(shoes[i],foot.ankle,foot.pitch);});g.insertBefore(legs[pose.front].g,coat);g.insertBefore(shoes[pose.front],coat);

window.__studio.seek(3);
window.__studio.trigger('coffee-machine');
window.__studio.trigger('cat');
window.__studio.seek(3.7);
window.__studio.setTau(0.88); // 밤
window.__studio.state();    // 커피·고양이·서버 등의 현재 상태
window.__studio.targets();  // 조작 가능한 대상 목록

npx playwright install chromium
npm run export:video

개발자 스튜디오 웹 데모를 실제 브라우저에서 실행해 세로 MP4 시연 영상으로 만들어 줘.

프로젝트를 빌드한 뒤 로컬 서버에서 열고, debug 모드의 window.__studio API로 매 프레임 시간을 제어해 줘. seek(t), setTau(tau), trigger(id)를 사용해 줘. 입력 API가 다르면 먼저 실제 코드에서 확인해 줘.

16초 무음 시연 순서:
- 0~2.5초: 낮의 건물 전체, 인물과 자전거의 움직임.
- 2.5~5.5초: 커피 바와 고양이 확대. coffee-machine과 cat을 클릭.
- 5.5~8.5초: review-board를 클릭하고 리뷰 보드를 확대.
- 8.5~12초: 서버실 확대. 빌드 → 전송 → 준비를 보여 줘. 실제 서버 배포가 아닌 연출임을 표시.
- 12~16초: 건물 전체로 돌아오며 setTau(.5)에서 setTau(.88)로 부드럽게 전환.

1080×1920, 30fps, H.264, yuv420p로 출력해 줘. 종이 배경에 화면을 배치하고 확대 이동을 부드럽게 해 줘. 제목과 설명은 인스타 오른쪽 버튼, 아래 캡션 영역과 겹치지 않게 해 줘. MP4에는 클릭 기능이 남는 게 아니라 클릭 반응을 녹화한다는 점을 밝혀 줘.

색 공간과 범위를 명시해 프레임 색이 뜨지 않게 하고, FFmpeg로 처음부터 끝까지 디코딩 오류를 확인해 줘. 원본 웹 데모와 소스도 그대로 제공해 줘. 음성과 음악은 이번 무음 시연에 추가하지 마.