Media Fancy Stable
NoiseReveal
WebGL image reveal with a Perlin-noise dissolve mask, contracting radial gradient, and wave displacement
Preview
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>Installation
pnpm add fancy-ui-svelte
import { NoiseReveal } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { NoiseReveal } from 'fancy-ui-svelte';
</script>
<NoiseReveal />Examples
Basic Usage
Toggle the reveal manually with the revealed prop.
svelte
<script lang="ts">
import { NoiseReveal } from "$lib/fancy-ui/noise-reveal";
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>Props
| Prop | Type | Default | Description |
|---|---|---|---|
src * | 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") |