From 5a71ccd6dd9d7f1c41118e536fec15eb5da9491b Mon Sep 17 00:00:00 2001
From: "goose.art" <business@goose.art>
Date: Mon, 30 Mar 2026 17:09:49 -0700
Subject: [PATCH] add WavyCircle component, link creators to profile pages,
 increase header bottom margin to 50px

---
 src/lib/FrogHeader.svelte |   2 +-
 src/lib/VideoCard.svelte  |   8 ++-
 src/lib/WavyCircle.svelte | 121 ++++++++++++++++++++++++++++++++++++++
 src/lib/theme.ts          |   4 +-
 src/routes/+page.svelte   |  23 +++++---
 5 files changed, 145 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/WavyCircle.svelte

diff --git a/src/lib/FrogHeader.svelte b/src/lib/FrogHeader.svelte
index f465e3c..00ab6ee 100644
--- a/src/lib/FrogHeader.svelte
+++ b/src/lib/FrogHeader.svelte
@@ -22,7 +22,7 @@
 
 <style>
 	.frog-header {
-		padding: 30px 20px 30px;
+		padding: 30px 20px 50px;
 		position: relative;
 	}
 
diff --git a/src/lib/VideoCard.svelte b/src/lib/VideoCard.svelte
index c3e0032..a77c8e4 100644
--- a/src/lib/VideoCard.svelte
+++ b/src/lib/VideoCard.svelte
@@ -185,7 +185,7 @@
 		</div>
 		<div class="info">
 			<h3 class="title">{video.value.title}</h3>
-			<p class="creator">{creatorHandle}</p>
+			<a href="/profile/{creatorHandle.replace('@', '')}" class="creator" onclick={(e: MouseEvent) => e.stopPropagation()}>{creatorHandle}</a>
 			<p class="date">{formatDate(video.value.createdAt)}</p>
 		</div>
 	</WavyBorder>
@@ -327,6 +327,7 @@
 	}
 
 	.creator {
+		display: block;
 		margin: 4px 0 0;
 		font-family: 'Fang', system-ui, sans-serif;
 		font-size: 0.8rem;
@@ -334,6 +335,11 @@
 		opacity: 0.8;
 		text-decoration: underline;
 		text-decoration-color: #FF3992;
+		transition: color 0.15s;
+	}
+
+	.creator:hover {
+		color: #FF3992;
 	}
 
 	.date {
diff --git a/src/lib/WavyCircle.svelte b/src/lib/WavyCircle.svelte
new file mode 100644
index 0000000..2812a89
--- /dev/null
+++ b/src/lib/WavyCircle.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+	import { seededRandom } from './theme';
+
+	let { seed, fill = '#39FF44', strokeColor = '#0A182B', strokeWidth = 2, size = 48, children }: {
+		seed: string;
+		fill?: string;
+		strokeColor?: string;
+		strokeWidth?: number;
+		size?: number;
+		children: any;
+	} = $props();
+
+	const { svgPath, clipPolygon } = generateWavyCircle(seed);
+
+	function generateWavyCircle(s: string): { svgPath: string; clipPolygon: string } {
+		const cx = 50, cy = 50;
+		const baseRadius = 44;
+		const amp = 4;
+		const points = 64; // smooth circle
+
+		// Layered sine waves for radial wobble
+		const phase1 = seededRandom(s, 1) * Math.PI * 2;
+		const phase2 = seededRandom(s, 2) * Math.PI * 2;
+		const freq1 = 4 + seededRandom(s, 3) * 4; // 4-8 bumps around circle
+		const freq2 = 8 + seededRandom(s, 4) * 6; // 8-14 detail bumps
+		const ampScale = 0.7 + seededRandom(s, 5) * 0.6;
+
+		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 r = baseRadius + (w1 + w2) * ampScale;
+			pts.push([
+				cx + Math.cos(angle) * r,
+				cy + Math.sin(angle) * r
+			]);
+		}
+
+		// SVG path with smooth Catmull-Rom splines
+		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;
+			const cp1x = p1[0] + (p2[0] - p0[0]) * tension;
+			const cp1y = p1[1] + (p2[1] - p0[1]) * tension;
+			const cp2x = p2[0] - (p3[0] - p1[0]) * tension;
+			const cp2y = p2[1] - (p3[1] - p1[1]) * tension;
+			d += ` C ${cp1x.toFixed(1)} ${cp1y.toFixed(1)}, ${cp2x.toFixed(1)} ${cp2y.toFixed(1)}, ${p2[0].toFixed(1)} ${p2[1].toFixed(1)}`;
+		}
+		d += ' Z';
+
+		// CSS polygon for clip-path (sample more densely for smooth clip)
+		const clipPts = pts.map(([x, y]) => `${x.toFixed(2)}% ${y.toFixed(2)}%`).join(', ');
+
+		return { svgPath: d, clipPolygon: `polygon(${clipPts})` };
+	}
+</script>
+
+<div class="wavy-circle" style="width: {size}px; height: {size}px;">
+	<div class="circle-clipped" style="clip-path: {clipPolygon};">
+		<div class="circle-fill" style="background: {fill};"></div>
+		<div class="circle-content">
+			{@render children()}
+		</div>
+	</div>
+	<svg class="circle-stroke" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" overflow="visible">
+		<path
+			d={svgPath}
+			fill="none"
+			stroke={strokeColor}
+			stroke-width={strokeWidth}
+			stroke-linejoin="round"
+		/>
+	</svg>
+</div>
+
+<style>
+	.wavy-circle {
+		position: relative;
+		flex-shrink: 0;
+	}
+
+	.circle-clipped {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.circle-fill {
+		position: absolute;
+		inset: 0;
+	}
+
+	.circle-content {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.circle-content :global(img) {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
+
+	.circle-stroke {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 2;
+		pointer-events: none;
+		overflow: visible;
+	}
+</style>
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index a8cd249..8ad32d3 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -44,8 +44,8 @@ export function getCardOffsets(seed: string): {
 	const r3 = seededRandom(seed, 2);
 
 	return {
-		rotation: (r1 - 0.5) * 6, // -3 to +3 degrees
-		translateX: (r2 - 0.5) * 12, // -6 to +6 px
+		rotation: (r1 - 0.5) * 10, // -5 to +5 degrees
+		translateX: (r2 - 0.5) * 60, // -30 to +30 px
 		translateY: (r3 - 0.5) * 60, // -30 to +30 px
 	};
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0484228..4dbe846 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -13,6 +13,7 @@
     import VideoCard from "$lib/VideoCard.svelte";
     import FrogHeader from "$lib/FrogHeader.svelte";
     import WavyBorder from "$lib/WavyBorder.svelte";
+    import WavyCircle from "$lib/WavyCircle.svelte";
 
     const PAGE_SIZE = 9;
 
@@ -130,12 +131,16 @@
                     <h2 class="player-title">{selectedVideo.value.title}</h2>
                     <div class="player-meta-row">
                         {#if selectedAvatar}
-                            <img src={selectedAvatar} alt="" class="creator-avatar" />
+                            <a href="/profile/{selectedHandle?.replace('@', '') || selectedVideo.value.creator}" class="creator-avatar-link">
+                                <WavyCircle seed={selectedVideo.value.creator} fill="#FFDEED" strokeColor="#0A182B" strokeWidth={1.5} size={40}>
+                                    <img src={selectedAvatar} alt="" />
+                                </WavyCircle>
+                            </a>
                         {/if}
                         <p class="player-meta">
-                            <span class="creator-tag"
+                            <a href="/profile/{selectedHandle?.replace('@', '') || selectedVideo.value.creator}" class="creator-tag"
                                 >{selectedHandle ||
-                                    selectedVideo.value.creator}</span
+                                    selectedVideo.value.creator}</a
                             >
                             <span class="dot">·</span>
                             {formatDate(selectedVideo.value.createdAt)}
@@ -197,13 +202,13 @@
         margin-top: 6px;
     }
 
-    .creator-avatar {
-        width: 36px;
-        height: 36px;
-        border-radius: 50%;
-        object-fit: cover;
+    .creator-avatar-link {
         flex-shrink: 0;
-        border: 2px solid #0A182B;
+        transition: transform 0.15s;
+    }
+
+    .creator-avatar-link:hover {
+        transform: scale(1.1);
     }
 
     .player-title {
-- 
2.51.2