Hiệu ứng Text Glitch (Nhiễu sóng Cyberpunk) là gì?

Text Glitch là một hiệu ứng thị giác mô phỏng sự cố kỹ thuật số, vỡ hình, nhiễu sóng màn hình CRT cũ hoặc các lỗi hệ thống (Bug). Mang đậm phong cách Cyberpunk, Synthwave và Sci-Fi, hiệu ứng Glitch được sử dụng rộng rãi trên các website Game, Portfolio sáng tạo, hoặc các trang sự kiện âm nhạc điện tử (EDM) nhằm tạo ấn tượng mạnh mẽ, ngầu và nổi loạn cho người xem.

Cơ chế tạo hiệu ứng Glitch bằng CSS thuần

Để tạo Glitch mà không cần đến Javascript hay thẻ Canvas, lập trình viên sử dụng kỹ thuật Pseudo-elements (::before và ::after) kết hợp với clip-path.

1. Nhân bản chữ: Sử dụng thuộc tính content: attr(data-text) để tạo ra 2 bản sao chữ đè lên văn bản gốc.
2. Phối màu quang sai (Chromatic Aberration): Gán bản sao thứ nhất màu Đỏ (Cyan) và bản sao thứ hai màu Xanh dương (Magenta) rồi dịch chuyển chúng lệch nhau 1-2 pixel.
3. Cắt và Di chuyển liên tục: Sử dụng @keyframes kết hợp với clip-path: inset() để liên tục cắt ngẫu nhiên các vệt ngang của bản sao, tạo ra cảm giác chữ bị giật và vỡ nát.

Tùy biến Hiệu ứng Glitch với Công cụ sinh mã tự động

Viết tay một bộ @keyframes cho hiệu ứng Glitch với 20 điểm cắt (từ 0% đến 100%) là cực hình. Công cụ của chúng tôi tự động hóa quy trình này:

• Cho phép bạn thay đổi cường độ giật (Glitch Intensity).
• Cho phép đổi màu phát sáng quang sai (Cyberpunk Colors).
• Tự động sinh ra khối CSS @keyframes dài hàng trăm dòng, bạn chỉ việc bấm Copy và gán class vào dự án HTML của mình.