---
title: "Shader Shift — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Artem Kireev · Effects. Five shader looks, one image"
canonical: "https://framer.elliotli.dev/component/shader-shift"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Shader Shift

# Shader Shift

Five shader looks, one image

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

![Shader Shift preview image 1](https://framer.elliotli.dev/og/component/shader-shift/13996036990f0e45/1600x1243.jpg)

## Summary

Five shader looks, one image

## Description

## Description

ShaderShift is a WebGL shader wrapper for any image: instead of shipping one locked-in visual, it bundles five real fragment-shader effects — Bayer-ordered Dithering, luminance-driven Halftone, Pixelation, animated film Grain, and a Liquid Warp distortion — behind a single "Effect" dropdown, so one component can cover a whole site's worth of image treatments.

It also ships three trigger modes: Ambient (loops continuously), Hover (ramps the effect in on pointer-over and eases it back out), and Scroll Reveal (starts fully stylized and dissolves into the plain photo once the frame scrolls into view). That combination is what makes it a building block rather than a one-off demo — a designer can drop it into a hero image, a portfolio grid, or an editorial photo essay and get a different result each time just by changing dropdowns and colors, with no code edits.

## Customizations available in Framer

-   **Image** — the source photo (any Framer image, including CMS-bound fields).
    
-   **Effect** — Dithering, Halftone, Pixelation, Grain, or Liquid Warp.
    
-   **Trigger** — Ambient (continuous loop), On Hover, or On Scroll Into View.
    
-   **Intensity** — how strongly the effect is mixed over the source image (0–1).
    
-   **Pattern Scale** — dot/pixel/grid density for Dithering, Halftone, and Pixelation; wave frequency for Liquid Warp.
    
-   **Speed** — animation speed for Grain and Liquid Warp; 0 freezes on a still frame. Automatically disabled for visitors with reduced-motion enabled.
    
-   **Grayscale Base** — converts the source image to luminance before applying the duotone colors (Dithering/Halftone).
    
-   **Color A / Color B** — the duotone palette used by Dithering and Halftone.
    
-   **Reveal Duration** — seconds the Scroll Reveal fade takes (only shown when Trigger is set to On Scroll Into View).
    

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

-   All · #3188

## Details

- **Author**: Artem Kireev
- **Price**: $9.00
- **Published**: 2026-08-17
- **Updated**: 2026-08-17
- **Added**: 2026-08-17
- **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