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:

Option	Type	Default	Description
playMode	string	'always'	Controls activation timing: 'always' for continuous animation, 'hover' for mouse events, 'click' for click triggers, 'manual' for programmatic control.
intensity	number	0.7	Glitch strength from 0 to 1. Higher values increase distortion magnitude.
fps	number	15	Rendering frame rate between 5 and 60. Higher values produce smoother animations at increased CPU cost.
layers	number	5	Number of horizontal slices from 1 to 10. More layers create denser glitch patterns.
smoothTransitions	boolean	false	Enables interpolation between glitch states for fluid transitions instead of discrete jumps.
glitchFrequency	number	10	New glitch states per second when smooth transitions are enabled, ranging from 1 to 30.
pulse	boolean	false	Adds subtle scaling animation that creates breathing effect.
glitchTimeSpan	object|false	false	Restricts glitch to specific animation cycle fraction: {start: 0.25, end: 0.75} where values span 0 to 1.
slice.minHeight	number	0.02	Minimum slice height as fraction of element height from 0 to 1.
slice.maxHeight	number	0.2	Maximum slice height as fraction of element height from 0 to 1.
slice.hueRotate	boolean	true	Applies color channel rotation to slices. Set to false for monochrome effects.
shake	boolean	true	Enables random position displacement of the element.
shakeIntensity	number	0.15	Position shift magnitude from 0 to 1.
filters	boolean	true	Applies color separation and distortion filters. Disable for geometry-only effects.
trigger	string|Element	null	Specifies different element for hover or click detection. Accepts CSS selector or DOM element.
hideOverflow	boolean	false	Applies overflow clipping to prevent glitch from extending beyond element boundaries.
createContainers	boolean	true	Automatically wraps elements in required container structure. Set to false for manual DOM preparation.
optimizeSeo	boolean	true	Detects search engine crawlers and disables effects to preserve indexing.

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.

The post 3KB JS Library for Randomized Glitch Animations – Glitchium appeared first on CSS Script.