Glitch Art 故障艺术（Glitch Art）
Glitch Art treats the broken signal as the ornament: the interface looks like a corrupted video feed — RGB channels split into magenta and cyan ghost copies, horizontal strips of the layout tear sideways, blocks of pixels smear into sorted noise, and the frame flickers like a VHS tracking error. The aesthetic is the display error itself, inherited from 1960s video art, circuit bending, and the databending scene, and revived as UI decoration by 2010s net art.
故障艺术把坏掉的信号本身当作装饰：界面看起来像一段被损坏的视频 —— RGB 通道分裂成品红和青色的重影，布局里一条条横向切片向侧面错位，成块的像素被涂抹成排序后的噪点，整个画面像 VHS 磁迹出错一样闪烁。这套美学就是显示错误本身，上承 1960 年代的录像艺术、电路扰动（circuit bending）和数据折弯（databending）圈子，又在 2010 年代被网络艺术复兴为 UI 装饰。
Scope: Covers the deliberate aesthetics of corrupted data and display errors in UI — RGB channel splits, slice tears, pixel sorting, datamosh-like smears, scanlines, VHS tracking bands, and stepped flicker. It does not cover genuinely broken interfaces, and it borrows no imagery from a fictional world: neon cities, HUDs, and kana signage belong to Cyberpunk; VHS-as-consumer-nostalgia belongs to Vaporwave.
范围：本条覆盖在 UI 里刻意使用数据损坏与显示错误的美学 —— RGB 通道分裂、切片错位、像素排序、类 datamosh 的拖影、扫描线、VHS 磁迹带和硬切闪烁。不包括真的坏掉的界面，也不借用任何虚构世界的意象：霓虹都市、HUD 和假名招牌属于赛博朋克；作为消费怀旧的 VHS 属于蒸汽波。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
RGB channel-split ghostsRGB 通道分裂重影 color defining定义特征
Text and key edges render with misregistered color copies — magenta #ff00ff offset 2–3px one way, cyan #00ffff the other — like anaglyph 3D glasses or a misaligned print plate. Without the split, it isn't glitch.
文字和关键边缘带着套印不准的彩色重影 —— 品红 #ff00ff 往一边偏 2–3px，青色 #00ffff 往另一边偏 —— 像红蓝 3D 眼镜或没对准的印刷版。没有这个分裂，就不算故障艺术。
-
Horizontal slice tears横向切片撕裂 geometry defining定义特征
Thin horizontal strips of the interface, 4–12px tall, are displaced sideways by 5–40px — as if rows of the frame buffer were written to the wrong offset. Tears cut across text, images, and controls alike.
界面里 4–12px 高的横向窄条被向侧面错位 5–40px —— 像帧缓冲的某几行被写到了错误的偏移位置。撕裂同时切过文字、图片和控件。
-
Pixel-sorted noise blocks像素排序噪点块 surface defining定义特征
Hard-edged rectangles of corrupted texture — pixels smeared into vertical streaks sorted by brightness, or raw quantized noise — sit inside the composition like damaged sectors of the image.
边缘生硬的矩形损坏纹理 —— 像素被涂抹成按亮度排序的竖向条纹，或未经处理的量化噪点 —— 像图像里坏掉的扇区一样嵌在构图里。
-
Stepped flicker and jitter硬切闪烁与抖动 motion defining定义特征
Motion arrives in hard-cut bursts with steps(1) timing: 1–3px position jumps, skew snaps, and one- or two-frame opacity/brightness flashes every 2–5s. A damaged feed never eases or floats.
动效以 steps(1) 的硬切爆发出现：每 2–5 秒一次 1–3px 的位置跳动、倾斜猛顿和一两帧的不透明度/亮度闪烁。坏掉的信号源从不缓动，也从不漂浮。
-
Scanlines and tracking band扫描线与磁迹带 surface supporting辅助特征
A repeating 1px raster (rgba(255,255,255,.05) every 3px) covers everything, and a brighter VHS tracking band — a 20–30px strip that slightly displaces what it crosses — rolls down the frame every few seconds.
一层重复 1px 光栅（每 3px 一条 rgba(255,255,255,.05)）盖住所有东西；一条更亮的 VHS 磁迹带 —— 20–30px 高、会轻微顶歪它扫过的内容 —— 每隔几秒滚过画面。
-
Monospace error-report type等宽报错字体 typography supporting辅助特征
Labels are set in monospace, uppercase at 10–12px with .1–.18em letter-spacing, sprinkled with error codes and >_ // glyphs — the machine reporting its own failure.
标签用等宽字体，10–12px 全大写，字间距 .1–.18em，点缀着错误码和 >_ // 之类的符号 —— 像机器在汇报自己的故障。
-
How far the corruption goes损坏到什么程度 imagery variable可变特征
Density runs from one tasteful RGB split on a headline to full frame disintegration; what stays constant is that every error is composed deliberately, placed like a brushstroke.
密度可高可低：克制时只在标题上做一次 RGB 分裂，激进时整帧解体；不变的是每个错误都是刻意安排的，像笔触一样有位置感。
-
Coherent neon world-building成体系的霓虹世界观 imagery avoid避免
City skylines, kana signage, HUD brackets, and intact glowing panels are cyberpunk's fictional world. Glitch art has no world — only a broken transmission.
城市天际线、假名招牌、HUD 括线和完好发光的面板都是赛博朋克的虚构世界。故障艺术没有世界 —— 只有一段坏掉的传输信号。
Often confused with: Cyberpunk最容易混淆：赛博朋克（Cyberpunk）
Glitch Art故障艺术（Glitch Art）
Cyberpunk赛博朋克（Cyberpunk）
This is Glitch Art because the corrupted signal is the entire subject, not seasoning on a world: the composition is built from display errors — RGB channel splits, horizontal tears, pixel-sorted noise, tracking bands — with no neon city, no HUD instrumentation, and no high-tech-low-life narrative behind it. Remove the errors and nothing is left; remove cyberpunk's glitches and a coherent neon world remains.
这是故障艺术，因为被损坏的信号本身就是全部主题，而不是某个世界的调味料：整个构图由显示错误搭建 —— RGB 通道分裂、横向撕裂、像素排序噪点、磁迹带 —— 背后没有霓虹都市、没有 HUD 仪表、也没有「高科技低生活」的叙事。拿掉错误就什么都不剩；拿掉赛博朋克的故障效果，剩下的仍是一个完整的霓虹世界。
It would become cyberpunk if the corruption were cleaned up into set dressing for a coherent world — glowing hairline panels, HUD brackets and numeric readouts, kana signage, a rainy-night city mood — with the RGB splits and jitters demoted to occasional seasoning on an intact, functioning interface.
如果把损坏收拾整齐、降格成一个完整世界的布景 —— 发光发丝线面板、HUD 括线和数字读数、假名招牌、雨夜都市气质 —— RGB 分裂和抖动被贬为完好界面上的偶尔点缀，那就变成赛博朋克了。
In code — optional starting points代码写法 —— 可选起点
RGB channel-split headline (anaglyph ghosts)
.glitch { color: #f2f2f2; text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; }Slice tear — hard-cut stepped jitter, never eased
.slice { animation: ga-tear 3s steps(1) infinite; }
@keyframes ga-tear {
0%, 91%, 100% { transform: none; }
93% { transform: translateX(-14px); }
95% { transform: translateX(9px); }
97% { transform: translateX(-4px); }
}Scanline raster + rolling VHS tracking band
.scanlines { background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }
.tracking { height: 26px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.16) 50%, transparent); animation: ga-roll 5s linear infinite; }
@keyframes ga-roll { from { transform: translateY(-30px); } to { transform: translateY(110vh); } }Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface as Glitch Art — a corrupted transmission, not a themed world. Canvas: near-black #0a0a0f, panels flat #12121e with 1px #2c2c44 borders, square corners, no glow or bloom. Type: monospace (ui-monospace), uppercase micro-labels at 10–11px, letter-spacing .12–.18em. Defining moves: (1) RGB channel-split on headlines and key edges — magenta #ff00ff ghost at −2px, cyan #00ffff at +2px (text-shadow or screen-blended duplicates); (2) slice tears: 4–10px horizontal strips displaced 8–24px sideways, magenta/cyan fringes; (3) pixel-sorted noise blocks — vertical brightness-sorted streak rectangles, like damaged sectors; (4) 1px scanlines (rgba(255,255,255,.05) every 3px) overall; (5) a 20–30px VHS tracking band rolling down the frame every 4–6s. Motion: steps(1) keyframes only, 100–250ms translate/skew bursts every 2–5s, rare two-frame flicker — never eased. Avoid neon glow, skylines, kana signage, HUD brackets, grids, chrome — that's cyberpunk/synthwave. Under prefers-reduced-motion disable all jitter, flicker, tears, and bands; keep text legible beneath the corruption.
按故障艺术（Glitch Art）创建这个界面 —— 一段被损坏的传输信号，不是一个主题世界。画布：近黑 #0a0a0f，面板用扁平 #12121e 加 1px #2c2c44 边框，直角，不要辉光。字体：等宽（ui-monospace），微型标签全大写 10–11px，字间距 .12–.18em。定义性动作：(1) 标题和关键边缘做 RGB 通道分裂 —— 品红 #ff00ff 重影偏 −2px，青色 #00ffff 偏 +2px（用 text-shadow 或 screen 混合的复制层）；(2) 切片撕裂：4–10px 高的横向窄条向侧面错位 8–24px，带品红/青色毛边；(3) 像素排序噪点块 —— 按亮度排序的竖向条纹矩形，像坏掉的扇区；(4) 全画面 1px 扫描线（每 3px 一条 rgba(255,255,255,.05)）；(5) 一条 20–30px 的 VHS 磁迹带每 4–6 秒纵向滚过画面。动效：只用 steps(1) 关键帧，每 2–5 秒爆发 100–250ms 的位移/倾斜，偶发两帧闪烁 —— 绝不缓动。避免霓虹辉光、天际线、假名招牌、HUD 括线、网格、铬渐变 —— 那是赛博朋克/合成波。prefers-reduced-motion 下关闭所有抖动、闪烁、撕裂和磁迹带；正文在损坏效果之下保持可读。
Accessibility & misuse可访问性与误用
Flicker is the defining garnish of this style and its biggest hazard: WCAG 2.3.1 bars more than 3 flashes per second, and photosensitive users can be harmed by exactly the two-frame brightness pops that read as 'authentic'. Keep flashes rare and small, and under prefers-reduced-motion freeze every jitter, tear, tracking band, and flicker — static RGB splits and scanlines carry the look without motion.
闪烁是这个风格的招牌点缀，也是它最大的隐患：WCAG 2.3.1 禁止每秒超过 3 次闪烁，而对光敏用户来说，恰恰是那些读起来最「地道」的两帧亮度突变可能造成伤害。闪烁要少、幅度要小；prefers-reduced-motion 下冻结所有抖动、撕裂、磁迹带和闪烁 —— 静态的 RGB 分裂和扫描线不靠动效也能撑住这个风格。
RGB-split ghosts and displaced slices attack legibility by design. Treat the colored ghosts as decoration, not signal: measure the base text color alone against the background (keep it at 4.5:1 or better), never split or tear body copy, and keep the effect on short display strings — a user must always be able to read the un-glitched layer.
RGB 重影和错位切片是故意在破坏可读性。把彩色重影当装饰而不是信息：只拿文字本色对背景测对比度（保持 4.5:1 以上），正文绝不做分裂或撕裂，效果只用在短的展示性文字上 —— 用户必须永远能读到没被故障化的那一层。
The aesthetic mimics malfunction, so users may read a real error state as decoration or a decorated state as a real failure. Keep interactive affordances visibly intact (buttons still look pressable, focus gets a clear offset outline in a reserved color), never style actual error messages, loading states, or form validation with glitch effects, and mark purely decorative corruption layers aria-hidden.
这套美学在模仿故障，所以用户可能把真的报错当成装饰，或把装饰当成真故障。交互可供性要保持明显（按钮看起来仍然可按，焦点用专属颜色的偏移 outline 表示），绝不要给真正的错误信息、加载状态或表单校验套用故障效果，纯装饰性的损坏层要标 aria-hidden。
Origin起源
The look descends from artists who broke machines on purpose: Nam June Paik distorted television images with magnets in the early 1960s, and Reed Ghazala's circuit bending (begun in the late 1960s, named in the 1990s) turned short-circuited electronics into instruments. As a digital practice it coalesced with 1990s net art — JODI's deliberately corrupted web pages from around 1995 — and the 'glitch' music of acts like Oval, before Rosa Menkman's 2011 book The Glitch Moment(um) gave the movement its theory. Databending and datamoshing reached mainstream eyes through music videos such as Kanye West's 'Welcome to Heartbreak' (2009), and pixel sorting became a Tumblr-era folk technique in the early 2010s, feeding the style back into UI and graphic design.
这套视觉来自故意弄坏机器的艺术家：1960 年代初 Nam June Paik 用磁铁扭曲电视图像，Reed Ghazala 的电路扰动（始于 1960 年代末，1990 年代命名）把短路的电子设备变成乐器。作为数字实践，它在 1990 年代的网络艺术中成形 —— JODI 从 1995 年前后开始的刻意损坏网页 —— 以及 Oval 等音乐人的「glitch」之声；2011 年 Rosa Menkman 的著作《The Glitch Moment(um)》为这场运动写下理论。数据折弯和 datamoshing 借由 Kanye West 的《Welcome to Heartbreak》（2009）等 MV 进入主流视野，像素排序则在 2010 年代初成为 Tumblr 时代的民间技法，把这股风格重新灌回 UI 和平面设计。