---
title: "Prism Drift 2.0 — Framer component · Best of Framer"
description: "$6.00 · Framer component · by Artem Kireev · Effects. Turn any image into living light"
canonical: "https://framer.elliotli.dev/component/prism-drift-2-0"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Prism Drift 2.0

# Prism Drift 2.0

Turn any image into living light

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

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

## Summary

Turn any image into living light

## Description

PrismDrift is a WebGL/GLSL shader component that turns any image into a reactive, chromatic-aberration surface. It runs an animated simplex-noise field under the hood to ripple the image's red, green, and blue channels apart along a chosen direction, creating the kind of "digital liquid" / prism-split look you'd normally need a custom shader build to get. Drop it over a hero image, a portfolio thumbnail, or a product shot and it sits still until triggered — then drifts, glitches subtly, and settles back.

## Customizations available in Framer

-   **Image** — the source image the effect distorts; leave empty to use the animated fallback gradient instead.
    
-   **Trigger** — Hover, Scroll into view, Always animate, or Click to toggle; picks what starts the distortion.
    
-   **Intensity** — overall strength of the noise-driven displacement (0–1).
    
-   **Speed** — playback speed of the underlying noise animation.
    
-   **Noise Scale** — spatial frequency of the ripple pattern, from broad waves to fine turbulence.
    
-   **RGB Split** — how far apart the red/green/blue channels shift, i.e. how strong the chromatic-aberration look is.
    
-   **Direction** — the angle (0–360°) the displacement and channel split travel along.
    
-   **Transition** — how quickly the effect eases in and out when the trigger fires.
    
-   **Fallback Color A / Fallback Color B** — the two colors blended into the animated gradient shown when no image is set.
    
-   **Tint Color** — an optional color mixed over the whole effect (any color, including a transparent one to disable it).
    
-   **Tint Opacity** — strength of the tint mix.
    
-   **Vignette** — toggles a soft dark edge falloff for extra depth.
    
-   **Border Radius** — rounds the component's corners.
    
-   **Respect Reduced Motion** — when on (default), visitors with reduced-motion enabled see a static version instead of the animated shader.
    

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

-   All · #3974

## Details

- **Author**: Artem Kireev
- **Price**: $6.00
- **Published**: 2026-09-04
- **Updated**: 2026-09-04
- **Added**: 2026-09-04
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo