3KB JS Library for Randomized Glitch Animations – Glitchium

Glitchium is a lightweight (~3kb) JavaScript library that creates performant, randomized glitch effects on web elements.

It uses CSS transforms and hardware acceleration to deliver high-performance visual distortions and maintain 60 FPS animations.

Features:

• Randomized Output: Each animation cycle generates unique glitch patterns through algorithmic randomization.
• Smooth Interpolation: Optional transition smoothing between glitch states creates cinematic effects through frame interpolation.
• Multiple Trigger Modes: Supports hover-activated, click-triggered, always-on, and programmatic control modes.
• Configurable Parameters: Offers granular control over intensity, frame rate, layer count, slice dimensions, color manipulation, and timing windows.
• SEO-Friendly Rendering: Includes crawler detection to prevent effects from interfering with search engine indexing.

See It In Action:

How To Use It:

1. Download the Glitchium library and load the glitchium.min.js script in the document.

<!-- Local -->
<script src="/dist/glitchium.min.js"></script>
<!-- CDN -->
<script src="https://cdn.jsdelivr.net/npm/glitchium/dist/glitchium.min.js"></script>

2. Initialize the library and apply the glitch effect to target elements:

const glitch = new Glitchium();
glitch.glitch('.myElement');

3. Config the glitch effect with the following options:

glitch.glitch('.myElement',{
  playMode: 'always',
  trigger: null,
  intensity: 0.7,
  fps: 15,
  layers: 5,
  slice: {
    minHeight: 0.02,
    maxHeight: 0.2,
    hueRotate: true
  },
  shake: true,
  shakeIntensity: 0.15,
  pulse: false,
  glitchTimeSpan: false,
  filters: true,
  hideOverflow: false,
  createContainers: true,
  smoothTransitions: false,
  glitchFrequency: 10,
  optimizeSeo: true,
});

4. Available API methods to control the glitch effect programmatically:

• glitch(selector, options): Applies a glitch effect to the target element(s). Returns a control object with start(), stop(), and destroy() methods for that specific instance.
• stopAll(): Pauses all active glitch effects created by the instance.
• destroyAll(): Completely removes all effects and cleans up associated resources.

Alternatives:

• PowerGlitch: The original inspiration for Glitchium, offering similar slice-based effects with a focus on preset configurations rather than granular parameter control.
• GlitchEffect.js: Provides canvas-based rendering for glitch effects with more complex visual algorithms, but higher performance overhead and larger file size.
• Glitch Libraries: Discover more JavaScript libraries for glitch effects.

FAQs:

Q: Can I synchronize glitch effects with other JavaScript animations or events in my application?
A: Use manual playMode and store the returned control object. Call start() and stop() methods in response to your application events. For example, trigger the effect when an API request begins and stop it when the response arrives. The control object persists until you call destroy(), so you can repeatedly start and stop the same effect instance.

Q: My smooth transitions look choppy even with high fps settings. What causes this?
A: Check your glitchFrequency value. If it matches or exceeds your fps setting, the interpolation system generates new keyframes faster than it can complete transitions. Set glitchFrequency to roughly one-third of your fps value. For 60fps rendering, use glitchFrequency values between 8 and 15 for optimal smoothness.

Q: The library creates multiple container divs around my elements. Can I control this behavior?
A: Set createContainers: false if you prefer manual DOM structure. The library expects your element to be inside a grid container with appropriate styles. Your markup should look like this: a wrapper div with display: grid, a layers container inside it with grid-template-columns: 1fr and grid-template-rows: 1fr, and your target element with grid-area: 1/1/-1/-1. This approach gives you complete control over the container styling.

Q: Does the library impact my page’s Core Web Vitals scores?
A: The effect runs after initial page load and uses GPU-accelerated transforms, so it typically has minimal impact on Largest Contentful Paint or Cumulative Layout Shift. The optimizeSeo option automatically disables effects for search engine crawlers. For optimal First Input Delay, avoid applying effects to interactive elements in always-on mode. Use hover or click triggers instead to keep the main thread responsive during user interactions.