MagicMaidButHTML

⚠️ 이 프로젝트는 DOM 조작 / 타이머 학습 목적의 연습작입니다.

⚠️ 원본 MV의 모든 저작권은 원저작자에게 있으며, 문제 시 즉시 삭제합니다.

MIMI - Magic Maid 곡의 MV를 HTML에서 구현하기

👉 결과물

🇰🇷 한국어

소개

목적 : 동영상 재생 없이 HTML 만으로 MV를 재현할 수 있는가?

사용 기술

• HTML/CSS/JS (순수, 프레임워크 없음)
• requestAnimationFrame 기반 타임라인 엔진
• CSS writing-mode (세로 쓰기)
• 프레임 시퀀스 스프라이트 애니메이션
• Google Fonts (Noto Serif KR)
• Web Audio (HTML5 Audio)

---

🇺🇸 English

About

Can we recreate a music video using only HTML, without a video player?

This is a fan-made learning project that recreates the MV of "Magic Maid" by MIMI feat. Kasane Teto SV using pure HTML/CSS/JS.

Tech Stack

• HTML/CSS/JS (Vanilla, no frameworks)
• requestAnimationFrame-based timeline engine
• CSS writing-mode (vertical text)
• Frame sequence sprite animation
• Google Fonts (Noto Serif KR)
• Web Audio (HTML5 Audio)

---

Credits

원곡 / Original Song

• Magic Maid - MIMI feat. Kasane Teto SV
• 원본 MV / Original MV: https://youtu.be/TC80uw4HgCw?si=0RCzOzYKWSEEMRPR

원곡 크레딧 / Original Credits

• 음악 / Music: MIMI (@mimi_3mi)
• 일러스트, 애니메이션 / Illustration, Animation: 3774. (@bokarokaku)
• 안무 / Choreography: 🌻 (@_Niiray)
• Mix, Mastering: 하루오 / Haruo (@haluo_haluo)

---

License

• 이 프로젝트는 개인 학습 목적의 비상업적 팬 프로젝트입니다.
• This is a non-commercial fan project for personal learning purposes.
• 원 저작자에게 문제 시 즉시 삭제합니다. / Will be removed immediately upon request from the rights holder.