GSAP 익스플레이너 — 제작된 비디오 티어

슬라이드쇼가 아닌 제작된 YouTube 애니메이션처럼 읽히는 자체 포함 HTML/SVG/GSAP 익스플레이너를 구축합니다. 하나의 GSAP 타임라인이 장면별로 물리적 느낌의 안무를 주도하고, 지속적으로 날아다니는 호스트 마스코트, 깊이감 있는 레이어드 그래디언트 월드, 캐릭터 군집, 비네트 및 그레인 '카메라', 시크 가능한 플레이어를 갖춥니다. 작은 퍼널 임베드용 CSS 전용 하네스를 사용하고, YouTube급 콘텐츠 비디오에는 이것을 사용하세요.

**참조 빌드는 이 스킬 폴더의 scaffold.html**입니다. 실행 가능한 5장면 작업 예제(주제: '복리가 눈덩이처럼 불어나는 방법')로, 모든 패턴이 문맥 속에 있으며, 유지 및 제로 오버랩 검증을 통과했습니다. GSAP이 제거된 상태로 제공됩니다. python3 inline-gsap.py scaffold.html을 한 번 실행하면(GSAP 3.13을 gitignored된 vendor/로 가져온 후 인라인함) 파일이 재생되어야 합니다. 아래 패턴이 불분명할 때마다 이 파일을 읽어보세요.

여기서 시작하세요 — 실패할 수 없는 경로

먼저 샷 스크립트를 마크다운 문서로 작성하세요: 장면별 — 타임스탬프, 지속 시간, 시각적 요소, 화면 텍스트, VO 대사. 정확성 체크리스트로 마무리하고 모든 주장을 검증하세요. 장면 지속 시간은 SCENES 배열이 됩니다. VO 대사는 sr-only 트랜스크립트가 됩니다.
scaffold.html을 <topic>.html로 복사하세요. 모든 문제가 사전 수정되어 있습니다: 하네스 시계, 시크 UI, 호스트 비행, 월드 배경, 카메라 오버레이, 군집 캐릭터, 모션 감소, 트랜스크립트. inline-gsap.py를 실행하고 아무것도 건드리기 전에 열어보세요 — 재생되어야 합니다.
장면을 한 번에 하나씩 교체하고, 각각이 교체될 때까지 다섯 개의 작업 예제를 관용구 소스로 유지하세요: S0 = 플립 공개가 있는 어두운 후크; S1 = 바운스와 함께 드롭 물리; S2 = pour/motionPath 비행 + DrawSVG; S3 = 강제 오버랩 충돌 증명(최고 패턴); S4 = CTA 홀드. SCENES, FL, ACTS, CH_STARTS를 함께 업데이트하세요 — 이들은 장면 인덱스로 키가 지정된 병렬 구조입니다.
모든 장면을 프리즈 프레임으로 QA(QA 참조)하고, 수정한 후 게시하세요(자체 포함 파일).

아래 패턴이 일치할 때 처음부터 장면의 안무를 작성하지 말고 패턴을 적용하세요. 이것이 모델에 관계없이 기준을 충족하는 방법입니다.

아키텍처 계약(이미 스캐폴드에 연결됨)

