DatamoshTransition

<script lang="ts">
	import { DatamoshTransition } from "$lib/fancy-ui/datamosh-transition";

	const pages = [
		{ title: "Page one", body: "Press the button to go to the next page." },
		{ title: "Page two", body: "The page changed while the screen was covered." },
	];

	let transition: ReturnType<typeof DatamoshTransition>;
	let current = $state(0);
	let busy = $state(false);

	async function navigate() {
		if (busy) return;
		busy = true;
		await transition.cover();
		current = (current + 1) % pages.length;
		await transition.reveal();
		busy = false;
	}
</script>

<div
	class="relative flex h-80 w-full flex-col items-center justify-center gap-4 overflow-hidden rounded-2xl border border-white/10 bg-[#14101f] text-center text-white"
>
	<h3 class="text-3xl font-semibold tracking-tight">{pages[current].title}</h3>
	<p class="text-sm text-white/60">{pages[current].body}</p>
	<button
		class="rounded-full bg-white px-4 py-2 text-sm font-medium text-[#14101f] disabled:opacity-60"
		onclick={navigate}
		disabled={busy}
	>
		Next page
	</button>
	<DatamoshTransition bind:this={transition} contained />
</div>

<script lang="ts">
	import {
		DatamoshTransition,
		type DatamoshEffect,
		type DatamoshPaletteName,
		type DatamoshSweep,
	} from "$lib/fancy-ui/datamosh-transition";

	const variants: DatamoshEffect[] = ["curtain", "rise", "split", "interlace"];
	const sweeps: DatamoshSweep[] = ["right", "left", "center", "edges", "random"];
	const palettes: DatamoshPaletteName[] = ["broadcast", "thermal", "mono", "acid"];

	let variant = $state<DatamoshEffect>("split");
	let sweep = $state<DatamoshSweep>("center");
	let colors = $state<DatamoshPaletteName>("thermal");
	let transition: ReturnType<typeof DatamoshTransition>;
	let page = $state(1);
	let busy = $state(false);

	async function navigate() {
		if (busy) return;
		busy = true;
		await transition.cover();
		page += 1;
		await transition.reveal();
		busy = false;
	}
</script>

<div class="flex w-full flex-col gap-4">
	<div class="flex flex-wrap gap-x-6 gap-y-3 text-sm">
		{#each [["variant", variants], ["sweep", sweeps], ["colors", palettes]] as const as [label, options] (label)}
			<fieldset class="flex flex-wrap items-center gap-1.5">
				<legend class="sr-only">{label}</legend>
				<span class="text-muted-foreground mr-1">{label}</span>
				{#each options as option (option)}
					{@const active =
						(label === "variant" && variant === option) ||
						(label === "sweep" && sweep === option) ||
						(label === "colors" && colors === option)}
					<button
						class="rounded-full border px-2.5 py-1 text-xs transition-colors {active
							? 'border-foreground bg-foreground text-background'
							: 'border-border hover:bg-muted'}"
						aria-pressed={active}
						onclick={() => {
							if (label === "variant") variant = option as DatamoshEffect;
							else if (label === "sweep") sweep = option as DatamoshSweep;
							else colors = option as DatamoshPaletteName;
						}}
					>
						{option}
					</button>
				{/each}
			</fieldset>
		{/each}
	</div>

	<div
		class="relative flex h-80 w-full flex-col items-center justify-center gap-4 overflow-hidden rounded-2xl border border-white/10 bg-[#14101f] text-center text-white"
	>
		<p class="font-mono text-xs tracking-widest text-white/50">
			PAGE {String(page).padStart(2, "0")}
		</p>
		<h3 class="text-3xl font-semibold tracking-tight">{variant} · {sweep}</h3>
		<button
			class="rounded-full bg-white px-4 py-2 text-sm font-medium text-[#14101f] disabled:opacity-60"
			onclick={navigate}
			disabled={busy}
		>
			Next page
		</button>
		<DatamoshTransition bind:this={transition} {variant} {sweep} {colors} contained />
	</div>
</div>

<script lang="ts">
	import { DatamoshTransition } from "$lib/fancy-ui/datamosh-transition";

	type Scene = "golden" | "dusk";

	/** A vector trace of a sunset photo; dusk is the same picture, filtered. */
	const PICTURE = "/examples/datamosh-sunset.svg";
	const DUSK_FILTER = "brightness(0.45) saturate(1.1) hue-rotate(-100deg)";

	let scene = $state<Scene>("golden");
	let picture = $state(true);
	let busy = $state(false);
	let source = $state<string | HTMLCanvasElement | undefined>();
	let transition: ReturnType<typeof DatamoshTransition>;
	let imgEl: HTMLImageElement;

	/** The scene being left, as something the transition can decode. */
	async function snapshot(): Promise<string | HTMLCanvasElement> {
		if (scene === "golden") return PICTURE;
		// Dusk only exists as a CSS filter: bake it into a small canvas.
		await imgEl.decode().catch(() => {});
		const canvas = document.createElement("canvas");
		canvas.width = 384;
		canvas.height = 512;
		const ctx = canvas.getContext("2d");
		if (!ctx) return PICTURE;
		ctx.filter = DUSK_FILTER;
		ctx.drawImage(imgEl, 0, 0, canvas.width, canvas.height);
		return canvas;
	}

	async function next() {
		if (busy) return;
		busy = true;
		source = picture ? await snapshot() : undefined;
		await transition.cover();
		scene = scene === "golden" ? "dusk" : "golden";
		await new Promise((r) => setTimeout(r, 300));
		await transition.reveal();
		busy = false;
	}
</script>

<div class="flex w-full flex-col items-center gap-3">
	<div class="flex flex-wrap items-center justify-center gap-3 text-sm">
		<button
			class="bg-foreground text-background rounded-full px-4 py-1.5 font-medium disabled:opacity-60"
			onclick={next}
			disabled={busy}
		>
			{scene === "golden" ? "Let the sun set" : "Back to golden hour"}
		</button>
		<label class="text-muted-foreground flex items-center gap-2">
			<input type="checkbox" bind:checked={picture} />
			Tiles decode the picture
		</label>
	</div>

	<div
		class="border-border relative aspect-[3/4] w-full max-w-sm overflow-hidden rounded-2xl border bg-[#2d1c16]"
	>
		<img
			bind:this={imgEl}
			src={PICTURE}
			alt={scene === "golden"
				? "Vector sunset: an oval sun on the sea horizon behind a sailboat, under an orange sky streaked with clouds"
				: "The same seascape at dusk, in violet light"}
			class="block h-full w-full object-cover"
			style:filter={scene === "dusk" ? DUSK_FILTER : "none"}
			decoding="async"
		/>

		<DatamoshTransition
			bind:this={transition}
			variant="split"
			sweep="center"
			colors="sunset"
			{source}
			contained
		/>
	</div>
</div>