Prism Drift

RGB channels, torn apart on purpos

Customizations available Image — optional source photo/graphic. Leave empty to use the built-in animated gradient instead. Overlay — optional layer (headline, logo, button) rendered centered on top of the canvas. Trigger — Hover, Always on, Scroll into view, or Click to toggle; swaps the interaction pattern entirely. Split Amount — max RGB channel offset in pixels at full effect. Angle — direction the channels split apart, in degrees. Noise / Grain — amount of organic jitter in the split plus a fine film-grain overlay. Speed — playback speed of the shader's internal animation. Ease — how quickly the effect ramps in and out when the trigger changes. Grayscale Base — desaturates the source before splitting, for a more graphic look. Idle Drift + Idle Amount — subtle always-on wobble so the effect never looks frozen at rest, independent of the chosen trigger. Gradient 1 / 2 / 3 — the three colors used for the procedural background whenever no Image is set. Radius — corner rounding, to match the surrounding layout. Motion — Auto (respects the visitor's OS reduced-motion setting), Always Animate, or Always Static, so accessibility is a control rather than an afterthought. Use cases A chromatic-glitch hover state on project thumbnails in a design portfolio. An animated gradient hero background behind a headline on a product landing page, intensifying as the visitor scrolls it into view. A click-to-toggle "glitch reveal" on a case-study cover image, or a subtle always-on shimmer on a brand mark for an editorial, motion-forward feel.

RGB channels, torn apart on purpos