글리치 텍스트 애니메이션. 사이버펑크·디지털 노이즈.
⚡ 미리보기
GLITCH
사용법
- 텍스트 입력
- 글자 크기·강도·속도 조정
- RGB 채널 색 (빨강·시안 분리)
- 배경 (어두울수록 효과 강함)
- HTML+CSS 복사
주요 기능
- RGB 채널 분리 (빨강+시안)
- clip-path 부분 표시 애니메이션
- 강도·속도 자유 조정
- 모든 브라우저 호환 (CSS만)
- HTML+CSS 전체 코드 복사
활용 예시
- 해킹·사이버펑크 사이트 — 메인 히어로
- 게임 사이트 — 영웅 이름·로고
- 유튜브 인트로 — 강렬한 첫 인상
- 음악 앨범 페이지 — 인디·일렉
- 404 에러 페이지 — 재미있는 에러
글리치 효과의 원리
실제 화면 글리치를 모방한 효과. (1) RGB 채널 분리 — text-shadow로 빨강·시안 위치 살짝 이동 (CRT 모니터 잔상). (2) clip-path 부분 표시 — keyframes로 매 프레임 다른 영역 잘림 (테이프 끊김). (3) 빠른 위치 변경 — 무작위 좌표로 흔들림. 90년대 VHS·CRT 향수를 자극.
자주 묻는 질문
접근성 (시각 장애)?
빠른 깜빡임은 광민감 발작 유발 가능. `prefers-reduced-motion` 미디어쿼리로 끄는 옵션 권장.
모바일 성능?
강도 5px 이하·속도 3초 이상이 적정. CPU 부담 적음.
SVG 글리치는?
SVG filter feTurbulence로 더 정교 가능. CSS는 가볍고 보편적.
무료?
네.