# NoiseReveal

> WebGL image reveal with a Perlin-noise dissolve mask, contracting radial gradient, and wave displacement.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Media
- Tags: media, image, reveal, webgl, shader, threejs, noise
- Docs: https://fancy-ui.rama.app/docs/components/noise-reveal
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/noise-reveal

## Import

```svelte
<script lang="ts">
  import { NoiseReveal } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { NoiseReveal } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `src` (required) | `string` | — | Image URL |
| `alt` | `string` | — | Accessible label for the image |
| `trigger` | `"view" \| "manual"` | `"view"` | Reveal trigger: "view" = on viewport entry, "manual" = via revealed prop |
| `revealed` | `boolean` | `false` | Manual reveal state (used with trigger="manual"; also allows re-hiding) |
| `duration` | `number` | `1.5` | Reveal animation duration in seconds |
| `delay` | `number` | `0` | Delay before reveal in seconds (trigger="view") |

## Examples

### Basic Usage

Toggle the reveal manually with the revealed prop.

```svelte
<script lang="ts">
	import { NoiseReveal } from "fancy-ui-svelte";

	let revealed = $state(true);
</script>

<div class="flex w-full flex-col items-center gap-4">
	<NoiseReveal
		src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80"
		alt="Mountain peak above the clouds"
		trigger="manual"
		{revealed}
		class="h-[300px] max-w-md"
	/>
	<button
		onclick={() => (revealed = !revealed)}
		class="bg-foreground text-background rounded-md px-4 py-2 text-sm font-medium transition-opacity hover:opacity-80"
	>
		{revealed ? "Hide" : "Reveal"} image
	</button>
</div>
```