# Blur reveal

> 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.

- Type: Component (feedback)
- Access: Free, open source (MIT)
- Page: https://goodui.dev/native/components/blur-reveal
- Markdown: https://goodui.dev/native/components/blur-reveal.md
- Registry item: https://goodui.dev/native/r/blur-reveal.json
- Dependencies: react-native-reanimated
- Keywords: react native image reveal, blur to sharp, ai result reveal, scan line animation, generation complete animation

## When to use

- The moment a generated picture is ready.
- Unlocking a blurred preview after a purchase.

## When not to use

- Ordinary image loading: use a skeleton.
- Pictures people see repeatedly, such as a gallery: the reveal is for the first time.

## Installation

With the shadcn CLI (needs a components.json in the Expo app), then `npx expo install --fix` so native dependencies match your Expo SDK. The foundation comes along the first time.

```bash
npx shadcn@latest add https://goodui.dev/native/r/blur-reveal.json
npx expo install --fix
```

The component lands in `components/goodui-native/blur-reveal/` and imports the foundation from `components/goodui-native/foundation/` with relative paths.

## Usage

```tsx
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)}
/>
```

## API reference

### BlurReveal

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

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

## Accessibility

- Read as one image, using the required accessibilityLabel.

## Motion

- The wipe runs for durationMs, then the frame bumps 3.5 percent and settles on a bouncy spring.
- Reduced motion: a short crossfade.

## Haptics

- The unlock cue fires once when the picture is sharp.

## Performance

- Two Image elements. The wipe changes one clipped height on the UI thread.

## 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](https://goodui.dev/native/components/before-after.md): 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](https://goodui.dev/native/components/generation-queue.md): 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](https://goodui.dev/native/components/success-check.md): 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.

## Guidance for AI tools

Blur reveal: 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. Use only the documented props. Keep accessibility, reduced motion and both color schemes intact when adapting it.

Full library index: https://goodui.dev/native/llms.txt