From 9e58c623da50129789616bf7533143cd94ba564d Mon Sep 17 00:00:00 2001
From: "goose.art" <business@goose.art>
Date: Wed, 1 Apr 2026 09:41:47 -0700
Subject: [PATCH] mobile frog menu: tap frog to reveal lilypad menu items with
 staggered animation

---
 src/lib/CreditsButton.svelte |   6 +
 src/lib/FrogHeader.svelte    | 292 ++++++++++++++++++++++++++++++++++-
 2 files changed, 292 insertions(+), 6 deletions(-)

diff --git a/src/lib/CreditsButton.svelte b/src/lib/CreditsButton.svelte
index 91ee7b0..db3ab89 100644
--- a/src/lib/CreditsButton.svelte
+++ b/src/lib/CreditsButton.svelte
@@ -76,6 +76,12 @@
 		transform: scale(1.1) rotate(-5deg);
 	}
 
+	@media (max-width: 600px) {
+		.credits-btn {
+			display: none;
+		}
+	}
+
 	.lilypad-img {
 		width: clamp(70px, 10vw, 100px);
 		height: auto;
diff --git a/src/lib/FrogHeader.svelte b/src/lib/FrogHeader.svelte
index 2652bf1..834d626 100644
--- a/src/lib/FrogHeader.svelte
+++ b/src/lib/FrogHeader.svelte
@@ -1,8 +1,15 @@
+<!--
+	FrogHeader: Site header with the "vod frog" logo and frog mascot.
+	On mobile, the frog acts as a menu toggle — tapping it reveals lilypad
+	menu items (credits, login) that drift down with staggered animation.
+-->
 <script lang="ts">
 	import LoginButton from './LoginButton.svelte';
 	import { playCroak } from './croak';
 
 	let { onHomeClick }: { onHomeClick?: () => void } = $props();
+	let menuOpen = $state(false);
+	let showCreditsModal = $state(false);
 
 	function handleClick(e: MouseEvent) {
 		if (onHomeClick) {
@@ -10,23 +17,102 @@
 			onHomeClick();
 		}
 	}
+
+	function onFrogClick() {
+		playCroak();
+		// On mobile, toggle the menu
+		if (window.innerWidth <= 600) {
+			menuOpen = !menuOpen;
+		}
+	}
+
+	function onFrogTouch(e: TouchEvent) {
+		e.preventDefault();
+		onFrogClick();
+	}
+
+	function openCredits() {
+		playCroak();
+		showCreditsModal = true;
+		menuOpen = false;
+	}
+
+	function closeCredits() {
+		showCreditsModal = false;
+	}
+
+	function onBackdropClick(e: MouseEvent) {
+		if (e.target === e.currentTarget) closeCredits();
+	}
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Escape') closeCredits();
+	}
 </script>
 
+<svelte:window onkeydown={onKeyDown} />
+
 <header class="frog-header">
-	<div class="login-area">
+	<!-- Desktop login area -->
+	<div class="login-area desktop-only">
 		<LoginButton />
 	</div>
+
 	<div class="title-area">
 		<a href="/" class="logo-link" onclick={handleClick}><h1 class="logo-text">vod frog</h1></a>
 		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-		<img src="/froggie.png" alt="A cute frog" class="header-frog" onclick={playCroak} ontouchend={(e) => { e.preventDefault(); playCroak(); }} />
+		<img
+			src="/froggie.png"
+			alt="A cute frog"
+			class="header-frog"
+			class:menu-open={menuOpen}
+			onclick={onFrogClick}
+			ontouchend={onFrogTouch}
+		/>
 	</div>
+
+	<!-- Mobile lilypad menu -->
+	<div class="mobile-menu" class:open={menuOpen}>
+		<button
+			class="lily-item"
+			style="animation-delay: 0.05s;"
+			onclick={openCredits}
+		>
+			<img src="/lilymenu.svg" alt="" class="lily-img" />
+			<span class="lily-label">credits</span>
+		</button>
+		<div class="lily-item" style="animation-delay: 0.15s;">
+			<LoginButton />
+		</div>
+	</div>
+
 	<div class="subtitle-lines">
 		<p class="subtitle">an exploration by</p>
 		<p class="subtitle"><a href="https://witchsky.app/profile/goose.art" target="_blank" class="subtitle-link">@goose.art</a> using <a href="https://witchsky.app/profile/stream.place" target="_blank" class="subtitle-link">@stream.place</a></p>
 	</div>
 </header>
 
+<!-- Credits modal (shared between desktop CreditsButton and mobile menu) -->
+{#if showCreditsModal}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="modal-backdrop" onclick={onBackdropClick}>
+		<div class="modal-content">
+			<div class="credits-body">
+				<h2 class="credits-title">credits</h2>
+				<div class="credit-item">
+					<p class="credit-label">Frog Croaking</p>
+					<p class="credit-author">by DrinkingWindGames</p>
+					<a href="https://freesound.org/s/848549/" target="_blank" class="credit-link">
+						freesound.org/s/848549/
+					</a>
+					<p class="credit-license">License: Attribution 4.0</p>
+				</div>
+				<button class="close-btn" onclick={closeCredits}>close</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <style>
 	.frog-header {
 		padding: 30px 20px 50px;
@@ -68,16 +154,121 @@
 		top: -60px;
 		width: clamp(120px, 18vw, 220px);
 		height: auto;
-		z-index: 2;
+		z-index: 12;
 		transform: rotate(-10deg);
+		transform-origin: center center;
 		filter: drop-shadow(2px 4px 6px rgba(10, 24, 43, 0.3));
-		transition: transform 0.3s ease;
+		transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 	}
 
 	.header-frog:hover {
 		transform: rotate(5deg) scale(1.1);
 	}
 
+	/* Mobile menu — hidden by default */
+	.mobile-menu {
+		display: none;
+	}
+
+	.desktop-only {
+		display: block;
+	}
+
+	/* Credits modal */
+	.modal-backdrop {
+		position: fixed;
+		inset: 0;
+		background: rgba(10, 24, 43, 0.6);
+		z-index: 1000;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 20px;
+	}
+
+	.modal-content {
+		width: min(500px, 90vw);
+		background: #39FF44;
+		border: 3px solid #0A182B;
+		border-radius: 24px;
+		padding: 32px 24px;
+	}
+
+	.credits-body {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		gap: 12px;
+	}
+
+	.credits-title {
+		font-family: 'PicNic', cursive, system-ui;
+		font-size: clamp(1.6rem, 3.5vw, 2.2rem);
+		color: #0A182B;
+		margin: 0;
+	}
+
+	.credit-item {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.credit-label {
+		font-family: 'PicNic', cursive, system-ui;
+		font-size: 1.1rem;
+		color: #0A182B;
+		margin: 0;
+	}
+
+	.credit-author {
+		font-family: 'Fang', system-ui, sans-serif;
+		font-size: 0.95rem;
+		color: #0A182B;
+		margin: 0;
+		opacity: 0.8;
+	}
+
+	.credit-link {
+		font-family: 'Fang', system-ui, sans-serif;
+		font-size: 0.9rem;
+		color: #0A182B;
+		text-decoration: underline;
+		text-decoration-color: #FF3992;
+		transition: color 0.15s;
+	}
+
+	.credit-link:hover {
+		color: #FF3992;
+	}
+
+	.credit-license {
+		font-family: 'Fang', system-ui, sans-serif;
+		font-size: 0.8rem;
+		color: #0A182B;
+		opacity: 0.65;
+		margin: 0;
+		font-style: italic;
+	}
+
+	.close-btn {
+		all: unset;
+		font-family: 'PicNic', cursive, system-ui;
+		font-size: 1rem;
+		color: #FFDEED;
+		background: #0A182B;
+		padding: 8px 28px;
+		border-radius: 30px;
+		cursor: pointer;
+		margin-top: 8px;
+		transition: transform 0.15s ease;
+	}
+
+	.close-btn:hover {
+		transform: scale(1.05);
+	}
+
 	.subtitle-lines {
 		margin-top: 6px;
 		position: relative;
@@ -104,15 +295,104 @@
 		opacity: 0.85;
 	}
 
+	/* ---- Mobile ---- */
 	@media (max-width: 600px) {
 		.frog-header {
 			padding: 20px 16px 8px;
 		}
 
 		.header-frog {
-			right: -100px;
+			right: -60px;
 			top: -20px;
+			width: clamp(90px, 22vw, 130px);
+		}
+
+		/* When menu is open, frog rotates down to "look at" the menu */
+		.header-frog.menu-open {
+			transform: rotate(80deg) scale(1.05);
+		}
+
+		.desktop-only {
+			display: none;
+		}
+
+		.mobile-menu {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 6px;
+			overflow: hidden;
+			max-height: 0;
+			opacity: 0;
+			transition: max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
+			            opacity 0.3s ease;
+			position: relative;
+			z-index: 11;
+			padding-left: 8px;
+		}
+
+		.mobile-menu.open {
+			max-height: 300px;
+			opacity: 1;
+		}
+
+		.lily-item {
+			all: unset;
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			opacity: 0;
+			transform: translateY(-20px) rotate(-8deg);
+			transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+		}
+
+		.mobile-menu.open .lily-item {
+			opacity: 1;
+			transform: translateY(0) rotate(0deg);
+		}
+
+		/* Stagger the animation per item */
+		.mobile-menu.open .lily-item:nth-child(1) {
+			transition-delay: 0.05s;
+		}
+		.mobile-menu.open .lily-item:nth-child(2) {
+			transition-delay: 0.15s;
+		}
+		.mobile-menu.open .lily-item:nth-child(3) {
+			transition-delay: 0.25s;
+		}
+
+		/* When closing, reverse stagger */
+		.mobile-menu:not(.open) .lily-item:nth-child(1) {
+			transition-delay: 0.1s;
+		}
+		.mobile-menu:not(.open) .lily-item:nth-child(2) {
+			transition-delay: 0.05s;
+		}
+		.mobile-menu:not(.open) .lily-item:nth-child(3) {
+			transition-delay: 0s;
+		}
+
+		.lily-img {
+			width: 80px;
+			height: auto;
+			filter: drop-shadow(1px 2px 3px rgba(10, 24, 43, 0.25));
+		}
+
+		.lily-label {
+			position: absolute;
+			font-family: 'PicNic', cursive, system-ui;
+			font-size: 0.75rem;
+			color: #0A182B;
+			pointer-events: none;
 		}
 	}
-</style>
 
+	/* Desktop: hide mobile menu items, show lily label for credits btn */
+	@media (min-width: 601px) {
+		.lily-item, .lily-img, .lily-label {
+			display: none;
+		}
+	}
+</style>
-- 
2.51.2