Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>Horror VSCode ExtensionNew to Visual Studio Code? Get it now.
Horror VSCode Extension

Horror VSCode Extension

seonwoo kim

|
3 installs
| (0) | Free
Add spooky horror effects to VSCode - ghost cursor, scare effects on save, and floating ghost animations. Built with Kiro AI.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

👻 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)

  1. Open VSCode
  2. Open the Extensions tab (Ctrl+Shift+X or Cmd+Shift+X)
  3. Search for "Horror VSCode Extension"
  4. Click the "Install" button
  5. Restart VSCode

From VSIX File

  1. Download the latest .vsix file from the Releases page
  2. Open the Command Palette in VSCode (Ctrl+Shift+P or Cmd+Shift+P)
  3. Type and select "Extensions: Install from VSIX..."
  4. Select the downloaded .vsix file
  5. Restart VSCode

🎮 Usage

Basic Usage

The extension activates automatically after installation. Experience horror effects right away without any configuration!

Testing Effects

  1. Ghost Cursor: Move your mouse in the editor area
  2. Scare Effect: Create an error in your code and save the file (Ctrl+S or Cmd+S)
  3. Ghost Animation: Wait for 5+ seconds without typing

Customizing Effects

You can fine-tune each effect in VSCode settings:

  1. Open Settings (Ctrl+, or Cmd+,)
  2. Search for "Horror Extension"
  3. 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 폴더의 모든 파일을 스캔합니다!

  1. 공포 이미지/사운드 추가: resources/scare/ 폴더에 파일 추가

    • 이미지: PNG, JPG, SVG 지원
    • 사운드: MP3, WAV 지원
  2. 유령 이미지 추가: resources/ghosts/ 폴더에 파일 추가

    • PNG, JPG, SVG 지원
    • 투명 배경 권장
  3. 커서 이미지 추가: resources/cursors/ 폴더에 파일 추가

    • PNG, SVG 지원
    • 32x32px 권장

파일을 추가한 후 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 재시작 필요

무료 리소스 찾기

호러 이미지와 사운드를 무료로 다운로드할 수 있는 사이트:

이미지:

  • Unsplash - 고품질 무료 이미지
  • Pexels - 무료 스톡 사진
  • Pixabay - 무료 이미지 및 일러스트
  • Flaticon - 무료 아이콘 (SVG)

사운드:

  • Freesound - 커뮤니티 사운드 라이브러리
  • Zapsplat - 무료 효과음
  • Mixkit - 무료 사운드 효과
  • BBC Sound Effects - BBC 사운드 아카이브

주의: 라이선스를 확인하고 상업적 사용이 가능한지 확인하세요!

🔧 문제 해결

효과가 작동하지 않아요

  1. 확장 프로그램이 활성화되어 있는지 확인하세요
  2. horrorExtension.enabled 설정이 true인지 확인하세요
  3. VSCode를 재시작해보세요

오디오가 재생되지 않아요

  1. horrorExtension.scare.audioEnabled 설정이 true인지 확인하세요
  2. 볼륨이 0으로 설정되어 있지 않은지 확인하세요
  3. 브라우저의 autoplay 정책으로 인해 첫 재생이 실패할 수 있습니다

유령이 나타나지 않아요

  1. horrorExtension.ghost.enabled 설정이 true인지 확인하세요
  2. horrorExtension.ghost.idleThreshold 설정에 지정된 시간만큼 기다려보세요
  3. 에디터에 포커스가 있는지 확인하세요

🛠️ 개발

이 확장 프로그램을 직접 빌드하고 수정하려면:

요구사항

  • 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

디버깅

  1. VSCode에서 프로젝트를 엽니다
  2. F5를 눌러 Extension Development Host를 실행합니다
  3. 새 VSCode 창에서 확장 프로그램을 테스트합니다

패키징

# vsce 설치 (처음 한 번만)
npm install -g @vscode/vsce

# VSIX 파일 생성
vsce package

📝 변경 로그

[0.0.1] - 2024-11-14

  • 초기 릴리스
  • 유령 커서 효과
  • 저장 시 공포 효과 (이미지 + 사운드)
  • 떠다니는 유령 애니메이션
  • 설정 옵션 제공

🤝 기여하기

버그 리포트, 기능 제안, Pull Request를 환영합니다!

  1. 이 저장소를 Fork합니다
  2. 새 브랜치를 생성합니다 (git checkout -b feature/amazing-feature)
  3. 변경사항을 커밋합니다 (git commit -m 'Add some amazing feature')
  4. 브랜치에 Push합니다 (git push origin feature/amazing-feature)
  5. Pull Request를 생성합니다

📄 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.

👏 감사의 말

이 확장 프로그램을 사용해주셔서 감사합니다! 즐거운 (그리고 무서운) 코딩 되세요! 👻


주의: 이 확장 프로그램은 재미를 위한 것입니다. 심장이 약하신 분들은 주의해서 사용하세요! 😱

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft