👻 Horror VSCode Extension
Experience a spooky atmosphere while coding! This extension adds various horror-themed visual and audio effects to your VSCode editor, providing a unique and entertaining coding experience.
🤖 Built with Kiro AI - This extension was created using Kiro, an AI-powered development assistant.
✨ Features
👻 Ghost Mouse Cursor
Your mouse cursor transforms into a ghost image, creating a spooky atmosphere throughout the editor.
😱 Scare Effect on Save
When you save code with errors, an immediate scare effect is triggered:
- A scary image appears as a full-screen overlay for 0.5-2 seconds
- Horror sound plays (volume adjustable)
- No effect if there are no errors
🌙 Floating Ghost Animation
After 5 seconds of inactivity, ghosts appear and float smoothly across the screen:
- 2-5 ghosts displayed simultaneously
- Start from random positions and move smoothly
- Opacity changes create a dreamy atmosphere
- Fade out when you start typing again
📦 Installation
From VSCode Marketplace (Recommended)
- Open VSCode
- Open the Extensions tab (
Ctrl+Shift+X or Cmd+Shift+X)
- Search for "Horror VSCode Extension"
- Click the "Install" button
- Restart VSCode
From VSIX File
- Download the latest
.vsix file from the Releases page
- Open the Command Palette in VSCode (
Ctrl+Shift+P or Cmd+Shift+P)
- Type and select "Extensions: Install from VSIX..."
- Select the downloaded
.vsix file
- Restart VSCode
🎮 Usage
Basic Usage
The extension activates automatically after installation. Experience horror effects right away without any configuration!
Testing Effects
- Ghost Cursor: Move your mouse in the editor area
- Scare Effect: Create an error in your code and save the file (
Ctrl+S or Cmd+S)
- Ghost Animation: Wait for 5+ seconds without typing
Customizing Effects
You can fine-tune each effect in VSCode settings:
- Open Settings (
Ctrl+, or Cmd+,)
- Search for "Horror Extension"
- Modify the desired settings
⚙️ 설정 옵션
전체 설정
| 설정 |
타입 |
기본값 |
설명 |
horrorExtension.enabled |
boolean |
true |
호러 효과 전체 활성화/비활성화 |
커서 효과 설정
| 설정 |
타입 |
기본값 |
설명 |
horrorExtension.cursor.enabled |
boolean |
true |
유령 커서 효과 활성화 |
horrorExtension.cursor.imagePath |
string |
"" |
커스텀 커서 이미지 경로 (비어있으면 기본 이미지 사용) |
공포 효과 설정
| 설정 |
타입 |
기본값 |
설명 |
horrorExtension.scare.enabled |
boolean |
true |
저장 시 공포 효과 활성화 |
horrorExtension.scare.audioEnabled |
boolean |
true |
공포 오디오 재생 활성화 |
horrorExtension.scare.audioVolume |
number |
0.5 |
공포 오디오 볼륨 (0.0 ~ 1.0) |
horrorExtension.scare.imageDuration |
number |
1000 |
공포 이미지 표시 시간 (밀리초, 500~2000) |
유령 애니메이션 설정
| 설정 |
타입 |
기본값 |
설명 |
horrorExtension.ghost.enabled |
boolean |
true |
유령 애니메이션 활성화 |
horrorExtension.ghost.count |
number |
3 |
동시에 표시할 유령 개수 (2~5) |
horrorExtension.ghost.idleThreshold |
number |
5 |
유령이 나타나기까지의 대기 시간 (초) |
커스텀 리소스 설정
| 설정 |
타입 |
기본값 |
설명 |
horrorExtension.custom.scareImages |
array |
[] |
커스텀 공포 이미지 경로 목록 |
horrorExtension.custom.scareAudios |
array |
[] |
커스텀 공포 사운드 경로 목록 |
horrorExtension.custom.ghostImages |
array |
[] |
커스텀 유령 이미지 경로 목록 |
설정 예시
기본 설정:
{
"horrorExtension.enabled": true,
"horrorExtension.cursor.enabled": true,
"horrorExtension.scare.enabled": true,
"horrorExtension.scare.audioVolume": 0.7,
"horrorExtension.scare.imageDuration": 1500,
"horrorExtension.ghost.enabled": true,
"horrorExtension.ghost.count": 4,
"horrorExtension.ghost.idleThreshold": 3
}
커스텀 리소스 사용:
{
"horrorExtension.enabled": true,
"horrorExtension.custom.scareImages": [
"C:/Users/YourName/Pictures/scary1.png",
"C:/Users/YourName/Pictures/scary2.jpg"
],
"horrorExtension.custom.scareAudios": [
"C:/Users/YourName/Music/scream.mp3"
],
"horrorExtension.custom.ghostImages": [
"C:/Users/YourName/Pictures/ghost.png"
]
}
🎨 커스터마이징
방법 1: resources 폴더에 파일 추가 (가장 간단!)
확장 프로그램이 자동으로 resources 폴더의 모든 파일을 스캔합니다!
공포 이미지/사운드 추가: resources/scare/ 폴더에 파일 추가
- 이미지: PNG, JPG, SVG 지원
- 사운드: MP3, WAV 지원
유령 이미지 추가: resources/ghosts/ 폴더에 파일 추가
- PNG, JPG, SVG 지원
- 투명 배경 권장
커서 이미지 추가: resources/cursors/ 폴더에 파일 추가
파일을 추가한 후 VSCode를 재시작하면 자동으로 사용됩니다!
방법 2: 설정으로 외부 파일 사용
코드 수정 없이 설정만으로 외부 커스텀 리소스를 추가할 수 있습니다!
1. 커스텀 커서 이미지
{
"horrorExtension.cursor.imagePath": "C:/Users/YourName/Pictures/my-cursor.png"
}
2. 커스텀 공포 이미지
{
"horrorExtension.custom.scareImages": [
"C:/Users/YourName/Pictures/scary1.png",
"C:/Users/YourName/Pictures/scary2.jpg",
"C:/Users/YourName/Pictures/scary3.svg"
]
}
3. 커스텀 공포 사운드
{
"horrorExtension.custom.scareAudios": [
"C:/Users/YourName/Music/scream1.mp3",
"C:/Users/YourName/Music/scream2.wav"
]
}
4. 커스텀 유령 이미지
{
"horrorExtension.custom.ghostImages": [
"C:/Users/YourName/Pictures/ghost1.png",
"C:/Users/YourName/Pictures/ghost2.svg"
]
}
사용 팁:
- 절대 경로를 사용하세요 (예:
C:/Users/... 또는 /home/user/...)
- 이미지: PNG, JPG, SVG 지원 (투명 배경 권장)
- 사운드: MP3, WAV 지원 (1-3초 권장)
- 여러 파일을 추가하면 랜덤으로 선택됩니다
- 설정 변경 후 VSCode 재시작 필요
무료 리소스 찾기
호러 이미지와 사운드를 무료로 다운로드할 수 있는 사이트:
이미지:
사운드:
주의: 라이선스를 확인하고 상업적 사용이 가능한지 확인하세요!
🔧 문제 해결
효과가 작동하지 않아요
- 확장 프로그램이 활성화되어 있는지 확인하세요
horrorExtension.enabled 설정이 true인지 확인하세요
- VSCode를 재시작해보세요
오디오가 재생되지 않아요
horrorExtension.scare.audioEnabled 설정이 true인지 확인하세요
- 볼륨이 0으로 설정되어 있지 않은지 확인하세요
- 브라우저의 autoplay 정책으로 인해 첫 재생이 실패할 수 있습니다
유령이 나타나지 않아요
horrorExtension.ghost.enabled 설정이 true인지 확인하세요
horrorExtension.ghost.idleThreshold 설정에 지정된 시간만큼 기다려보세요
- 에디터에 포커스가 있는지 확인하세요
🛠️ 개발
이 확장 프로그램을 직접 빌드하고 수정하려면:
요구사항
- Node.js 18 이상
- npm 또는 yarn
- VSCode 1.80.0 이상
설치 및 빌드
# 저장소 클론
git clone https://github.com/your-repo/horror-vscode-extension.git
cd horror-vscode-extension
# 의존성 설치
npm install
# 컴파일
npm run compile
# 감시 모드로 컴파일 (개발 중)
npm run watch
디버깅
- VSCode에서 프로젝트를 엽니다
F5를 눌러 Extension Development Host를 실행합니다
- 새 VSCode 창에서 확장 프로그램을 테스트합니다
패키징
# vsce 설치 (처음 한 번만)
npm install -g @vscode/vsce
# VSIX 파일 생성
vsce package
📝 변경 로그
[0.0.1] - 2024-11-14
- 초기 릴리스
- 유령 커서 효과
- 저장 시 공포 효과 (이미지 + 사운드)
- 떠다니는 유령 애니메이션
- 설정 옵션 제공
🤝 기여하기
버그 리포트, 기능 제안, Pull Request를 환영합니다!
- 이 저장소를 Fork합니다
- 새 브랜치를 생성합니다 (
git checkout -b feature/amazing-feature)
- 변경사항을 커밋합니다 (
git commit -m 'Add some amazing feature')
- 브랜치에 Push합니다 (
git push origin feature/amazing-feature)
- Pull Request를 생성합니다
📄 라이선스
이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.
👏 감사의 말
이 확장 프로그램을 사용해주셔서 감사합니다! 즐거운 (그리고 무서운) 코딩 되세요! 👻
주의: 이 확장 프로그램은 재미를 위한 것입니다. 심장이 약하신 분들은 주의해서 사용하세요! 😱