### Install PowerGlitch with npm or yarn

Source: https://context7.com/7ph/powerglitch/llms.txt

Install the PowerGlitch library using your preferred package manager.

```bash
npm install powerglitch
# or
yarn add powerglitch
```

--------------------------------

### Install PowerGlitch with npm or yarn

Source: https://github.com/7ph/powerglitch/blob/master/README.md

Install PowerGlitch using your preferred package manager. This is the recommended way to add the library to your project.

```bash
npm i --save powerglitch
```

```bash
yarn add powerglitch
```

--------------------------------

### Retrieve Default PowerGlitch Options

Source: https://context7.com/7ph/powerglitch/llms.txt

Use `PowerGlitch.getDefaultOptions()` to get the default configuration object for a given play mode. This is useful for inspecting defaults or creating a base configuration to extend.

```javascript
import { PowerGlitch } from 'powerglitch';

// Get defaults for the 'always' play mode (default)
const defaults = PowerGlitch.getDefaultOptions();
console.log(defaults);
// {
//   playMode: 'always',
//   optimizeSeo: true,
//   createContainers: true,
//   hideOverflow: false,
//   timing: { duration: 2000, iterations: Infinity },
//   glitchTimeSpan: { start: 0.5, end: 0.7 },
//   shake: { velocity: 15, amplitudeX: 0.2, amplitudeY: 0.2 },
//   slice: { count: 6, velocity: 15, minHeight: 0.02, maxHeight: 0.15, hueRotate: true, cssFilters: '' },
//   pulse: false
// }

// Get defaults tuned for click mode (shorter, one-shot animation)
const clickDefaults = PowerGlitch.getDefaultOptions('click');
console.log(clickDefaults.timing);
// { duration: 250, iterations: 1 }
console.log(clickDefaults.slice.count);
// 15 — more slices for a punchier one-shot effect
```

--------------------------------

### Play Modes - `playMode` Option

Source: https://context7.com/7ph/powerglitch/llms.txt

Configures the interaction trigger for the glitch animation, determining when it starts and stops.

```APIDOC
## Play Modes — `playMode` option

### Description
Selects the interaction trigger that controls when the glitch animation plays. The default is `'always'`.

### Options
- `always`: The animation loops indefinitely.
- `hover`: The animation starts on mouseenter and stops on mouseleave.
- `click`: The animation plays one burst on each click.
- `manual`: The animation never starts automatically; it requires explicit calls to `startGlitch()`.

### Usage Examples

```javascript
import { PowerGlitch } from 'powerglitch';

// Always playing (default)
PowerGlitch.glitch('.logo', { playMode: 'always' });

// Hover
PowerGlitch.glitch('.logo', { playMode: 'hover' });

// Click
PowerGlitch.glitch('.logo', { playMode: 'click' });

// Manual control
const { startGlitch, stopGlitch } = PowerGlitch.glitch('.logo', {
    playMode: 'manual',
});

document.querySelector('#trigger').addEventListener('click', () => {
    stopGlitch();   // cancel any in-progress animation
    startGlitch();  // start a fresh burst
});
```
```

--------------------------------

### Generate Raw Animation Layer Definitions

Source: https://context7.com/7ph/powerglitch/llms.txt

Use `PowerGlitch.generateLayers()` to produce raw `LayerDefinition` objects for advanced integration where you manage DOM setup and animation playback. This function takes a resolved options object.

```javascript
import { PowerGlitch, mergeOptions } from 'powerglitch';

// Build a fully resolved options object and inspect the generated layers
const options = mergeOptions(
    PowerGlitch.getDefaultOptions('always'),
    {
        timing: { duration: 1000, iterations: Infinity },
        slice: {
            count: 4,
            hueRotate: false,
            cssFilters: 'blur(3px) saturate(2)',
        },
        pulse: { scale: 1.5 },
    }
);

const layers = PowerGlitch.generateLayers(options);
// layers[0]  — base shake layer (LayerDefinition)
// layers[1]  — pulse layer (if pulse != false)
// layers[2…] — slice layers (one per options.slice.count)

layers.forEach((layer, i) => {
    console.log(`Layer ${i}: ${layer.steps.length} keyframes`);
    // e.g. "Layer 0: 16 keyframes"
});

// Apply layers to your own pre-built DOM structure (createContainers: false)
// HTML: <div class="container"><div class="element">Content</div></div>
PowerGlitch.glitch('.container', {
    createContainers: false, // element is already wrapped correctly
    slice: { count: 4 },
});
```

--------------------------------

### Generate Raw Animation Layers

Source: https://context7.com/7ph/powerglitch/llms.txt

Generate raw animation layer definitions. This function produces `LayerDefinition` objects for advanced integration where manual DOM setup and animation playback are managed.

