LiquidGlass

<script lang="ts">
	import { LiquidGlass } from "$lib/fancy-ui/liquid-glass";
</script>

<div
	class="relative flex h-[400px] w-full items-center justify-center overflow-hidden rounded-lg border"
>
	<div
		class="absolute top-1/4 left-1/4 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-violet-500/30 blur-3xl"
	></div>
	<div class="absolute right-1/4 bottom-1/3 h-64 w-64 rounded-full bg-cyan-500/30 blur-3xl"></div>
	<div
		class="absolute bottom-1/4 left-1/2 h-56 w-56 -translate-x-1/2 rounded-full bg-rose-500/25 blur-3xl"
	></div>

	<div class="absolute inset-0 z-[1] overflow-y-auto" style="scrollbar-width: none;">
		<div class="space-y-8 px-10 py-20" style="min-height: 220%;">
			{#each Array(6) as _, i}
				<div class="flex gap-4">
					{#each Array(5) as _, j}
						<div
							class="h-20 flex-1 rounded-xl"
							style="background: hsl({(i * 5 + j) * 28}, 65%, 55%); opacity: 0.75;"
						></div>
					{/each}
				</div>
				<p class="px-1 text-base font-medium text-white/50">Chromatic displacement in action.</p>
			{/each}
		</div>
	</div>

	<div class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center">
		<div class="pointer-events-auto">
			<LiquidGlass radius={20} frost={0.05}>
				<div
					class="text-foreground flex min-h-16 w-full items-center justify-center px-12 py-4 text-base font-medium"
				>
					Liquid Glass. Try scrolling.
				</div>
			</LiquidGlass>
		</div>
	</div>
</div>

<script lang="ts">
	import { LiquidGlass } from "$lib/fancy-ui/liquid-glass";
</script>

<div class="relative h-[440px] w-full overflow-hidden rounded-lg border bg-[#fafafa]">
	<div class="absolute inset-0 overflow-y-auto" style="scrollbar-width: none;">
		<!-- Hero -->
		<div class="flex min-h-[420px] flex-col items-center justify-center px-8 pt-24 text-center">
			<span
				class="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-gray-500"
			>
				Now available for macOS
			</span>
			<h1 class="mt-5 max-w-md text-4xl leading-tight font-semibold tracking-tight text-gray-900">
				Your UI, at the speed of thought.
			</h1>
			<p class="mt-4 max-w-sm text-sm text-gray-500">
				FancyOS turns your voice into polished interfaces. Speak naturally, ship beautifully.
			</p>
			<div class="mt-6 flex items-center gap-3">
				<span class="rounded-full bg-gray-900 px-5 py-2.5 text-sm font-semibold text-white">
					Download
				</span>
				<span class="px-3 py-2.5 text-sm font-medium text-gray-600">Watch demo</span>
			</div>
		</div>

		<!-- Colorful sections to scroll behind the nav -->
		<div class="space-y-6 px-8 pb-12">
			{#each Array(6) as _, i}
				<div
					class="flex h-32 items-end rounded-3xl p-5"
					style="background: linear-gradient(120deg, hsl({210 + i * 40}, 75%, 62%), hsl({250 +
						i * 40}, 70%, 55%));"
				>
					<p class="text-sm font-semibold text-white/90">Feature {i + 1}</p>
				</div>
			{/each}
		</div>
	</div>

	<!-- Fixed pill nav -->
	<div class="pointer-events-none absolute inset-x-0 top-4 z-10 flex justify-center px-6">
		<div class="pointer-events-auto w-full max-w-lg">
			<LiquidGlass radius={9999} containerClass="w-full">
				<nav class="flex w-full items-center justify-between px-6 py-3">
					<span class="flex items-center gap-1.5 text-sm font-bold tracking-tight text-gray-900">
						<span class="inline-block size-4 rounded-full bg-gray-900"></span>
						FancyOS
					</span>
					<div class="flex items-center gap-5 text-[13px] font-medium text-gray-800">
						<span class="hidden sm:inline">Manifesto</span>
						<span class="hidden sm:inline">Pricing</span>
						<span class="hidden sm:inline">Blog</span>
						<span class="rounded-full bg-gray-900 px-3.5 py-1.5 text-xs font-semibold text-white">
							Download
						</span>
					</div>
				</nav>
			</LiquidGlass>
		</div>
	</div>
</div>