실무에서 자주 쓰는 웹 애니메이션 39가지를 순수 HTML·CSS와 vanilla JS로 모았습니다. 값을 조정해 코드로 복사하거나 AI에게 적용을 맡길 수 있습니다.
Translation pending
Developer toolsTypeScript · CSSGitHub @sdeng409OnlineOwner unconfirmed
Have you tried it? One tap is enough. No sign-in needed.
No updates detected yet. GitHub releases will appear here.
Owners of public repositories under a personal GitHub account can sign in to verify ownership and manage the introduction themselves. No administrator approval is needed.
Sign in, generate a verification file, and commit it to this repository’s default branch within 30 minutes. Files on other branches or forks do not count. Then check the file below to manage the project without administrator approval. Keep the file to retain your access.
If needed, you will go to sign-in. After signing in, return here and press your chosen verification button again.
Run /nomorevibe verify in your project folder to verify ownership and manage the introduction yourself.
Verify in one minuteAsk about other verification options
실무에서 자주 쓰는 웹 애니메이션 39가지. 순수 HTML·CSS와 vanilla JS 예제와 Claude Code skill
Translation pending
Taken from the repository README
Loading the full README. The saved excerpt is shown below.
실무에서 자주 쓰는 웹 애니메이션 39가지를 모은 갤러리입니다. 모든 예제는 순수 HTML·CSS와 vanilla JS로 작성되어 어떤 프레임워크에도 옮길 수 있습니다. • src/examples/{id}/index.ts: 예제 데이터(설명, 조정 값, HTML, CSS 템플릿). CSS의 {{key}}는 조정 값 자리입니다. • src/examples/{id}/demo.js: 예제의 JS. 페이지에서 실행되는 코드이자 복사용 코드의 원본입니다. • src/examples/index.ts: 목록 순서. • 빌드 결과 • /: 목록과 상세 모달 • /{id}/: 예제별 페이지 • /{id}.md, /llms.txt, /llms-full.txt: AI가 읽는 설명서 • 상세 창의 AI 프롬프트 복사: 조정한 값이 반영된 코드와 옮길 때 지킬 규칙을 복사합니다. 어떤 AI 도구에든 붙여 넣으면 됩니다. • Claude Code skill: skill/motion-index를 ~/.claude/skills/에 연결하면, "이 애니메이션을 지금 코드에 적용해줘" 같은 요청에서 예제를 찾아 옮깁니다.Read the full README ↗
실무에서 자주 쓰는 웹 애니메이션 39가지를 모은 갤러리입니다. 모든 예제는 순수 HTML·CSS와 vanilla JS로 작성되어 어떤 프레임워크에도 옮길 수 있습니다.
pnpm install
pnpm dev # http://localhost:4321/
pnpm check # 타입 검사
pnpm build # dist/ 생성
pnpm skill # 빌드 후 skill/motion-index/references 갱신
src/examples/{id}/index.ts: 예제 데이터(설명, 조정 값, HTML, CSS 템플릿). CSS의 {{key}}는 조정 값 자리입니다.src/examples/{id}/demo.js: 예제의 JS. 페이지에서 실행되는 코드이자 복사용 코드의 원본입니다.src/examples/index.ts: 목록 순서./: 목록과 상세 모달/{id}/: 예제별 페이지/{id}.md, /llms.txt, /llms-full.txt: AI가 읽는 설명서상세 창의 AI 프롬프트 복사: 조정한 값이 반영된 코드와 옮길 때 지킬 규칙을 복사합니다. 어떤 AI 도구에든 붙여 넣으면 됩니다.
Claude Code skill: skill/motion-index를 ~/.claude/skills/에 연결하면, "이 애니메이션을 지금 코드에 적용해줘" 같은 요청에서 예제를 찾아 옮깁니다.
ln -s "$PWD/skill/motion-index" ~/.claude/skills/motion-index