고정 800×500 스테이지가 컨테이너에 맞게 조정됨(fitScale). 장면 시계는 setTimeout입니다(SCENES 배열, 장면당 초; 마지막 항목 999 = CTA 홀드; advance()가 done()을 호출함).
텍스트/칩/캡션은 CSS 프리미티브(.fu fade-up, .pp pop, .fi fade-in)로 인라인 animation-delay와 함께 진입합니다 — 저렴하고 재생 가능합니다. 영웅 안무는 GSAP입니다: runScene(i)(showScene에서 호출됨)가 이전 타임라인을 종료하고 FL[i](호스트 비행) + ACTS[i](장면 액트)로 gsap.timeline()을 구축합니다.
모든 ACTS[i]는 반드시 gsap.set(...) 리셋으로 시작하여 건드리는 모든 요소에 대해 적용합니다. 장면은 재생/시크 시 다시 활성화되고 종료된 트윈은 오래된 인라인 스타일을 남깁니다.
GSAP 소유 요소는 클래스 g-hero를 얻거나(또는 그 안에 살며) 절대 .fu/.pp/.fi를 가지지 않습니다. 요소당 한 명의 소유자입니다.
pause()/resume()은 curTl.pause()/play()를 호출합니다. CSS 측은 .paused 클래스에 의해 동결됩니다. 탐색은 항상 재생을 재개합니다(일시 정지된 갓 자른 장면은 불투명도-0 입구에 앉습니다 — 절대 '시크하고 일시 정지됨' 상태가 되지 않음).
플레이어: 클릭하여 시크하는 진행 표시줄(sceneAt(frac)), 이전/다음 버튼, ←/→ 키, 장절 틱(CH_STARTS), 스크롤 시 자동 재생, 탭 숨김 시 자동 일시 정지.
결과물은 침묵 시각 트랙입니다(마스터는 침묵 유지). VO는 ElevenLabs 파이프라인으로 구축된 별도의 <name>-vo.html 미리보기 변형으로 제공됩니다(VO 제작 참조). sr-only 트랜스크립트는 VO 스크립트입니다. 낭독 속도에 맞춰 재조정 = SCENES[i]를 클립+1.5–2초로 확장(확장은 절대 비트를 남기지 않음; 트림만 그렇게 함).

패턴 라이브러리(적용하세요, 발명하지 마세요)

이 모든 것은 scaffold.html에 그대로 존재합니다. 가장 가까운 것을 복사하세요.

호스트 비행 — FL[i] = [[fraction, x, y, pointing], ...]. 첫 번째 웨이포인트 = 이전 장면의 마지막 웨이포인트(매끄러운 컷). 긴 구간은 MotionPath을 통해 자동 스왑됩니다(fly()에서). 연필 끝은 액터 오프셋 약 (−10, +95)에 위치합니다: 대상을 가리키려면 호스트를 대상의 오른쪽 위에 주차하세요. 장면이 프레임을 필요로 할 때 호스트를 무대 밖(x=850)으로 보내세요.
무게감 있는 드롭 — gsap.set(els,{y:-300,opacity:0}) 후 .to(els,{y:0,opacity:1,ease:'bounce.out',stagger:.09}). 스태거 + 바운스가 물리적 느낌을 만듭니다.(layMarbles는 용기 내부에 행을 채웁니다. 행 너비는 168, 180이 아닙니다. 더 넓으면 드롭이 벽을 뚫고 나옵니다.)
강제 오버랩 충돌(증명 최고점) — 두 개의 막대가 둘 다 담을 수 없는 하나의 트랙에 떨어집니다. 두 번째 막대는 회피를 시도합니다(x 요요), 실패, 안착합니다. 오버랩 세그먼트가 back.out으로 튀어나오고 빛납니다(boxShadow 요요 repeat:-1). 그런 다음 두 개의 양쪽 배지 캐릭터 미니언이 그 안에 튀어나옵니다. 의도 → 실패 → 결과가 생동감을 만듭니다.
Pour/변형 — 컨테이너가 회전합니다(transformOrigin이 주둥이에 위치). 내용물이 하나씩 motionPath 아크를 따라 날아갑니다({path:[{x,y},{x,y}],curviness:1.6}, ease:'power1.in'). 한 줄로 착륙하고, DrawSVG로 그려진 새로운 모양으로 크로스페이드됩니다.
플립 공개 — 유혹적인 ✓가 튀어나옵니다(back.out(2.4)). 흔들린 후, ✗로 교체되어 쾅 들어옵니다(scale:3→1, power4.out) + 배경 플래시(backgroundColor 요요).
유혹 후 산산조각 — 답이 빛나고 맥동합니다(scale 요요 ×3). 그런 다음 죽습니다(opacity:.25, scale:.92, rotation:-3, power2.in). 옳은 답이 그 후에 도장 찍히듯 들어옵니다.
도장 찍기 슬램 — gsap.set(stamp,{opacity:0,scale:2.6,rotation:-14}) → .to({opacity:1,scale:1,rotation:0,duration:.35,ease:'power4.out'}).
DrawSVG — gsap.set(path,{drawSVG:'0%'}) → .to({drawSVG:'100%'}). 스냅백 = 72%까지 그린 후 빠르게 역방향. DrawSVG는 stroke-dasharray를 덮어씁니다 — 점선은 그리는 동안 실선으로 렌더링됩니다. 그에 따라 디자인하세요.
캐릭터로서의 군집(가장 Kurzgesagt스러운 동작) — minion(size, badges) 미니 캐릭터 팩토리: 수량은 점이 아닌 작은 캐릭터입니다. 35–55초 CSS 루프의 앰비언트 3-캐릭터 떼; 그룹은 해당 캐릭터 캐스트를 포함합니다. 증명 순간은 두 배지를 모두 착용한 캐릭터입니다.
장면 컷 와이프(runScene에 내장됨) — 두 개의 기울어진 패널(액센트가 리드, 잉크 트레일 .09s)이 모든 컷에서 스테이지를 스윕합니다. 그대로 두세요. 이것은 가장 저렴한 '진짜 전환' 승리입니다. 도용할 가치가 있는 풍부한 장면 아이디어: 살아있는 페이지 캐릭터, 하이라이터 낙서, 파일 캐비닛, 게이지 바늘, 진행 표시줄 경주.

