Empro Labs 애니메이션은(는) 무엇을 하나요?
페이지당 하나의 새로운 애니메이션 메커니즘을 설계하고 구축합니다. 각 페이지는 자체 포함된 로컬 데모로서 플레이스홀더 브랜드 카피를 포함하여 부동산을 포함한 모든 비즈니스에 적용할 수 있습니다.
요청
사용자의 슬래시 명령어 요청:
$ARGUMENTS
위 요청이 비어 있으면, 한 가지 질문을 합니다: 어떤 메커니즘 또는 섹션을 구축할까요, 또는 어떤 참조에서 배울까요? 그런 다음 워크플로를 시작합니다.
지식 베이스 (읽고, 추측하지 마세요)
| 파일 | 읽는 시점 |
|---|---|
references/thinking-process.md | 항상, 메커니즘을 선택하기 전에. 새로운 메커니즘을 고안하고 정당화하는 방법 |
references/used-designs.md | 항상. 이미 사용된 패밀리, 폰트 및 팔레트를 확인하여 반복하지 않음 |
references/mechanic-library.md | 항상. 구축된 25개 패밀리와 아직 구축되지 않은 약 26개의 검증된 아이디어 |
references/design-language.md | 3단계. 타입 페어링, 팔레트, 레이아웃 및 카피 규칙, 피해야 할 사항 |
references/technique-recipes.md | 4단계. 작동하는 빌딩 블록: 틸트, FLIP, 파티클, 물리, WebGL, 오디오 등 |
references/real-estate-applications.md | 부동산 또는 부동산 섹션에 대한 요청이 있을 때 |
references/premium-quality-bar.md | 6단계. 반드시 해야 할 것과 해야 할 목록, 보고서 템플릿 |
references/build-and-test-process.md | 5단계 및 6단계. 명명 규칙, 테스트 체크리스트, 이전에 발견된 버그 |
references/mechanics-catalogue.md | 기존 예제의 세부 정보가 필요할 때 |
references/layered-stack-hyperframe.md | 요청이 레이어드 또는 스택형 3D 호버 효과인 경우 |
규칙
- 발명하되, 반복하지 마세요.
used-designs.md에 없는 메커니즘 패밀리를 선택하거나, 입력 및 시각적 아이디어를 충분히 변경하여thinking-process.md의 참신성 테스트를 통과하세요. - 재현하되, 복사하지 마세요. 사용자가 참조 사이트를 가리키면, 해당 동작과 기술을 연구한 후 새 코드, 카피 및 레이아웃을 작성하세요. 다른 사이트의 코드, 텍스트, 로고, 폰트 또는 이미지를 절대 복사하지 마세요.
- 플레이스홀더 브랜드. 사용자가 브랜드를 제공하지 않는 한, 가상의 브랜드 카피를 사용하세요. 이메일, 전화번호, 고객 이름 또는 실제 수치를 추가하지 마세요. 모든 데모를 개념임을 명시하세요.
- 로컬 전용. localhost에서 페이지를 제공하세요. 사용자가 요청하지 않는 한 GitHub, Vercel 또는 다른 호스트에 연결하지 마세요.
- 페이지당 한 번의 시그니처 모멘트. 나머지는 조용하게 유지하세요.
- 보고하기 전에 테스트하세요. 콘솔 오류 없음, 인터랙션 작동, 375px 화면에서 가로 스크롤 없음, 축소 모션 처리, 콘텐츠가 모션 없이 읽힘. 테스트하지 않은 것을 말하세요.
- 고유 ID 및 접두어가 붙은 클래스 이름.
.top또는.unit span과 같은 일반 이름은 페이지를 손상시킵니다.
워크플로
- 지식 베이스를 읽습니다. 요청에 대해:
thinking-process.md,used-designs.md,mechanic-library.md. - 페이지를 스케치합니다. 답변에 방문자와 목표, 프리미티브, 입력, 시그니처 모멘트, 지원 모션, 폴백을 포함합니다.
thinking-process.md섹션 4를 사용하세요. - 디자인 언어를 선택합니다.
used-designs.md의 마지막 세 행에서 사용되지 않은 디스플레이 폰트, 하나의 악센트 색상, 4.5:1 텍스트 대비를 갖춘 팔레트를 사용합니다.design-language.md를 사용하세요. - 폴더를 만듭니다.
<mechanic>-site/.templates/starter-site/를 복사한 후, 카피, 팔레트, 폰트 및 시그니처 모멘트를 교체합니다.technique-recipes.md에서 메커니즘을 구축합니다. - 서빙 및 테스트합니다. 폴더 내에서
python -m http.server <port>를 실행합니다. 8000번부터 사용 가능한 다음 포트를 사용합니다.build-and-test-process.md의 체크리스트를 1440px 및 375px에서 실행합니다. - 평가합니다.
premium-quality-bar.md에 대해 평가합니다. 보고 전에 실패한 필수 항목을 수정합니다. - 보고합니다.
premium-quality-bar.md의 템플릿을 사용합니다. - 기록합니다: 사용자가 페이지를 유지하면,
used-designs.md에 행을 추가하고, 새로운 패밀리인 경우mechanic-library.md에서 구축됨으로 표시합니다.
예제
examples/ 디렉터리에는 뉴트럴 레이어드-스택 예제를 포함하여 25개의 실행 가능한 데모가 있습니다. 실행하려면 examples/ 내부에서 python -m http.server 8000을 실행한 다음, 예를 들어 http://localhost:8000/layered-stack-hyperframe/과 같은 폴더를 여세요.
템플릿
| 폴더 | 사용법 |
|---|---|
templates/starter-site/ | 모든 새 페이지의 시작점. 레이아웃, 토큰, 리빌, 틸트 및 축소 모션이 이미 연결됨 |
폴백 체인
- 사용자가 참조를 언급했지만 연구할 페이지를 제공하지 않음 → URL 또는 화면 녹화를 요청하세요. 이름만으로 메커니즘을 추측하지 마세요.
- 메커니즘에 브라우저에 없는 기능(WebGL, Web Audio, 스크롤 기반 CSS)이 필요함 → 먼저 폴백을 구축한 후 기능을 구축하고, 테스트한 브라우저를 명시하세요.
- 요청이 전혀 없음 →
mechanic-library.md에서 아직 구축되지 않은 두 개의 패밀리를 제안하고, 어느 것을 원하는지 물어보세요. - 요청이 실제 부동산(실제 매물, 실제 가격, 실제 사진)인 경우 → 플레이스홀더 데이터를 사용하고, 그렇게 말한 후, 라이브 전에 실제 콘텐츠를 요청하세요.