Glitch Blocks
Coloured rectangles that pop up at random inside a block and die out in jolts, like a corrupted digital signal; crisp text on top.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Distortion has 31 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .gbk-box block (250×150 px, #1a1a2e background) holds your .gbk-text (“ERROR” by default). Every 200 ms the script adds a .gbk-block rectangle, 10 to 90 px wide and 5 to 35 px tall, dropped at a random spot, with a hue between 220° and 280° (blue to violet), 70% saturation and 60% lightness.
Each rectangle gets a random animation delay between 0 and 2 s. During that delay it is shown solid; when the gbk-flash animation starts it vanishes, then lights up again briefly (about 0.16 s) at the end of its 2 s cycle if it still exists. It is removed from the DOM after 3 s. The result: three to five rectangles visible at any moment, appearing and dying out with no steady rhythm.
The text sits above the rectangles (z-index: 1). Each block has its own timer, read from its data-hue, data-spread and data-rate attributes: two copies on a page run independently, each with its own colours. The timer stops when the block leaves the screen or the tab is hidden, and resumes on return (measured: 0 rectangles added in 2 s off screen).
Measured in Chromium 151, Firefox 153 and WebKit 26.5: no errors, nothing on window, the second copy fills up like the first. A block hidden with display: none creates nothing until it is shown.
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, no rectangle appears or flashes. The script lays down a fixed set of rectangles once (6 in the default block, more in a large one) at 70% opacity: the “corrupted signal” look stays, with no movement at all. A preference change during the visit is followed. - Photosensitivity: rectangles switch on abruptly. Frame-by-frame measurement: each rectangle switches on and off once every 2 s: at most 1 flash per second on any one area, below the 3 flashes per second threshold (WCAG 2.3.1), even with
data-rate="40"on an 800 × 400 px block. With a light block background, run the check again. - Screen readers: the rectangles are empty
divs, nothing is read. Only the.gbk-texttext is. For an error message, putrole="alert"on the container you reveal. - Legibility: the rectangles are light; white text over one of them loses contrast for an instant. A drop shadow on
.gbk-text(text-shadow: 0 1px 3px #000) solves it. - Keyboard and touch: nothing to activate, the effect is automatic. The rectangles have
pointer-events: noneand do not block links placed in the text.
Browser compatibility
CSS (variables, @keyframes) and 2 KB of JavaScript. Minimum versions from MDN data: NodeList.forEach (Chrome 51, Firefox 50, Safari 10). The off-screen pause uses IntersectionObserver (Safari 12.1+); on older browsers the effect runs without pausing. Measured in Chromium 151, Firefox 153 and WebKit 26.5.
Without JavaScript, the block and its text show up with no rectangles. Without CSS variables, the block loses its size.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0258-root">
<div class="gbk-box" data-hue="220" data-spread="60" data-rate="200">
<span class="gbk-text">…</span>
</div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
--gbk-w / --gbk-h |
250px / 150px |
Block size. 100% fills the container (then give the root a height with --gbk-root-h). |
--gbk-bg |
#1a1a2e |
Block background: colour, gradient or image. |
--gbk-root-bg / --gbk-root-h |
#0a0a0f / 300px |
Background and minimum height of the root. transparent and 0 make the root hug the block. |
data-hue (on .gbk-box) |
220 |
Starting hue of the rectangles, in degrees (0 red, 120 green, 200 cyan, 220 blue). |
data-spread |
60 |
Random hue range added above data-hue. 0 for a single colour. |
data-rate |
200 (ms, minimum 40) |
Interval between two new rectangles. Lower means more rectangles on screen: 60–80 for a large surface. |
Rectangle size (JS — 10 + Math.random() * 80, 5 + Math.random() * 30) |
10–90 × 5–35 px | Widen these bounds for a full-screen block, narrow them for a thumbnail. |
Text (HTML — .gbk-text) |
“ERROR” | Replace it with your message; it may hold several lines and links. |
FAQ
hidden), and reveal it when the error occurs. While hidden it creates no rectangles; it starts as soon as it becomes visible. The script only picks up blocks present at load time: a block inserted later is not animated..gbk-text has z-index: 1 and the rectangles have none. If your text lives in another element, give it position: relative; z-index: 1.data-rate="60", about fifty. Off screen or with the tab hidden, none.
