RGB Prism Image

RGB Prism Image is an npm package that splits any image into its red, green, and blue channels. When all channels are in the same position, they show the original image, but each channel can also move independently to create dynamic visual effects.

The package supports several effects:

• Follow-mouse – the channels move in response to the cursor
• Breathing – channels pulse gently to create a soft animation
• Fixed offsets – channels can be positioned anywhere, like “top-left” or “bottom-right”
• Glitch on create – a short randomized jitter when the image loads

RGB Prism Image is compatible with React and Next.js. The React version uses standard <img> tags, while the Next.js version uses <Image /> for optimized loading. The core logic is shared between both versions, making it reusable and framework-agnostic.

All effects are customizable, including the intensity of channel movement, follow mouse, animation speed, glitch, breathing,and fixed positions for individual channels. This allows developers to integrate interactive image effects while maintaining control over the visual result.

The package is published on npm as rgb-split-image:

npm install rgb-split-image