name: anima description: 짧은 PageFly 브랜드 모션 피스(인트로/티저/공개 영상 "New in PageFly: …", 단일 애니메이션 일러스트, 애니메이션 히어로)를 만들 때 사용합니다. HyperFrames를 오케스트레이션하고 PF 브랜드 + 모션 가이드라인 + 브랜드 모션 블록 키트를 케이스별로 자유롭게 조합합니다. 정적 PNG가 필요하면 illustra를 호출합니다. 정적 마케팅 이미지에는 사용하지 마세요(illustra / feature-demo 사용). PF 브랜드가 아닌 경우 preset을 교체하세요.
anima은(는) 무엇을 하나요?
개요
한 조각 = 짧은 브랜드 모션 아티팩트: 인트로/티저/공개 영상, 단일 애니메이션 일러스트, 또는 애니메이션 히어로. HyperFrames가 모션을 만들고; anima가 PageFly처럼 보이게 합니다. 이것은 디자인 시스템이지 템플릿 라이브러리가 아닙니다: 재사용 가능한 것은 하나의 index.html이 아니라 세 조합 독립적 레이어 - 브랜드 토큰(references/brand.css, 공유 아이덴티티는 _pf-brand/), 모션 가이드라인(references/style-guide.md), 그리고 브랜드 모션 블록 키트(components/) -를 templates/canvas.html 위에 케이스별로 자유롭게 조합하는 것입니다. Page 체크업 인트로가 첫 번째 작업 예제입니다(examples/before-after/). illustra(키트 + 자유 조합 + 스타일 가이드 + 거버넌스)와 동일한 모델을 정적 아트에서 모션으로 확장한 것입니다. anima와 illustra는 별개 스킬로 유지됩니다 - anima는 정적 PNG가 필요하면 illustra를 호출하며; 서로 흡수하지 않습니다.
HyperFrames를 오케스트레이션 - 재발명하지 않음
비디오 기계 장치(컴포지션 구조, 타임라인 계약, 장면 전환, lint/inspect/validate, 렌더링): hyperframes 스킬을 따릅니다. 이 스킬은 다음만 추가합니다: 브랜드 preset(
references/brand.css), 모션 가이드라인(references/style-guide.md), 컴포넌트 키트(components/).
HyperFrames 저작 규칙이 여기에 중복되지 않습니다(DRY - HF 업그레이드 시 차이 발생 방지).
사용 시점
-
짧은 브랜드 PageFly 모션 피스 제작:
- 인트로/티저/공개 ("New in PageFly: ..."),
- 단일 애니메이션 일러스트 (한 개념이 애니메이션되는),
- 애니메이션 히어로 (모션 상태의 히어로 섹션), 또는
- 푸티지 조각: 브랜드 타이틀 카드가 기존 실제 녹화(화면 캡처, 제품 데모)로 전환되는 것.
처음 세 가지는 1600x900 무한 루프입니다. 푸티지 조각은 1920x1080 선형입니다 - 제작 전
references/style-guide.md-> 푸티지 조각을 참조하세요. -
케이스에 명확한 비트가 있습니다: 인트로 홀드, 선택적 전/후 모프, 단일 기능 홀드. 애니메이션 일러스트/히어로의 경우 인트로 타이틀 카드(장면 1)는 종종 생략됩니다.
사용하지 말 것: 정적 마케팅 이미지 (illustra / feature-demo 사용); PageFly가 아닌 브랜드 (references/brand.css 대신 교체 - 엔진은 브랜드 중립적이며 PF는 기본 preset일 뿐입니다).
사전 요구 사항 (두 계층)
- 완성된 예제를 렌더링/리스킨: npm
hyperframes(npx통해, 첫 실행 시 자동 페치) + Node >= 22 + FFmpeg. 첫 작업:npx hyperframes doctor실행 후 누락된 의존성이 있으면 보고 후 진행합니다. - 새로운 피스 저작: 추가로 hyperframes 스킬 패밀리 (저작 지식 - 타임라인 계약, 전환, QA). 해당 스킬들은
~/.claude/skills/에 사용자 글로벌로 위치하며 이 리포지토리에 번들되지 않습니다 - PageFly를 클론해도 얻을 수 없습니다. anima는 해당 스킬 없이도 PF 규칙을 충분히 전달하지만 모든 기계 장치 규칙을 위임하므로, 누락 시 저작 품질이 급격히 떨어집니다.
새 기기 첫 설정
기기당 한 번 실행합니다. 재실행해도 안전함 - 모든 단계는 멱등적입니다.
npx hyperframes doctor # 1. Node >= 22, FFmpeg, Chrome, 메모리
cd /tmp && npx hyperframes init hf-bootstrap \
--example blank --non-interactive # 2. HF 스킬 패밀리 설치
ls ~/.claude/skills/hyperframes # 3. 확인: SKILL.md + references/
rm -rf /tmp/hf-bootstrap # 4. 임시 스캐폴드, 삭제
참고:
- 전용 "install skills" 명령어는 없습니다.
init은 프로젝트를 스캐폴드 하고 스킬을 설치합니다 - 자체--skip-skills도움말 텍스트에 따르면, "init은 항상 AI 스킬을 GitHub과 비교 확인합니다" (CLI v0.7.108에서 확인;HYPERFRAMES_SKIP_SKILLS=1로 해제 가능). 따라서 임시 디렉토리 사용합니다. 이 리포지토리 내에서init을 실행하지 마세요 - 스킬 트리에 스캐폴드가 흩뿌려집니다. init은 프로젝트 이름을 받습니다 - 위와 같이 상위 디렉토리로cd하세요.- 한 번에 약 15개 스킬을 설치:
hyperframes,hyperframes-cli,hyperframes-media,hyperframes-registry, 애니메이션 라이브러리 어댑터(gsap,animejs,css-animations,lottie,three,typegpu,waapi,tailwind) 및website-to-hyperframes. - HyperFrames는 Claude 플러그인이 아닙니다 - 마켓플레이스에서 찾지 마세요.
- 렌더링에는 네트워크가 필요합니다. GSAP는
templates/canvas.html과 모든 예제에서cdn.jsdelivr.net(고정 3.14.2)에서 로드되며, 상위 hyperframes 패턴과 일치합니다. 오프라인 렌더링은 실패합니다.
워크플로우
- 의도 파악 (먼저 묻고, 계획). 생성 전에 멤버에게 짧은 요구 사항을 물어보세요 - 어떤 종류 (티저 / 애니메이션 일러스트 / 애니메이션 히어로), 어떤 장면/비트, 레이아웃, 전환 - 그런 다음 한 문단 계획을 보여 승인을 받으세요. "그냥 해봐"라고 하면 요구 사항을 건너뛰고 진행합니다. 인트로 타이틀 카드 (장면 1)는 선택 사항입니다 - 애니메이션 일러스트/히어로의 경우 "New in PageFly" 프레이밍을 원하지 않으면 생략하세요.
- 케이스 이해 -> 메시지 + 필요한 비트(인트로? 전/후 모프? 단일 기능?). 한 문장으로 설명: 무엇이 새롭고 왜 중요한지.
- 스테이지에서 시작. 자유 형식 새 케이스 ->
templates/canvas.html복사 (빈 브랜드 1600x900 스테이지, brand.css 인라인, 루프 베일 연결되어 있음). 전/후 케이스 ->examples/before-after/에서 시작. 작업 파일을 케이스 자체 디렉토리에index.html로 저장 (HF CLI는 디렉토리의index.html을 실행; 커밋된canvas.html은 그대로 유지). - 블록 선택 (
components/에서, 색인:references/component-catalog.md). 각 블록의 마크업을 장면에 붙여넣고<!-- Timeline recipe -->을 단일tl타임라인에 붙여넣고, 오프셋을 장면 진입 시간에 맞춰 재조정. 직접 구축해야 할 특수 부품이 있는지 확인. 자산을 표시하는 블록(logo-lockup,before-after-card)은index.html옆에assets/디렉토리를 필요로 함 - 생성하고examples/before-after/assets/pf-logo.svg에서 PF 로고와 자체 스크린샷 자르기를 복사. - 가이드라인 적용 (
references/style-guide.md): 이징 (장면당 >= 3개 다양하게), 브리딩 글로우, 루프 이음매 베일, 페이싱 / 비트 앵커. 레이블, 아이라이너, 배지는 공유 키트(_pf-brand/label-rules.md+_pf-brand/badges.html)를 따름 - Poppins, 문장형 케이스,var(--badge-*)를 통한 소프트 배지; 모노 캡스 아이라이너나 메탈릭 알약은 절대 사용 금지. 구조 및 타임라인 규칙은 hyperframes 스킬에 위임. - QA:
npx hyperframes lint && npx hyperframes validate && npx hyperframes inspect. 오버플로우, 대비, H.264 밴딩 수정.npx hyperframes inspect --at 4.6,5.3으로 특정 비트 고정. - 렌더링:
npx hyperframes render. 그런 다음 재사용 가능한 부분 수확 - 아래 거버넌스 스캔 실행.
하드 규칙
references/style-guide.md를 반영; 전체 비디오 기계 장치 목록은 hyperframes 스킬에 위임.
- 브랜드 변수만 사용. 브랜드 색상/반경/그림자를 하드코딩하지 말고 항상
var(--...)사용; 알파 틴트는color-mix(in srgb, var(--token) N%, transparent)를 통해 솔리드 토큰에서 파생 (글로우 토큰은 미리 빌드되어 제공됨) ->brand.css를 교체하면 리브랜딩됨. 리터럴 예외 (스타일 가이드에 따라): 글꼴"Poppins"/"JetBrains Mono"(렌더러가var(--font-*)를 해결할 수 없음); GSAP 색상 트윈; SVGstroke; 중성색. - 모든 장면에 불투명 네이비. 점프 컷 금지 - 장면 간은 불투명
--bg위의 블러 크로스페이드 (hyperframes 하드 규칙). - 진입만, 마지막 비트 제외. 모든 요소를 IN으로 애니메이션 (
gsap.from/fromTo); 종료 트윈은 루프 테일에만 존재. - 이모지 금지. 아이콘은 손으로 그린 것 - CSS 점, 그려진 SVG 체크 경로, 녹색 알약 - 이모지 글리프 사용 금지.
- 결정론적.
Math.random()/Date.now()사용 금지; 유한 반복만 (repeat: -1절대 금지) - 렌더링은 재현 가능해야 함. - 무한 루프 (루프 피스만). 티저 / 애니메이션 일러스트 / 히어로: 글로우는 숨겨진 상태로 시작하고
#loopveil이 T-끝 근처에서 네이비로 페이드되어 최종 프레임 == 프레임 0. 푸티지 조각은 선형이며 루프가 아님 - 여전히 깔끔한 꼬리를 위해 베일로 끝나지만 프레임 0과 최종 프레임은 일치할 필요 없음.
파일 맵
| 경로 | 역할 |
|---|---|
.claude/skills/_pf-brand/ | 브랜드 아이덴티티 토큰 + 배지 팔레트 + 레이블 규칙의 진실 공급원 (brand-identity.css, badges.html, label-rules.md). anima의 하위 디렉토리가 아니라 형제 스킬 디렉토리 - 이 스킬의 모든 _pf-brand/ 참조는 이 경로로 해결됩니다. 레이어 A + 배지는 여기에서 동기화되어 references/brand.css로 들어갑니다. 오늘날 anima가 소비; illustra는 여전히 illustra/references/brand.css에 자체 포크를 유지하며 이 파일을 읽지 않음. |
references/brand.css | 브랜드 preset: 레이어 A 아이덴티티 + 배지 팔레트 (_pf-brand/에서 동기화) + 레이어 B 비디오 표면 팔레트. 교체하여 리브랜딩. |
references/style-guide.md | 모션 가이드라인: 페이싱, 이징, 글로우, 루프 이음매, 전환, 레이블/배지, Do/Don't. 교육 원장 - 모든 정제 사항을 추가. |
references/component-catalog.md | 키트 색인 + 승격 거버넌스 + 구축 부품 로그. |
components/*.html | 자체 포함 모션 블록 (pf- 접두사): 선행 주석 + 범위 지정 <style> + 마크업 + <!-- Timeline recipe -->. 케이스 타임라인에 붙여넣기. |
templates/canvas.html | 빈 브랜드 1600x900 HF 스테이지; brand.css 인라인, 루프 베일 준비. 자유 형식 케이스 시작 지점. |
examples/before-after/ | Page 체크업 인트로 = 작업 예제, data-composition-variables를 통해 매개변수화됨. 전/후 케이스 시작 지점. |
렌더링은 npx hyperframes render 직접 사용 - 일러스트라의 Playwright PNG용 render.mjs와 같은 맞춤 렌더링 스크립트 없음.
거버넌스 - 교육 모델 ("매번 다시 하지 않음")
모든 정제는 일회용 파일이 아닌 공유 레이어에 축적됨:
- 브랜드 색상/글로우 조정 ->
references/brand.css(아이덴티티 + 배지 팔레트는_pf-brand/에 위치) - 레이블/배지 취향 변경 ->
_pf-brand/label-rules.md+_pf-brand/badges.html - 새로운 이징/페이싱/기술 고정 ("현대 PF") ->
references/style-guide.md - 두 번째로 손수 구축된 블록 -> 제안 후 승인을 통해
components/로 승격.
각 피스 후에 손수 구축한 것을 3가지 기준에 대해 스캔:
- 재사용 가능 - 이 케이스의 콘텐츠에 특화되지 않은 일반 모션 개념. ("다른 기능에서 이걸 다시 만들 가능성이 있나?")
- 자체 포함 및 매개변수화 가능 - 자체 마크업 + 범위 지정 CSS + 깔끔한 타임라인 레시피; 텍스트/색상/크기를 받음.
- 브랜드에 맞고 깔끔 - var-only, 스타일 가이드를 따름.
모두 충족 -> 제안 승격: 새 components/<name>.html + component-catalog.md 구축 부품 행 (멤버에게 예/아니오로 묻고; 자동 추가 금지, 기술적 판단 요구 금지).
강한 신호: 두 번째로 구축된 부품은 거의 항상 승격. 키트를 간결하게 유지 (YAGNI) - 실제 케이스가 필요할 때까지 부품을 시드하지 않음. 각 사용은 키트 + 가이드라인을 두껍게 하여 다음 피스를 더 적은 작업으로 만듦. 기본 게이트 = 제안 + 승인.