```APIDOC
## `PowerGlitch.generateLayers()` — Generate raw animation layer definitions

Produces the array of `LayerDefinition` objects (keyframe steps + Web Animation API timing) that describe a glitch animation for a given options object. Used for advanced integration when you want to manage DOM setup and animation playback yourself.

```js
import { PowerGlitch, mergeOptions } from 'powerglitch';

// Build a fully resolved options object and inspect the generated layers
const options = mergeOptions(
    PowerGlitch.getDefaultOptions('always'),
    {
        timing: { duration: 1000, iterations: Infinity },
        slice: {
            count: 4,
            hueRotate: false,
            cssFilters: 'blur(3px) saturate(2)',
        },
        pulse: { scale: 1.5 },
    }
);

const layers = PowerGlitch.generateLayers(options);
// layers[0]  — base shake layer (LayerDefinition)
// layers[1]  — pulse layer (if pulse != false)
// layers[2…] — slice layers (one per options.slice.count)

layers.forEach((layer, i) => {
    console.log(`Layer ${i}: ${layer.steps.length} keyframes`);
    // e.g. "Layer 0: 16 keyframes"
});

// Apply layers to your own pre-built DOM structure (createContainers: false)
// HTML: <div class="container"><div class="element">Content</div></div>
PowerGlitch.glitch('.container', {
    createContainers: false, // element is already wrapped correctly
    slice: { count: 4 },
});
```
```

--------------------------------

### Vue 3 integration using template refs and onMounted

Source: https://context7.com/7ph/powerglitch/llms.txt

Integrate PowerGlitch in Vue 3 using a template ref for the target element and onMounted to start the glitch effect. The glitch is applied when the component is mounted.

```vue
<!-- Vue 3 — using a template ref and onMounted -->
<script setup>
import { ref, onMounted } from 'vue';
import { PowerGlitch } from 'powerglitch';

const logoRef = ref(null);

onMounted(() => {
    PowerGlitch.glitch(logoRef.value, {
        playMode: 'always',
        timing: { duration: 2000, iterations: Infinity },
    });
});
</script>

<template>
    <img ref="logoRef" src="logo.png" alt="logo" />
</template>
```

--------------------------------

### PowerGlitch Options

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/types/PowerGlitchOptions.html

Configuration options for the PowerGlitch effect.

```APIDOC
## PowerGlitch Options

### Description

These options allow for fine-grained control over the PowerGlitch animation.

### Properties

*   **optimizeSeo**: `boolean` - Whether to avoid running the glitch effect on crawlers for SEO optimization.
*   **html**: `string` (Optional) - HTML content to glitch. If not provided, the elements themselves will be used. If provided, all elements should have an `innerHTML` property.
*   **createContainers**: `boolean` - Whether to create the necessary containers for the glitch animation (defaults to true). If false, it's assumed the containers are handled externally.
*   **playMode**: `PlayModes` - Defines the default behavior for playing the glitch animation.
*   **hideOverflow**: `boolean` - Whether to hide the glitch animation when it extends beyond the bounding rectangle.
*   **timing**: `object` - Specifies the timing of the animation.
    *   **duration**: `number` - Duration of the animation loop in milliseconds.
    *   **iterations**: `number` - Number of times the animation should repeat. Set to `Infinity` for infinite repetition.
    *   **easing**: `string` (Optional) - Ease animation for all layers. Defaults to a sequential easing.
*   **glitchTimeSpan**: `false | { start: number, end: number }` - Specifies if the animation should glitch uniformly or at a given time range. If `false`, it glitches uniformly. If an object with `start` and `end` times is provided, the glitch occurs within that range, peaking in the middle. `end` must be greater than `start`.
*   **shake**: `false | { velocity: number, amplitudeX: number, amplitudeY: number }` - Configures whether the base layer should shake and its parameters. Respects `glitchTimeSpan` if set.
*   **slice**: `object` - Configures the slice layers, which are the base animation for the glitch effect.
    *   **count**: `number` - Number of slice layers to generate.
    *   **velocity**: `number` - Number of steps for each layer per second of animation.
    *   **minHeight**: `number` - Minimum height percentage for a slice (0 to 1).
    *   **maxHeight**: `number` - Maximum height percentage for a slice (0 to 1).
    *   **hueRotate**: `boolean` - Whether hue should rotate for the slice.
    *   **cssFilters**: `string` - Custom CSS filters to apply to glitch layers. Disables `hueRotate` if set. Respects `glitchTimeSpan` if set.
*   **pulse**: `false | { scale: number }` - Adds a pulsing effect to the glitch animation.
```

--------------------------------

### Import PowerGlitch using ES5 require

Source: https://github.com/7ph/powerglitch/blob/master/README.md

Import the PowerGlitch class into your JavaScript file using ES5 require syntax.

