goodui
Get Pro

Blur reveal

Free · MITReact Native · Expo

Shows a result arriving: a scan line wipes down a blurred picture and leaves it sharp, then the frame settles with a spring and an unlock cue.

View as Markdown
Try it on your phone
Scan to open this demo in your phone's browser and use it with your fingers.

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/blur-reveal.json

Then run npx expo install --fix so react-native-reanimated match your Expo SDK. Files land in components/goodui-native/blur-reveal.

Usage

import { useState } from "react";
import { BlurReveal } from "@/components/goodui-native/blur-reveal/blur-reveal";

const [ready, setReady] = useState(false);

<BlurReveal
  source={{ uri: resultUrl }}
  revealed={ready}
  accessibilityLabel="Your portrait in an oil painting style"
  onDone={() => setShowActions(true)}
/>

When to use

Use it for
  • The moment a generated picture is ready.
  • Unlocking a blurred preview after a purchase.
Reach for something else
  • Ordinary image loading: use a skeleton.
  • Pictures people see repeatedly, such as a gallery: the reveal is for the first time.

API reference

PropTypeDefault
source*ImageSourcePropType—
aspectRatio
Width over height.
number0.8
revealed*
Starts the reveal. Set it when the result is ready; set it back to false to blur the picture again.
boolean—
blur
Blur of the waiting picture, in points.
number26
progress
Drive the scan from your own progress instead (0 to 1). It finishes once `revealed` is true and this reaches 1.
SharedValue<number>—
durationMsnumber1500
onDone
The picture is fully sharp.
() => void—
accessibilityLabel*
Overrides the label read by screen readers.
string—
style
Style for the outer container.
StyleProp<ViewStyle>—
testID
Identifier for end-to-end tests.
string—

Motion and haptics

  • The wipe runs for durationMs, then the frame bumps 3.5 percent and settles on a bouncy spring.
  • Reduced motion: a short crossfade.
  • Haptic: The unlock cue fires once when the picture is sharp.
  • Two Image elements. The wipe changes one clipped height on the UI thread.

Accessibility

  • Read as one image, using the required accessibilityLabel.

Notes for AI

  • Set revealed back to false to blur the picture again and replay it.
  • When you pass `progress`, the wipe follows your value, and onDone runs once revealed is true and progress reaches 1.
  • The blur hides the picture from view only. A paid unlock has to keep the real file on the server.

Related

Before and after

Drag a handle across two pictures to compare them. The handle follows the finger on the UI thread, with a cue at the midpoint and at each end, and plays one short sweep on mount to show it can be dragged.

Generation queue

Cards for long AI jobs: each one shows its status, a fill and a light sweep while running, a rolling percentage, and cancel, retry and open actions.

Success check

A success or error moment: the circle springs in, the check draws itself while a ring pulses out and the title rises in; the error variant draws a cross and shakes once. Inline or fullscreen, optionally with confetti.