Interactive Blur Reveal

Overview

Interactive Blur Reveal lets clarity arrive through exploration. The image sharpens because the user earns the reveal.

Use it for image-led heroes, portfolio previews, campaign visuals, and editorial moments where discovery adds meaning. The page job is reveal: the visitor should uncover visual detail, not essential instructions.

The main risk is gating. Anything users need before they explore must remain readable outside the blurred surface.

Install

Usage

Component Code

Example Production Use Case

Use this as WebGL production guidance. Verify the shipped source, rendering stack, dependency list, shader assets, resource disposal, pause/offscreen behavior, DPR strategy, poster fallback, and reduced-motion state before relying on exact props, defaults, imports, or installation steps.

Best Used For

• Image-led heroes where exploration is part of the reveal, not a barrier to the message.
• Portfolio previews where detail can emerge without hiding navigation or CTA copy.
• Campaign sections where the visual reward is optional but memorable.

Not For

Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever.

Performance Budget

Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Interactive Blur Reveal offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled.

Accessibility and Mobile

Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate.

Common Mistakes

• Blurring text, captions, or critical UI that users need before they explore.
• Using blur as a gimmick when the revealed image adds no decision value.
• Leaving touch and keyboard users without an equivalent clear image.