```javascript
const PowerGlitch = require('powerglitch').PowerGlitch
```

--------------------------------

### Retrieve Default Options

Source: https://context7.com/7ph/powerglitch/llms.txt

Retrieve the default configuration options for PowerGlitch. This is useful for inspecting defaults or creating a base configuration to extend.

```APIDOC
## `PowerGlitch.getDefaultOptions()` — Retrieve default configuration

Returns the full `PowerGlitchOptions` object pre-tuned for the given play mode. Useful for inspecting defaults or building a base configuration to extend.

```js
import { PowerGlitch } from 'powerglitch';

// Get defaults for the 'always' play mode (default)
const defaults = PowerGlitch.getDefaultOptions();
console.log(defaults);
// {
//   playMode: 'always',
//   optimizeSeo: true,
//   createContainers: true,
//   hideOverflow: false,
//   timing: { duration: 2000, iterations: Infinity },
//   glitchTimeSpan: { start: 0.5, end: 0.7 },
//   shake: { velocity: 15, amplitudeX: 0.2, amplitudeY: 0.2 },
//   slice: { count: 6, velocity: 15, minHeight: 0.02, maxHeight: 0.15, hueRotate: true, cssFilters: '' },
//   pulse: false
// }

// Get defaults tuned for click mode (shorter, one-shot animation)
const clickDefaults = PowerGlitch.getDefaultOptions('click');
console.log(clickDefaults.timing);
// { duration: 250, iterations: 1 }
console.log(clickDefaults.slice.count);
// 15 — more slices for a punchier one-shot effect
```
```

--------------------------------

### Import PowerGlitch using ES6 import

Source: https://github.com/7ph/powerglitch/blob/master/README.md

Import the PowerGlitch class into your JavaScript module using ES6 import syntax.

```javascript
import { PowerGlitch } from 'powerglitch'
```

--------------------------------

### PowerGlitch.getDefaultOptions

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/variables/PowerGlitch.html

Retrieves the default options for creating glitch effects, optimized for visual appeal, with an option to specify the play mode.

```APIDOC
## PowerGlitch.getDefaultOptions

### Description
Get best-looking default options for most elements for a given playMode.

### Method
(playMode?: [PlayModes]): [PowerGlitchOptions]

### Parameters
#### Path Parameters
- **playMode** ([PlayModes]): Optional. The play mode for which to get default options. Defaults to 'always'.

### Returns
[PowerGlitchOptions]
```

--------------------------------

### Include PowerGlitch via CDN

Source: https://context7.com/7ph/powerglitch/llms.txt

Include the PowerGlitch library in your HTML using a script tag from a CDN to expose the global PowerGlitch variable.

```html
<!-- CDN bundle — exposes the global PowerGlitch variable -->
<script src="https://unpkg.com/powerglitch@latest/dist/powerglitch.min.js"></script>
```

--------------------------------

### React integration using refs and useEffect

Source: https://context7.com/7ph/powerglitch/llms.txt

Integrate PowerGlitch in React by using a ref to target the element and useEffect to initiate the glitch on component mount. Ensure cleanup by calling stopGlitch on unmount.

```jsx
import { useEffect, useRef } from 'react';
import { PowerGlitch } from 'powerglitch';

export function GlitchTitle() {
    const ref = useRef(null);

    useEffect(() => {
        const { stopGlitch } = PowerGlitch.glitch(ref.current, {
            playMode: 'hover',
        });
        return () => stopGlitch(); // clean up on unmount
    }, []);

    return <h1 ref={ref}>PowerGlitch</h1>;
```

--------------------------------

### Import PowerGlitch in ES Modules or CommonJS

Source: https://context7.com/7ph/powerglitch/llms.txt

Import the PowerGlitch class for use in ES module or CommonJS environments.

```javascript
// ES module import
import { PowerGlitch } from 'powerglitch';
```

```javascript
// CommonJS require
const { PowerGlitch } = require('powerglitch');
```

--------------------------------

### Include PowerGlitch using a script tag

Source: https://github.com/7ph/powerglitch/blob/master/README.md

Alternatively, include the PowerGlitch web bundle directly in your HTML using a script tag. This makes the PowerGlitch global variable available.

```html
<script src="https://unpkg.com/powerglitch@latest/dist/powerglitch.min.js"></script>
```

--------------------------------

### Configure Slice Layers with Custom CSS Filters

Source: https://context7.com/7ph/powerglitch/llms.txt

Use the `slice` option to create multiple thin layers that are randomly clipped and translated. Customize the number, velocity, height, and apply custom CSS filters to each active slice.

