PRISM — Pointer Reactive Image

PRISM — Pointer Reactive Image Shader Module

Overview

PRISM is a WebGL-powered Framer component that applies real-time cursor-reactive shader effects to any image. It ships with four distinct effects: Ripple, Liquid, Chromatic, and Pixel, all driven by a single fragment shader and fully configurable from the Framer properties panel.

The Challenge

The goal was to build a cursor-reactive image shader that felt genuinely alive without the overhead of a full 3D library. Unlike SIG which required Three.js for spatial geometry, PRISM only needed 2D shader work, so the challenge was implementing four visually distinct effects cleanly, keeping the component lightweight, and handling edge cases like static rendering, WebGL unavailability, and aspect ratio correction gracefully.

The Approach

The core architectural decision was implementing all four effects inside a single fragment shader using a mode uniform as a branch selector. Rather than compiling separate shader programs per effect, one program handles everything: one compile, one link, one draw call regardless of which effect is active. Switching effects at runtime is a uniform update, not a program swap.

Each effect is built differently at the shader level. Ripple uses a sine wave with exponential distance damping from the pointer. Liquid uses Fractal Brownian Motion, layering four octaves of value noise into an organic flow field that warps the UV coordinates. Chromatic splits the RGB channels and samples them at offset positions to simulate lens aberration, combined with a lens bulge distortion. Pixel quantises UV coordinates into a grid and softens the tile edges based on pointer influence.

Aspect ratio is handled inside the shader through a custom coverUv function that replicates CSS object-fit: cover mathematically, ensuring the image fills the frame correctly regardless of component dimensions.

The Build

Rather than Three.js, PRISM uses raw WebGL1 directly via the canvas context. Pointer position and hover state are smoothed with a lerp in the JavaScript render loop before being passed to the shader as uniforms, keeping the GLSL clean and the animation feel controllable. The component uses Framer's useIsStaticRenderer hook to render a plain img tag during static rendering, and falls back to the same img if WebGL is unavailable, so the component never breaks regardless of environment.

Cleanup on unmount deletes the texture, buffer, program, and both shaders explicitly, preventing GPU memory leaks.

The Result

PRISM is currently pending Framer marketplace approval. The build established a lightweight pattern for WebGL shader components in Framer that sits alongside Three.js-based components where full 3D is not needed, giving the component suite a broader range of tools to work with.