`), the library will apply the effects to their rendered appearance, including text and background colours. | | How does real-time video support work? | For `` elements, `glitchGL` uses the video as a real-time texture. The effects are applied to the currently playing frame, creating a dynamic, animated result that perfectly syncs with the video content. | | Are there any CORS issues with images or 3D models? | Images, 3D models, and custom SVG interaction shapes from external domains may fail to load due to Cross-Origin Resource Sharing (CORS) policies. For best results, serve all assets from the same domain or ensure the remote server provides the correct `Access-Control-Allow-Origin` headers. | --- ## Browser Support The `glitchGL` library is compatible with all modern WebGL-enabled browsers on desktop, tablet, and mobile devices. | Browser | Supported | | :------------- | :-------: | | Google Chrome | ✅ | | Safari | ✅ | | Firefox | ✅ | | Microsoft Edge | ✅ | | Mobile Safari | ✅ | | Mobile Chrome | ✅ | > **Note**: Requires WebGL support. The library will fail to initialise if WebGL or Three.js are not available. --- ## API Methods After initialisation, you can control the effect instance using a rich set of API methods. You can also animate the properties to create interaction animations or infinite looping variance of any of the updatable properties. ### Core Methods ```javascript const glitchEffect = glitchGL({ target: ".glitchGL" }); // Update any combination of options on the fly glitchEffect.updateOptions({ intensity: 1.5, effects: { crt: { curvature: 12.0 }, glitch: { enabled: true, rgbShift: 0.02 }, }, }); // Clean up the effect and restore the original element glitchEffect.cleanup(); ``` --- ## Licence `glitchGL` is released under a dual-licence model to support both personal and commercial use. For full details, please see the [LICENCE](https://github.com/naughtyduk/glitchGL/blob/main/LICENCE.md) file. ### Personal Use For personal websites, portfolios, academic projects, and other non-commercial applications, `glitchGL` is free to use. In short, if you are not making money from your project, you can use `glitchGL` for free. ### Commercial Use A paid commercial licence is required for any project that is commercial in nature. This includes websites for businesses, projects that generate revenue, or use in any proprietary software. ### Licensing Options **Single Licence:** `For one commercial website or project.` **Extended Licence:** `For up to five commercial projects.`
DEMO (GLITCH) | DEMO (MULTIPLE) | DEMO (CRT) | DEMO (PIXELATION) | DEMO (3D MODEL)
## Overview
`glitchGL` is a lightweight yet powerful WebGL library that applies combinable visual effects to any DOM element. It can transform images, SVGs, text, videos, and even 3D models into a dynamic visual experience. The library features three core, fully customisable effect modules: **Pixelation**, **CRT**, and **Glitch**. These effects can be enabled, disabled, and tweaked in real-time, and they seamlessly work together. With a robust mouse interaction system, you can create localised, velocity-based effects that respond naturally to user input.
### Key Features
| Feature | Supported | Feature | Supported |
| :------------------------- | :-------: | :------------------------------ | :-------: |
| Combinable Effects | ✅ | Mouse & Touch Interaction | ✅ |
| Pixelation Engine | ✅ | Velocity-Based Effects | ✅ |
| CRT Emulator | ✅ | Interactive Effect Parameters | ✅ |
| Glitch System | ✅ | Customisable Interaction Shapes | ✅ |
| Images, SVGs, Text, Videos | ✅ | Custom SVG Interaction Masks | ✅ |
| 3D Models (GLTF/GLB) | ✅ | Adjustable Interaction Radius | ✅ |
| High-Performance WebGL | ✅ | Tilt on Hover (3D Models) | ✅ |
| Dynamic Option Updates | ✅ | Multiple Instances | ✅ |
| No Re-initialisation | ✅ | Auto-Resize Handling | ✅ |
| Smart DOM Positioning | ✅ | Comprehensive API | ✅ |
| `on.init` Callback | ✅ | | |
---
## Install from npm
```sh
npm install glitch-gl
```
```js
import glitchGL from "glitch-gl";
const glitchEffect = glitchGL({
target: ".glitchGL",
});
```
> `three` is installed automatically as a package dependency. `GLTFLoader` is only required when using 3D models.
---
## Prerequisites
For CDN/browser-script usage, add the following scripts before you initialise `glitchGL()` (normally at the end of the ``):
```html
```
> `Three.js` provides the WebGL rendering engine that powers `glitchGL`. The library will not work without Three.js. `GLTFLoader` is only required if you plan to use 3D models.
---
## Quick Start
Set up your HTML structure first. Add the `glitchGL` class to any element you want to apply effects to.
```html