무료 플러그인 제품군(GSAP 3.13 — Webflow 인수 이후 모두 무료)

inline-gsap.py는 코어 + DrawSVG + MotionPath + MorphSVG, SplitText, Physics2D, PhysicsProps, CustomEase, CustomWiggle, CustomBounce, Flip, ScrambleText를 가져와 인라인합니다. 모든 것이 무료 라이선스입니다. inline-gsap.py <file>은  마커에 모든 것 + registerPlugin 블록을 주입합니다. --refresh는 이미 인라인된 파일에서 제품군을 교체합니다. 입증된 패턴(모두 스캐폴드에 있음):

SplitText 문자 캐스케이드 — INIT 시 레지스트리를 통해 한 번 분할합니다(SPL{}에 캐싱된 splitOnce(key,sel) — 모든 장면 재실행 시 재분할하면 스팬이 중첩됨). 킥커: {opacity:0,y:14}의 문자, stagger .016, start ≤.15s. 영웅 단어: {y:-64,rotation:-9}의 문자와 back.out(1.9) stagger .07; 또는 {scale:2.7} power4 stagger .11 = 스탬프 슬램. 장면은 불투명도를 통해 숨깁니다(display:none이 아님)으로 초기화 시 분할이 안전합니다.
ScrambleText 정의 잠금 — 보상 라인이 제자리로 스크램블됩니다: scrambleText:{text:'≥ 1',chars:'<>=~≠≤≥',speed:.6}. JS 문자열의 기호에는 JS \u 이스케이프를 선호합니다. 테마가 있는 문자 세트(정의용 수학 기호)는 'upperCase'보다 읽기 좋습니다. 긴 무작위 대문자 스크램블은 로딩 결함처럼 읽힙니다.
CustomWiggle 안착 — CustomWiggle.create('wigSettle',{wiggles:4,type:'easeOut'}), 그런 다음 rotation:'+=10', ease:'wigSettle' — 진동하고 시작점으로 돌아옵니다. 따라서 상대 값은 재생 전반에 걸쳐 누적되지 않습니다. 다음 용도로 사용: 스탬프 착지, 캐릭터 반응, 호스트의 도착 시 연필 탭탭(fly()에서 if(wp[i][3]&&!wp[i-1][3])).
CustomBounce 드롭(스쿼시 포함) — CustomBounce.create('thud',{strength:.58,squash:2.4})는 쌍을 이루는 이지스 'thud'+'thud-squash'를 만듭니다. drop(tl,targets,time,dur,stagger) 헬퍼는 3개의 동기화된 트윈을 실행합니다: 불투명도 팝, 'thud'를 사용한 y, 'thud-squash'를 사용한 scaleX:1.45,scaleY:.55(리셋에서 transformOrigin:'50% 100%'). bounce.out보다 엄격히 우수합니다 — 스쿼시가 무게감입니다.
Physics2D 버스트 — burst(tl,scene,x,y,n,time,colors): 착지가 중요하지 않은 축하/파편 입자(충돌 최고점, 승리 스탬프). 인덱스 시드 각도/속도((i*53)%140) = 재생 동일, Math.random 없음. 재진입 시 오래된 .pfx를 제거합니다. 장면이 끝나기 전에 페이드 아웃되어 아무것도 남지 않습니다.
MorphSVG 융합 — 최고의 Kurzgesagt 동작: N개의 물체가 개념이 '됩니다'. 항목이 한 줄로 착지 → 캡슐 경로가 그 위에 페이드 인 → 화살표 실루엣으로 morphSVG되는 동안 fill이 트윈됩니다(말 그대로 '동일한 물체, 새로운 모양'). 리셋은 gsap.set(path,{morphSVG:ORIGINAL_D})가 필요합니다 — 형태가 변형된 경로는 변이된 d를 유지합니다.
Flip: 여기서는 사용하지 마세요 — 고정 800×500 절대 좌표 스테이지에서는 항상 델타를 알고 있습니다. 일반 y: 트윈은 tl.pause(t) QA에서 결정론적입니다. 반면 Flip의 런타임 측정은 프리즈 프레임 스크러빙을 깨뜨립니다(그리고 콜백은 억제된 시크에서 실행되지 않습니다). Flip은 실제 리플로우 레이아웃(DOM 기반 목록, 반응형 컨테이너)에서만 가치가 있습니다. '비워진 자리 차지' 비트는 알려진 델타 트윈입니다.

