ESF — 맞물려 전달되는 움직임
재현용 제작 프롬프트 · UTF-8 TXT

이 문서는 실제 HTML·GSAP 제작 소스와 작업 지침을 바탕으로 정리한 재현 가이드입니다. 당시 단일 AI 입력 프롬프트를 그대로 보존한 기록은 아닙니다. 같은 결과를 보장하는 문구가 아니라, 수정하며 제작할 수 있는 구체적인 지시문과 실제 타임라인을 제공합니다.

[제작 프롬프트]
1280 × 720, 30fps, 8초 길이의 가로형 모션그래픽을 만들어 주세요. HyperFrames HTML과 일시정지·탐색 가능한 GSAP 타임라인을 사용하고, Inter 계열 산세리프 글꼴과 간결한 기하학 요소로 구성해 주세요.
18개와 12개 톱니의 외접 기어를 맞물려 배치한다. 큰 기어와 작은 기어는 반대 방향으로 회전하며 각속도 비율을 2:3으로 유지한다. 7.2초 동안 큰 기어는 180도, 작은 기어는 반대 방향으로 270도 회전한다. 기준점과 색으로 회전 방향을 보여준다. 톱니는 제조용 인벌류트 설계가 아닌 설명용이다.
실제 작품의 색상: #291823, #fff0de, #d2b8c9, #705366, #ecac6d, #b59edc.
빠른 점멸을 피하고 텍스트를 읽을 수 있는 대비와 여백을 확보하세요. 원곡이나 외부 샘플을 복제하지 않고 짧은 오리지널 연주곡을 직접 구성하세요. 음악에는 짧은 시작·종료 페이드를 넣고 약 -18 LUFS로 맞추세요. H.264/yuv420p, fast-start MP4, 48kHz 스테레오 AAC로 출력하세요.

[작업 순서]
1. 기어 모양을 만들고 맞물리는 위치를 정합니다.
2. 두 기어의 회전을 반대 방향으로 연결합니다.
3. 색과 기준점을 사용해 회전 방향을 읽기 쉽게 합니다.

[실제 제작 타임라인 참고 — JavaScript / GSAP]
const tl = gsap.timeline({ paused: true });
gsap.set('.gear2',{rotation:15,svgOrigin:'0 0'});
tl.fromTo('.ratio',{opacity:0,x:30},{opacity:1,x:0,duration:.65,ease:'power3.out'},.25);
tl.to('.gear1',{rotation:180,svgOrigin:'0 0',duration:7.2,ease:'none'},.3);
tl.to('.gear2',{rotation:-255,svgOrigin:'0 0',duration:7.2,ease:'none'},.3);

위 코드는 타이밍 참고용입니다. 선택자에 대응하는 HTML·SVG 요소를 먼저 구성해야 합니다.

[참고]
https://everyskillfinder.com/ko/motion/orbital-gears
음악 포함 완성 영상은 작품 페이지의 MP4 다운로드 버튼으로 저장할 수 있습니다.