```javascript
import { PowerGlitch } from 'powerglitch';

// Many thin, fast slices with custom CSS filters
PowerGlitch.glitch('.glitch', {
    slice: {
        count: 15,                              // 15 simultaneous slice layers
        velocity: 20,                           // 20 keyframes per second
        minHeight: 0.01,                        // very thin slices (1 %)
        maxHeight: 0.10,                        // max 10 % of element height
        hueRotate: false,                       // disable default hue rotation
        cssFilters: 'blur(2px) brightness(1.4)',// custom filter per active slice
    },
});

// Disable hueRotate and apply no filter at all
PowerGlitch.glitch('.glitch', {
    slice: {
        count: 6,
        velocity: 15,
        minHeight: 0.02,
        maxHeight: 0.15,
        hueRotate: false,
        cssFilters: '',
    },
});
```

--------------------------------

### PowerGlitch.glitch() - Primary Entry Point

Source: https://context7.com/7ph/powerglitch/llms.txt

The main function to apply a glitch effect. It accepts various element selectors or references and returns control callbacks.

```APIDOC
## `PowerGlitch.glitch()` — Apply a glitch effect to one or more elements

### Description
The primary entry point of the library. Accepts a CSS selector string, an `HTMLElement`, an `Array<HTMLElement>`, or a `NodeListOf<HTMLElement>` and applies the glitch animation to every matched element. Options are deeply merged with the play-mode-appropriate defaults, so only the properties you want to override need to be specified. Returns a `GlitchResult` containing the generated wrapper `containers` and `startGlitch` / `stopGlitch` callbacks.

### Usage Examples

```javascript
import { PowerGlitch } from 'powerglitch';

// Minimal usage: glitch all elements matching the selector
PowerGlitch.glitch('.glitch');

// Glitch a direct element reference
const el = document.querySelector('#logo');
PowerGlitch.glitch(el);

// Glitch a NodeList (querySelectorAll)
const all = document.querySelectorAll('.glitch');
PowerGlitch.glitch(all);

// Glitch an array of elements
const elements = Array.from(document.querySelectorAll('.glitch'));
PowerGlitch.glitch(elements);

// Inject arbitrary HTML into an empty container
// <div class="glitch"></div>
PowerGlitch.glitch('.glitch', {
    html: '<p>Injected <b>content</b></p>',
});

// Full options example
const { containers, startGlitch, stopGlitch } = PowerGlitch.glitch('.glitch', {
    playMode: 'always',          // 'always' | 'hover' | 'click' | 'manual'
    optimizeSeo: true,           // skip animation for known web crawlers
    createContainers: true,      // let PowerGlitch manage the wrapper DOM
    hideOverflow: true,          // clip slices that go outside the element bounds
    timing: {
        duration: 2000,          // animation loop length in ms
        iterations: Infinity,    // repeat count (Infinity = loop forever)
        easing: 'ease-in-out',   // CSS easing for all layers
    },
    glitchTimeSpan: {
        start: 0.4,              // glitch starts at 40 % of each loop
        end: 0.7,                // glitch ends at 70 % of each loop
    },
    shake: {
        velocity: 15,            // steps per second for the shake layer
        amplitudeX: 0.2,         // max X displacement as fraction of width
        amplitudeY: 0.2,         // max Y displacement as fraction of height
    },
    slice: {
        count: 6,                // number of clipping/translating slice layers
        velocity: 15,            // steps per second for slice layers
        minHeight: 0.02,         // min slice height as fraction of element height
        maxHeight: 0.15,         // max slice height as fraction of element height
        hueRotate: true,         // apply random hue-rotation to each slice
        cssFilters: '',          // custom CSS filter string; overrides hueRotate
    },
    pulse: false,                // or { scale: 1.5 } to add a pulsing layer
});

// containers: HTMLDivElement[] — the top-level wrappers around each glitched element
console.log('Wrapper elements:', containers);

// Programmatically pause and resume the animation
stopGlitch();
setTimeout(startGlitch, 1000);
```
```

--------------------------------

### PowerGlitch Play Modes

Source: https://context7.com/7ph/powerglitch/llms.txt

Configure the `playMode` option to control when the glitch animation triggers. Options include 'always', 'hover', 'click', and 'manual' for programmatic control.

```javascript
import { PowerGlitch } from 'powerglitch';

// Always playing (default) — loops indefinitely
PowerGlitch.glitch('.logo', { playMode: 'always' });

// Hover — starts on mouseenter, stops on mouseleave
PowerGlitch.glitch('.logo', { playMode: 'hover' });

// Click — plays one burst on each click
PowerGlitch.glitch('.logo', { playMode: 'click' });

// Manual — animation never starts until startGlitch() is called explicitly
const { startGlitch, stopGlitch } = PowerGlitch.glitch('.logo', {
    playMode: 'manual',
});

document.querySelector('#trigger').addEventListener('click', () => {
    stopGlitch();   // cancel any in-progress animation
    startGlitch();  // start a fresh burst
});
```

--------------------------------