자산 제작(10배 통과 패턴 — 소품이 스타일링된 div처럼 보이지 않게 하는 방법)

심층 분석: 전체 자산 생성 규율(빌드 순서, 팩토리, SVG 계약, 품질 게이트)은 explainer-assets 스킬에 있습니다. 자산을 생성하거나 재구축할 때마다 사용하세요. 이 섹션은 빠른 참조입니다.

원 레시피 스티커 — 완전히 레이어드된 box-shadow의 깊이: 단단한 아래-오른쪽 잉크 드롭(3px 3px 0 var(--ink)) + inset 0 2px 0 rgba(255,255,255,.3-.5) 상단 광택 + inset 0 -3px 0 rgba(0,0,0,.1) 하단 그늘 + inset 0 0 0 1-2px rgba(255,255,255,.14) 다이컷 테두리. 반투명 인셋은 모든 배경색을 타고 가므로 하나의 CSS 패스로 .xchip/.qbar/.stamp/.l3 span의 모든 변형(밝음 및 어두움)을 높입니다. 하나의 반경 척도(sm 10 / base 13 / lg 16)와 필름 전체에 걸쳐 하나의 광원 방향(왼쪽 상단)을 유지하세요.
모든 평면 채우기를 투톤으로 — background:rgba(...)를 linear-gradient(180deg, lighter, base) + 광택/그늘 인셋으로 교체하세요. 의미론적 색상은 유지됩니다. 표면이 조명을 받은 것처럼 읽힙니다.
제작된 용기 레시피(양동이/병/컵) — 베이스 그림자 타원 → 그라디언트 본체 → 1px 흰색 하이라이트가 있는 2개의 테이퍼진 후프 밴드 → 테두리 링 + 더 어두운 내부 개구부 타원(그 어두운 타원 하나가 입구를 3D로 읽히게 함) → 부드러운 반사 곡선. 사다리꼴 측면을 따라 밴드 끝점을 보간하세요.
하나의 선택자로 제작된 선화 — 모든 그려진 선에 정적 filter:drop-shadow(0 1.5px .5px rgba(0,0,0,.17))를 적용하면 모든 화살표/상자에 투톤 밑면이 생기고 DrawSVG 애니메이션과 함께 나타납니다(필터는 dashoffset과 무관함).
GSAP 기반 소품을 의사 요소로 장식 — ::before/::after(줄 그어진 선, 테이프 조각, 균열, 메니스커스 선)는 타임라인의 변환을 자동으로 따릅니다: 새로운 안무 없음, 풋프린트 변경 없음. 클래스당 어떤 의사 요소가 '점유'되었는지 추적하세요. 충돌은 조용합니다.
팩토리 캐릭터: 단일체에만 id 사용 — 호스트(인스턴스 하나)는 uid 접미사가 있는 그라디언트/반사체를 가질 수 있습니다. 여러 번 인라인된 팩토리(미니 캐릭터)는 id가 없어야 합니다(일반 채우기만) 그렇지 않으면 id가 문서 전체에 중복됩니다.
재제작 중에도 안무 계약 유지 — 먼저 스크립트에서 선택자 인벤토리를 구축하세요. 위치 선택자는 지뢰입니다(.bkt3 path = 첫 번째 경로는 트윈된 본체를 유지해야 함 — 경로가 아닌 타원으로 리드). 새로운 장식 변환은 래퍼 <g>에 적용됩니다.
텍스트 안전 광택 주의 사항 — SplitText/영웅 텍스트가 있는 칩에서 광택은 인셋 box-shadow여야 합니다(텍스트 아래에 페인트). 위치가 지정된 ::before 오버레이가 아니어야 합니다(문자 위에 페인트되어 어둡게 만듦).
종이 더미 + 개 귀 레시피(모든 시트 소품) — 2개의 오프셋 백렉트(±0.6–1.5° 회전, 더 어두운 크림, svg에서 overflow:visible), 모서리 잘린 그림자 삼각형 + 접힌 플랩, 여백 규칙, 왼쪽 상단 광택 경로. 풋프린트 변경 없음, 시각적 번짐만.
서랍/가구 앞면 키트 — 앞면 직사각형 + 상단 광택 스트립 + 레이블 플레이트 + 오목한 손잡이 막대 + 장치 간 깊이 그림자 선. 강조 표시된 장치의 팔레트를 매개변수화하고, 애니메이션 클래스를 유지하세요.
투톤 벡터 구름 — 색조 베이스 타원 + 3개의 겹치는 흰색 원 + 하나의 더 밝은 상단 타원. 분위기 변형당 기본 색조를 다시 칠하세요.
청사진 카드 오버레이 — 카드의 첫 번째 자식으로 절대 위치 지정된 하위 svg(희미한 격자선 + 4개의 모서리 눈금): 카드의 트윈 클래스나 텍스트 자식에 영향을 주지 않고 기술 도면 텍스처를 제공합니다.

