Polish & Effects · Small finishing touches
Glitch故障抖动
- bad signal
- displaced
- split apart
The element twitches like a screen with a bad signal: it jumps a few pixels, the colour splits into offset red and cyan copies, and every so often a horizontal band is cut and displaced. All three have to happen together to read as a fault — position alone is a shake, colour alone is ghosting, bands alone are a tear.
When to use it
Use it for tech, cyber and glitch-art moments: headlines, loaders, error pages. Never in body copy or forms — the motion says “this is broken”, and users will believe it and stop trusting the control.
Parameters
transform: translate3d ±3px · clip-path: inset 3 slices · text-shadow: -2px→2px rgb split · 460ms steps(9, end)
Recipe
Glitch → transform: translate3d ±3px · clip-path: inset 3 slices · text-shadow: -2px→2px rgb split · 460ms steps(9, end)
One sentence for your AI
Build a glitch: stack three layers — the base in its own colour, and two copies with text-shadow offsetting red and cyan by ±2px. Jump the whole thing by a random translate3d of ±3px each frame, and cut the frame into 3 horizontal slices with clip-path, each displaced randomly. Run 460ms on steps(9, end) — no interpolation, a fault jumps.