### PowerGlitch.generateLayers

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/variables/PowerGlitch.html

Generates the layers that deterministically define a glitch animation based on the provided options.

```APIDOC
## PowerGlitch.generateLayers

### Description
Generate the layers that deterministically define a glitch animation for the specified options.

### Method
(options: [PowerGlitchOptions]): [LayerDefinition][]

### Parameters
#### Path Parameters
- **options** ([PowerGlitchOptions]): Configuration options for generating glitch layers.

### Returns
[LayerDefinition][]
```

--------------------------------

### Shake Layer - `shake` Option

Source: https://context7.com/7ph/powerglitch/llms.txt

Controls the base layer that shakes the element, allowing for customization or complete disabling of the shaking effect.

```APIDOC
## Shake Layer — `shake` option

### Description
Controls the base layer that shakes the element as a whole. Set to `false` to disable shaking entirely.

### Parameters
- `velocity` (number): Steps per second for the shake layer. Higher values result in smoother but potentially heavier animations.
- `amplitudeX` (number): Maximum horizontal displacement as a fraction of the element's width.
- `amplitudeY` (number): Maximum vertical displacement as a fraction of the element's height.

### Usage Examples

```javascript
import { PowerGlitch } from 'powerglitch';

// Aggressive screen-shake effect
PowerGlitch.glitch('.glitch', {
    shake: {
        velocity: 25,       // more steps = smoother but heavier
        amplitudeX: 0.5,    // 50 % of element width
        amplitudeY: 0.05,   // subtle vertical movement
    },
});

// Disable shaking — slice layers only
PowerGlitch.glitch('.glitch', {
    shake: false,
    slice: { count: 8, hueRotate: true, cssFilters: '' },
});
```
```

--------------------------------

### Slice Layers Configuration

Source: https://context7.com/7ph/powerglitch/llms.txt

Configure the slice layer effect for creating glitch aesthetics. This involves defining the number, size, and velocity of horizontal strips that are randomly clipped and translated.

```APIDOC
## Slice Layers — `slice` option

Slice layers are the primary source of the glitch aesthetic. Each slice layer randomly clips a horizontal strip of the element and translates it sideways with an optional color filter.

```js
import { PowerGlitch } from 'powerglitch';

// Many thin, fast slices with custom CSS filters
PowerGlitch.glitch('.glitch', {
    slice: {
        count: 15,                              // 15 simultaneous slice layers
        velocity: 20,                           // 20 keyframes per second
        minHeight: 0.01,                        // very thin slices (1 %)
        maxHeight: 0.10,                        // max 10 % of element height
        hueRotate: false,                       // disable default hue rotation
        cssFilters: 'blur(2px) brightness(1.4)',// custom filter per active slice
    },
});

// Disable hueRotate and apply no filter at all
PowerGlitch.glitch('.glitch', {
    slice: {
        count: 6,
        velocity: 15,
        minHeight: 0.02,
        maxHeight: 0.15,
        hueRotate: false,
        cssFilters: '',
    },
});
```
```

--------------------------------

### Pulse Layer Configuration

Source: https://context7.com/7ph/powerglitch/llms.txt

Configure the pulse layer effect, which adds a transparent, scaling copy of the element that radiates outward. This can be disabled by setting it to `false`.

```APIDOC
## Pulse Layer — `pulse` option

Adds a transparent, scaling copy of the element that radiates outward during the glitch window. Set to `false` (default) to disable.

```js
import { PowerGlitch } from 'powerglitch';

// Subtle pulse that radiates to 1.3× the element size
PowerGlitch.glitch('.glitch', {
    pulse: { scale: 1.3 },
    glitchTimeSpan: { start: 0.5, end: 0.7 },
});

// Large dramatic pulse combined with slices and no shake
PowerGlitch.glitch('.glitch', {
    shake: false,
    pulse: { scale: 2.5 },
    slice: { count: 3 },
    glitchTimeSpan: { start: 0.0, end: 1.0 },
});
```
```

--------------------------------

### PowerGlitch Shake Layer Options

Source: https://context7.com/7ph/powerglitch/llms.txt

Customize the shake layer using the `shake` option. Set `shake: false` to disable shaking entirely. Adjust `velocity`, `amplitudeX`, and `amplitudeY` for desired effect.

```javascript
import { PowerGlitch } from 'powerglitch';

// Aggressive screen-shake effect
PowerGlitch.glitch('.glitch', {
    shake: {
        velocity: 25,       // more steps = smoother but heavier
        amplitudeX: 0.5,    // 50 % of element width
        amplitudeY: 0.05,   // subtle vertical movement
    },
});

// Disable shaking — slice layers only
PowerGlitch.glitch('.glitch', {
    shake: false,
    slice: { count: 8, hueRotate: true, cssFilters: '' },
});
```

--------------------------------

