PRISM

Add real-time shader effects to any image with a single cursor interaction.

PRISM is a pointer-reactive image shader for Framer built for hero sections, portfolio showcases, product reveals, and any layout that needs a moment of visual surprise. One component, four completely different shader effects — drop in your image, pick Ripple, Liquid, Chromatic, or Pixel, and watch it react to your cursor in real time.

Key Features:

• 4-in-1 component: Ripple, Liquid, Chromatic, and Pixel effects in a single install

• Real-time cursor reactivity with smooth hover transitions

• Full control over intensity, radius, speed, and noise

• Separate hover strength control for subtle or dramatic reactions

• Chromatic aberration and pixel size exposed as individual props

• Adjustable border radius and background color

• Graceful fallback for static rendering and non-WebGL environments

Controls:

• Effect switches between Ripple, Liquid, Chromatic, and Pixel

• Intensity controls how strong the visual distortion feels

• Radius sets how far the effect spreads from the cursor

• Speed adjusts how quickly the effect moves or reacts

• Hover controls how much the effect appears on hover

• Noise adds texture and organic irregularity to the motion

• Chromatic and Pixel Size are effect-specific fine-tuning props

Best For:

• Hero sections with interactive image moments

• Portfolio and creative agency layouts

• Product photography reveals

• Editorial and fashion landing pages

• Any section where a static image needs more life