r/ClaudeAI•약 8시간 전•56•5
28가지 예술 스타일로 구현한 Claude 마스코트 - 전부 코드로 작성됨
Claude Macot in 28 art styles - all drawn by code
핵심 요약
브라우저에서 코드로만 28가지 예술 스타일을 구현한 Claude 마스코트 갤러리를 소개합니다.
- 코드 기반 구현 — 이미지 에셋이나 외부 의존성 없이 브라우저에서 직접 렌더링됨
- 다양한 예술 스타일 — 동굴 벽화부터 바우하우스, 픽셀 아트, ASCII 등 28가지 스타일 지원
- 상호작용 기능 — 마우스 커서를 따라다니거나 클릭 및 키보드 입력으로 애니메이션 실행 가능
- 오픈 소스 공개 — MIT 라이선스로 배포되어 누구나 자유롭게 클론 및 스타일 추가 가능
브라우저에서 코드로 직접 그린 Claude Code 마스코트 갤러리를 하나 만들었어. 이미지 에셋도 없고, 외부 의존성도 하나도 안 썼음. 동굴 벽화나 문장(heraldry)부터 바우하우스, 픽셀 아트, 텔레텍스트, ASCII, Maze War까지 총 28가지 예술 스타일을 담았어. 마스코트가 커서를 따라다니고, 클릭하면 뱅글뱅글 돌거나 W/D/H 키를 눌러서 인사하고 춤추고 깡충깡충 뛰게 할 수도 있어.
이건 ChetasLua가 만든 원작 Claude Code mascot in Twenty Styles(그 사람이 만든 20가지 스타일이랑 3D 엔진)를 기반으로 했고, 내가 실험적인 코딩/터미널 스타일 8개를 추가했어.
Claude를 어떻게 썼냐면
- 새로운 스타일 8개 (Claude Code의 Opus 5.5 사용): [예를 들어, 글리프 타일이나 형광 스트림, 텔레텍스트 페이지 같은 내가 원하는 느낌을 레퍼런스랑 같이 설명했어. Claude가 기존 엔진 위에
CM.style({...})그리기 함수로 각각 구현해 줬고, 스크린샷 보면서 제대로 나올 때까지 계속 수정했지.] 제일 마음에 드는 건 Code Poem인데, Claude가 자기 소스 코드에서 글자를 따와서 그림을 스스로 그려내게 만들었어.
무료로 써봐: MIT 라이선스라 공짜야. 리포지토리 클론하고 python -m http.server 돌린 다음에 브라우저로 열면 돼. 28가지 스타일 전부 README에 애니메이션으로 넣어놨어.
GitHub: https://github.com/henrik-thevibe/Claude-Mascot-Style-Gallery
마음껏 포크해서 수정해 보고, 네 스타일도 추가해 봐. 하고 싶은 대로 다 해봐. :)