### Deep-merge option objects with mergeOptions()

Source: https://context7.com/7ph/powerglitch/llms.txt

Use mergeOptions() for immutable deep merging of plain objects. It's useful for combining user options with defaults or building reusable option presets. Arrays are not merged.

```javascript
import { mergeOptions, PowerGlitch } from 'powerglitch';

// Build a reusable preset
const subtlePreset = {
    timing: { duration: 3000 },
    shake: { amplitudeX: 0.1, amplitudeY: 0.1 },
    slice: { count: 3, hueRotate: false },
};

// Override just the timing for a specific element
const specificOptions = mergeOptions(
    PowerGlitch.getDefaultOptions('always'),
    subtlePreset,
    { timing: { duration: 500 } }   // wins — applied last
);

console.log(specificOptions.timing.duration); // 500
console.log(specificOptions.slice.count);     // 3 (from subtlePreset)
console.log(specificOptions.shake.velocity);  // 15 (from getDefaultOptions)

PowerGlitch.glitch('.logo', specificOptions);
```

--------------------------------

### Configure Pulse Layer for Radiating Effect

Source: https://context7.com/7ph/powerglitch/llms.txt

The `pulse` option adds a transparent, scaling copy of the element that radiates outward. Adjust the `scale` property to control the size of the pulse.

```javascript
import { PowerGlitch } from 'powerglitch';

// Subtle pulse that radiates to 1.3× the element size
PowerGlitch.glitch('.glitch', {
    pulse: { scale: 1.3 },
    glitchTimeSpan: { start: 0.5, end: 0.7 },
});

// Large dramatic pulse combined with slices and no shake
PowerGlitch.glitch('.glitch', {
    shake: false,
    pulse: { scale: 2.5 },
    slice: { count: 3 },
    glitchTimeSpan: { start: 0.0, end: 1.0 },
});
```

--------------------------------

### mergeOptions

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/functions/mergeOptions.html

Performs a deep merge of option objects and returns a new object. This function is immutable and will ignore arrays.

```APIDOC
## Function mergeOptions

### Description
Performs a deep merge of option objects and returns a new object. Does not modify objects (immutable) and will ignore arrays.

### Parameters
#### Rest Parameters
* **...objects** (readonly any[]) - Required - Objects to merge

### Returns
New object with merged key/values
```

--------------------------------

### PowerGlitchOptions Type Definition

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/types/PowerGlitchOptions.html

This type alias defines the structure for custom options used to configure glitch animations in PowerGlitch. It includes various properties to control aspects like SEO optimization, HTML content, animation play modes, overflow hiding, timing, glitch duration, shake effects, slice properties, and pulse scaling.

```APIDOC
Type alias PowerGlitchOptions
=============================

PowerGlitchOptions: {
    optimizeSeo: boolean;
    html?: string;
    createContainers: boolean;
    playMode: [PlayModes](PlayModes.html);
    hideOverflow: boolean;
    timing: {
        duration: number;
        iterations: number;
        easing?: string;
    };
    glitchTimeSpan: false | {
        start: number;
        end: number;
    };
    shake: false | {
        velocity: number;
        amplitudeX: number;
        amplitudeY: number;
    };
    slice: {
        count: number;
        velocity: number;
        minHeight: number;
        maxHeight: number;
        hueRotate: boolean;
        cssFilters: string;
    };
    pulse: false | {
        scale: number;
    };
}

Custom options for the glitch animations.
```

--------------------------------

### Manual DOM layout control with createContainers: false

Source: https://context7.com/7ph/powerglitch/llms.txt

Set createContainers: false to disable default wrapper divs and use a pre-built structure. The target element becomes the layer container, and its first child is the element to glitch. This is useful in framework components where DOM structure is managed externally.

```html
<!-- Pre-built structure required when createContainers: false -->
<div class="layer-container">
    <div class="glitch-target">Glitch me</div>
</div>
```

```javascript
import { PowerGlitch } from 'powerglitch';

PowerGlitch.glitch('.layer-container', {
    createContainers: false,
    slice: { count: 3 },
    playMode: 'always',
});
// DOM result: .layer-container > .glitch-target × 4  (original + 3 clones)
// No extra wrapper divs are inserted.
```

--------------------------------

### PowerGlitch.glitch

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/variables/PowerGlitch.html

Initiates a glitch effect on a specified HTML element or a list of elements. It allows for customization through user-provided options.

```APIDOC
## PowerGlitch.glitch

### Description
Make a single element glitch.

### Method
(elOrSelector?: [GlitchableElement], userOptions?: [RecursivePartial]<[PowerGlitchOptions]>): [GlitchResult]

### Parameters
#### Path Parameters
- **elOrSelector** ([GlitchableElement]): Optional. What to glitch. Can be a query selector, a list of HTMLElement, an HTMLElement or a NodeList. Defaults to '.powerglitch'.
- **userOptions** ([RecursivePartial]<[PowerGlitchOptions]>): Optional. Optional glitch customization options.

### Returns
[GlitchResult]
```

--------------------------------

### Glitch Time Span Configuration

Source: https://context7.com/7ph/powerglitch/llms.txt

Restrict the glitch effect to a specific time window within each animation loop. This option allows for more controlled glitch intensity.

```APIDOC
## Glitch Time Span — `glitchTimeSpan` option

Restricts the glitch effect to a sub-window of each animation loop, expressed as fractions between 0 and 1. The peak glitch intensity occurs at the midpoint. Set to `false` to glitch uniformly throughout the entire loop.

```js
import { PowerGlitch } from 'powerglitch';

// Glitch only during the middle third of each 2-second loop
PowerGlitch.glitch('.glitch', {
    timing: { duration: 2000, iterations: Infinity },
    glitchTimeSpan: { start: 0.33, end: 0.66 },
});

// Always glitch — no calm period
PowerGlitch.glitch('.glitch', {
    glitchTimeSpan: false,
});
```
```

--------------------------------

### Control Glitch Animation Timing

Source: https://context7.com/7ph/powerglitch/llms.txt

Use `glitchTimeSpan` to restrict the glitch effect to a specific window within each animation loop. Set to `false` to glitch uniformly throughout the entire loop.

```javascript
import { PowerGlitch } from 'powerglitch';

// Glitch only during the middle third of each 2-second loop
PowerGlitch.glitch('.glitch', {
    timing: { duration: 2000, iterations: Infinity },
    glitchTimeSpan: { start: 0.33, end: 0.66 },
});

// Always glitch — no calm period
PowerGlitch.glitch('.glitch', {
    glitchTimeSpan: false,
});
```

--------------------------------

### Apply Glitch Effect with PowerGlitch.glitch()

Source: https://context7.com/7ph/powerglitch/llms.txt

Use `PowerGlitch.glitch()` to apply effects to elements selected by CSS selector, direct element reference, NodeList, or an array of elements. It returns a `GlitchResult` object with control callbacks.

```html
<!-- HTML: mark elements you want to glitch -->
<img class="glitch" src="logo.png" alt="logo" />
<button class="glitch">Click me</button>
<div class="glitch"><p>Hello <b>World</b></p></div>
```

```javascript
import { PowerGlitch } from 'powerglitch';

// ── Minimal usage: glitch all elements matching the selector ──────────────
PowerGlitch.glitch('.glitch');

// ── Glitch a direct element reference ─────────────────────────────────────
const el = document.querySelector('#logo');
PowerGlitch.glitch(el);

// ── Glitch a NodeList (querySelectorAll) ───────────────────────────────────
const all = document.querySelectorAll('.glitch');
PowerGlitch.glitch(all);

// ── Glitch an array of elements ────────────────────────────────────────────
const elements = Array.from(document.querySelectorAll('.glitch'));
PowerGlitch.glitch(elements);
```

```javascript
// ── Inject arbitrary HTML into an empty container 
// <div class="glitch"></div>
PowerGlitch.glitch('.glitch', {
    html: '<p>Injected <b>content</b></p>',
});
```

```javascript
// ── Full options example ───────────────────────────────────
const { containers, startGlitch, stopGlitch } = PowerGlitch.glitch('.glitch', {
    playMode: 'always',          // 'always' | 'hover' | 'click' | 'manual'
    optimizeSeo: true,           // skip animation for known web crawlers
    createContainers: true,      // let PowerGlitch manage the wrapper DOM
    hideOverflow: true,          // clip slices that go outside the element bounds
    timing: {
        duration: 2000,          // animation loop length in ms
        iterations: Infinity,    // repeat count (Infinity = loop forever)
        easing: 'ease-in-out',   // CSS easing for all layers
    },
    glitchTimeSpan: {
        start: 0.4,              // glitch starts at 40 % of each loop
        end: 0.7,                // glitch ends at 70 % of each loop
    },
    shake: {
        velocity: 15,            // steps per second for the shake layer
        amplitudeX: 0.2,         // max X displacement as fraction of width
        amplitudeY: 0.2,         // max Y displacement as fraction of height
    },
    slice: {
        count: 6,                // number of clipping/translating slice layers
        velocity: 15,            // steps per second for slice layers
        minHeight: 0.02,         // min slice height as fraction of element height
        maxHeight: 0.15,         // max slice height as fraction of element height
        hueRotate: true,         // apply random hue-rotation to each slice
        cssFilters: '',          // custom CSS filter string; overrides hueRotate
    },
    pulse: false,                // or { scale: 1.5 } to add a pulsing layer
});

// containers: HTMLDivElement[] — the top-level wrappers around each glitched element
console.log('Wrapper elements:', containers);

// Programmatically pause and resume the animation
stopGlitch();
setTimeout(startGlitch, 1000);
```

