Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 

Repository files navigation

🔥 Sandevistan Cursor Effect

⚠️ 이 프로젝트는 Canvas 학습 목적의 연습작입니다.

⚠️ This is a practice project for learning HTML5 Canvas.

Cyberpunk: Edgerunners 산데비스탄에서 영감을 받은 인터랙티브 커서 이펙트

Interactive cursor trail effect inspired by the Sandevistan from Cyberpunk: Edgerunners

🎮 Live Demo

👉 결과물 확인 / Result

📸 Preview

OFF Mode ON Mode
클릭 대기 화면 산데비스탄 발동

🇰🇷 한국어

소개

사이버펑크: 엣지러너에 등장하는 산데비스탄의 RGB 잔상 효과를 HTML Canvas로 구현한 연습 프로젝트입니다.

기능

  • 모드 전환 — 좌클릭으로 OFF/ON 모드 전환
  • 원형 트랜지션 — 화면 중앙에서 원이 퍼지는 전환 애니메이션
  • 무지개 잔상 — HSL 색상환을 순환하며 커서 뒤에 잔상 생성
  • 잔상 투명도 — 오래된 잔상일수록 점점 투명해짐
  • 잔상 크기 변화 — 뒤로 갈수록 잔상 크기가 작아짐
  • 타이핑 텍스트 — 모드 전환 시 타이핑 애니메이션으로 텍스트 출력
  • 커서 Glow — 네온 그린 발광 효과
  • 반응형 — 창 크기에 맞게 자동 조절

사용 기술

  • HTML5 Canvas
  • Vanilla JavaScript
  • Google Fonts (Orbitron)

🇺🇸 English

About

A cursor trail effect inspired by the Sandevistan implant from Cyberpunk: Edgerunners, built with HTML Canvas. Features rainbow-colored afterimages with RGB ghosting. This is a practice project for learning Canvas API.

Features

  • Mode Toggle — Left click to switch between OFF/ON modes
  • Circle Transition — Expanding circle animation from screen center
  • Rainbow Trails — HSL color cycling creates colorful cursor afterimages
  • Trail Opacity — Older trails gradually fade out
  • Trail Size Decay — Trails shrink as they age
  • Typing Text — Typewriter animation on mode switch
  • Cursor Glow — Neon green glow effect on cursor
  • Responsive — Adapts to window size

Tech Stack

  • HTML5 Canvas
  • Vanilla JavaScript
  • Google Fonts (Orbitron)

How to Run

# 그냥 HTML 파일을 브라우저에서 열면 됩니다
# Simply open the HTML file in your browser
open index.html

License

MIT


"A rudimentary implant."

About

Cyberpunk-inspired cursor trail effect built with HTML5 Canvas

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages