From 1c3b4e2fa726286046e2703ea94c078247543bba Mon Sep 17 00:00:00 2001
From: "goose.art" <business@goose.art>
Date: Tue, 31 Mar 2026 21:42:17 -0700
Subject: [PATCH] wobbly pagination buttons using WavyButton component

---
 src/lib/WavyButton.svelte | 119 ++++++++++++++++++++++++++++++++++++++
 src/routes/+page.svelte   |  34 +----------
 2 files changed, 122 insertions(+), 31 deletions(-)
 create mode 100644 src/lib/WavyButton.svelte

diff --git a/src/lib/WavyButton.svelte b/src/lib/WavyButton.svelte
new file mode 100644
index 0000000..97dcda3
--- /dev/null
+++ b/src/lib/WavyButton.svelte
@@ -0,0 +1,119 @@
+<!--
+	WavyButton: A wobbly oval button using sine-wave generated borders.
+	Reusable for any text content — used for pagination, login, etc.
+-->
+<script lang="ts">
+	import { seededRandom } from './theme';
+
+	let { seed = 'btn', fill = '#0A182B', textColor = '#FFDEED', disabled = false, onclick, children }: {
+		seed?: string;
+		fill?: string;
+		textColor?: string;
+		disabled?: boolean;
+		onclick?: (e: MouseEvent) => void;
+		children: any;
+	} = $props();
+
+	const { svgPath, clipPolygon } = $derived(generateWavyOval(seed));
+
+	function generateWavyOval(s: string): { svgPath: string; clipPolygon: string } {
+		const cx = 50, cy = 50;
+		const rx = 44, ry = 36;
+		const amp = 3;
+		const points = 48;
+
+		const phase1 = seededRandom(s, 1) * Math.PI * 2;
+		const phase2 = seededRandom(s, 2) * Math.PI * 2;
+		const freq1 = 3 + seededRandom(s, 3) * 3;
+		const freq2 = 6 + seededRandom(s, 4) * 4;
+		const ampScale = 0.7 + seededRandom(s, 5) * 0.5;
+
+		const pts: [number, number][] = [];
+		for (let i = 0; i < points; i++) {
+			const angle = (i / points) * Math.PI * 2;
+			const w1 = Math.sin(angle * freq1 + phase1) * amp * 0.7;
+			const w2 = Math.sin(angle * freq2 + phase2) * amp * 0.3;
+			const wobble = (w1 + w2) * ampScale;
+			pts.push([cx + Math.cos(angle) * (rx + wobble), cy + Math.sin(angle) * (ry + wobble)]);
+		}
+
+		let d = `M ${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
+		for (let i = 0; i < pts.length; i++) {
+			const p0 = pts[(i - 1 + pts.length) % pts.length];
+			const p1 = pts[i];
+			const p2 = pts[(i + 1) % pts.length];
+			const p3 = pts[(i + 2) % pts.length];
+			const tension = 0.25;
+			d += ` C ${(p1[0] + (p2[0] - p0[0]) * tension).toFixed(1)} ${(p1[1] + (p2[1] - p0[1]) * tension).toFixed(1)}, ${(p2[0] - (p3[0] - p1[0]) * tension).toFixed(1)} ${(p2[1] - (p3[1] - p1[1]) * tension).toFixed(1)}, ${p2[0].toFixed(1)} ${p2[1].toFixed(1)}`;
+		}
+		d += ' Z';
+
+		const clipPts = pts.map(([x, y]) => `${x.toFixed(2)}% ${y.toFixed(2)}%`).join(', ');
+		return { svgPath: d, clipPolygon: `polygon(${clipPts})` };
+	}
+</script>
+
+<button class="wavy-btn" class:disabled {disabled} onclick={onclick}>
+	<div class="btn-clipped" style="clip-path: {clipPolygon};">
+		<div class="btn-fill" style="background: {fill};"></div>
+		<span class="btn-text" style="color: {textColor};">
+			{@render children()}
+		</span>
+	</div>
+	<svg class="btn-stroke" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" overflow="visible">
+		<path d={svgPath} fill="none" stroke="#0A182B" stroke-width="2" stroke-linejoin="round" />
+	</svg>
+</button>
+
+<style>
+	.wavy-btn {
+		all: unset;
+		position: relative;
+		width: clamp(100px, 12vw, 140px);
+		height: clamp(44px, 5vw, 56px);
+		cursor: pointer;
+		transition: transform 0.15s ease;
+	}
+
+	.wavy-btn:hover:not(.disabled) {
+		transform: scale(1.05);
+	}
+
+	.wavy-btn.disabled {
+		opacity: 0.5;
+		cursor: wait;
+	}
+
+	.btn-clipped {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.btn-fill {
+		position: absolute;
+		inset: 0;
+	}
+
+	.btn-text {
+		position: relative;
+		z-index: 1;
+		font-family: 'PicNic', cursive, system-ui;
+		font-size: clamp(0.9rem, 1.3vw, 1.15rem);
+		letter-spacing: 0.5px;
+		white-space: nowrap;
+	}
+
+	.btn-stroke {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 2;
+		pointer-events: none;
+		overflow: visible;
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6db8b40..340770f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -15,6 +15,7 @@
     import FrogHeader from "$lib/FrogHeader.svelte";
     import WavyBorder from "$lib/WavyBorder.svelte";
     import WavyCircle from "$lib/WavyCircle.svelte";
+    import WavyButton from "$lib/WavyButton.svelte";
 
     const PAGE_SIZE = 9;
 
@@ -168,15 +169,11 @@
 
     <div class="pagination">
         {#if pageIndex > 0}
-            <button class="page-btn" onclick={prevPage} disabled={loading}>
-                ← previous
-            </button>
+            <WavyButton seed="prev-page" disabled={loading} onclick={prevPage}>← previous</WavyButton>
         {/if}
         <span class="page-num">page {pageIndex + 1}</span>
         {#if hasMore}
-            <button class="page-btn" onclick={nextPage} disabled={loading}>
-                next →
-            </button>
+            <WavyButton seed="next-page" disabled={loading} onclick={nextPage}>next →</WavyButton>
         {/if}
     </div>
 </div>
@@ -257,32 +254,7 @@
         padding: 30px;
     }
 
-    .page-btn {
-        background: #0a182b;
-        color: #39ff44;
-        border: 3px solid #0a182b;
-        padding: 12px 32px;
-        border-radius: 40px;
-        font-family: "PicNic", cursive, system-ui;
-        font-size: 1.1rem;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        letter-spacing: 0.5px;
-    }
-
-    .page-btn:hover {
-        background: #39ff44;
-        color: #0a182b;
-        border-color: #0a182b;
-    }
 
-    .page-btn:disabled {
-        background: #1a8c22;
-        color: #0a182b;
-        border-color: #1a8c22;
-        cursor: wait;
-        opacity: 0.6;
-    }
 
     .page-num {
         font-family: "PicNic", cursive, system-ui;
-- 
2.51.2