--------------------------------

### PlayModes Type Definition

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/types/PlayModes.html

This type alias defines the possible string values that can be used to configure the play mode of the glitch effect.

```APIDOC
Type alias PlayModes

PlayModes: "always" | "hover" | "click" | "manual"

Available play modes

Remarks:
* always: Always glitch (default)
* hover: Glitch on hover
* click: Glitch will start on each click
* manual: Glitch controlled with returned callbacks

Defined in [index.ts:9](https://github.com/7PH/powerglitch/blob/7ab2b8c/src/index.ts#L9)
```

--------------------------------

### Apply glitch effect to elements

Source: https://github.com/7ph/powerglitch/blob/master/README.md

Use the PowerGlitch.glitch() method, passing a CSS selector, to apply the glitch effect to the selected elements. This is the core function to activate the glitch.

```javascript
PowerGlitch.glitch('.glitch')
```

--------------------------------

### Select elements to glitch

Source: https://github.com/7ph/powerglitch/blob/master/README.md

Add the 'glitch' class to any HTML element you want to apply the glitch effect to. This includes images, buttons, or any other DOM element.

```html
<!-- Image -->
<img src='https://.../image.png' class='glitch' />
```

```html
<!-- Button -->
<button class='glitch'>
    click me 🤷‍♂️
</button>
```

```html
<!-- Any DOM element -->
<div class='glitch'>
    <p>Hello <b>World</b></p>
</div>
```

--------------------------------

### GlitchPartialOptions Type Definition

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/types/GlitchPartialOptions.html

This type alias defines GlitchPartialOptions as a RecursivePartial of PowerGlitchOptions. It is used to provide partial configurations for the glitch method.

```APIDOC
Type alias GlitchPartialOptions
===============================

GlitchPartialOptions: [RecursivePartial](RecursivePartial.html)<[PowerGlitchOptions](PowerGlitchOptions.html)>

Options given to the glitch method

*   Defined in [index.ts:531](https://github.com/7PH/powerglitch/blob/7ab2b8c/src/index.ts#L531)
```

--------------------------------

### RecursivePartial<T>

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/types/RecursivePartial.html

A utility type that makes all properties of a type T, and all nested properties within T, optional.

```APIDOC
## Type alias RecursivePartial<T>

### Description
RecursivePartial<T>: { [ P in keyof T]?: RecursivePartial<T[P]> }

Utility class to have optional properties on a type recursively.

### Type Parameters

* #### T
  
* Defined in [index.ts:524](https://github.com/7PH/powerglitch/blob/7ab2b8c/src/index.ts#L524)
```

--------------------------------

### GlitchResult Type Declaration

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/types/GlitchResult.html

This describes the structure of the GlitchResult object returned by PowerGlitch operations. It includes the containers affected and methods to control the glitch animation.

```APIDOC
## GlitchResult

### Description
The result for glitching one or multiple elements.

### Type Declaration

*   **containers**: HTMLDivElement[] - Lists of containers for each glitched element.
*   **startGlitch**: () => void - Callback to force-start the glitch animation regardless of the selected play mode.
*   **stopGlitch**: () => void - Callback to force-stop the glitch animation, regardless of the selected play mode.
```

--------------------------------

### LayerDefinition Type Alias

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/types/LayerDefinition.html

Defines the structure for a single layer in a glitch animation. It includes an array of steps, where each step is a map of CSS property names to their values, and an EffectTiming object for animation timing.

```APIDOC
Type alias LayerDefinition
==========================

LayerDefinition: {  
    steps: {  
        [cssPropertyName: string]: string;
    }[];  
    timing: EffectTiming;
}

Definition for one layer, part of the glitch animation.

#### Type declaration

*   ##### steps: {  
    [cssPropertyName: string]: string;
    }[]
    
    Each animation step is a hashmap linking CSS property names to their value for this step.
    
*   ##### timing: EffectTiming
    
    ### See
    
    [https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#parameters](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#parameters)
```

--------------------------------

### GlitchableElement Type Definition

Source: https://github.com/7ph/powerglitch/blob/master/docs/api-docs/types/GlitchableElement.html

This type alias specifies what elements can be glitched. It accepts a query selector string, a single HTMLElement, a list of HTMLElements, or a NodeList.

```APIDOC
Type alias GlitchableElement
============================

GlitchableElement: string | HTMLElement | NodeListOf<HTMLElement> | HTMLElement[]

Specifies what to glitch. Query selector, html element, list of html elements or NodeList.

*   Defined in [index.ts:536](https://github.com/7PH/powerglitch/blob/7ab2b8c/src/index.ts#L536)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.