시네마 레이어(Kurzgesagt 통과 패턴)

카메라 리그 #xplCam — 장면을 보유하는 #xplStage 내부의 콘텐츠 전용 래퍼(환경 레이어, 액터, vig/grain은 외부에 유지). 보상 시 비트별 푸시인(약 ~1.02–1.05, 영웅에서 transformOrigin), 공개 시 풀아웃, 모든 컷에서 runScene에서 배율을 1로 재설정. #xplStage 자체는 절대 배율 조정하지 마세요 — 그것은 fitScale의 몫입니다. 최고 장면은 해당 전체 액트에 걸쳐 하나의 끊기지 않는 느린 크립을 얻습니다. 전체 너비 컨테이너가 아닌 VISIBLE 알약/소품 경계에 대해 클립 위험을 확인하세요.
호스트 연기 핸들 actorBody — .xpl-actor > [data-host] div, fly()(외부 x/y) 및 armEl과 독립적입니다. 헬퍼: 홉(y-8 요요), 기울임(가리키는 대상 쪽으로 ±4°), 놀람(반동+기울임), 가장 큰 승리에서 360도 회전. 각 컷마다 재설정하세요. 미니 캐릭터 등장 개성: 팝 전에 가장자리 뒤에서 엿보기(x 오프셋 → 0).
보상 조명 — 하나의 공유 #xplGlow 블러 방사형(mix-blend-mode:screen, CSS var를 통한 색조). 각 장면의 가장 큰 비트에서 영웅 개체 뒤에 위치시키고 빛나게 하며, 컷마다 재설정합니다. 약 15줄로 즉각적인 '조명' 느낌.
시간대 드리프트 — 초기화 시 #envFar에 베이스 filter를 시드합니다(트윈이 보간되도록, none에서 점프하지 않음). 그런 다음 밝기/색조를 완화하세요.

— 계속... [전체 내용은 원본 SKILL.md 참조, 여기서는 핵심 패턴과 구조를 번역함]

GSAP 애니메이티드 익스플레이너