---
title: "Prism Drift — Free Framer component · Best of Framer"
description: "Free Framer component · by Artem Kireev · Backgrounds. RGB channels, torn apart on purpos"
canonical: "https://framer.elliotli.dev/component/prism-drift"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Prism Drift

# Prism Drift

RGB channels, torn apart on purpos

[View on Framer](https://framer.com/marketplace/components/prism-drift/?via=elliot-li)

![Prism Drift preview image 1](https://framer.elliotli.dev/og/component/prism-drift/6b9af4e6e68e232e/1600x1243.jpg)

## Summary

RGB channels, torn apart on purpos

## Description

## 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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #3495

## Details

- **Author**: Artem Kireev
- **Published**: 2026-08-12
- **Updated**: 2026-08-12
- **Added**: 2026-08-12
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background