Add site footer and switch display font to Sora, bump to 0.5.0

Adds a Footer component (credit line, repo/buttplug.io links) below main
content on all app pages, with the layout shell now flex-column so it
sticks to the bottom on short pages. Also swaps the display font from
Space Grotesk to Sora (after trying Fraunces, a serif, which didn't fit).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/(app)/layout.tsx

@@ -1,10 +1,16 @@
 import { NavBar } from "@/components/layout/NavBar";
+import { Breadcrumbs } from "@/components/layout/Breadcrumbs";
+import { Footer } from "@/components/layout/Footer";
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="min-h-dvh">
+    <div className="flex min-h-dvh flex-col">
       <NavBar />
-      <main className="mx-auto max-w-6xl px-4 py-8">{children}</main>
+      <main className="mx-auto w-full max-w-6xl flex-1 px-4 py-8">
+        <Breadcrumbs />
+        {children}
+      </main>
+      <Footer />
     </div>
   );
 }

app/(app)/page.tsx

@@ -24,8 +24,8 @@ export default async function DashboardPage() {
     <div className="flex flex-col gap-8">
       <Card className="bp-glass overflow-hidden">
         <CardContent className="flex flex-col items-start gap-4 py-8">
-          <BrandMark size={40} className="bp-pulse rounded-[9px]" />
+          <BrandMark size={48} animated className="rounded-[9px]" />
-          <h1 className="font-heading bp-gradient-text text-3xl font-semibold">Welcome back</h1>
+          <h1 className="font-heading text-3xl font-semibold">Welcome back</h1>
           <p className="max-w-xl text-sm text-muted-foreground">
             Scan for nearby devices, take control, and record sessions to replay later - all running
             directly from your browser over Web Bluetooth.

app/(app)/stats/page.tsx

@@ -27,7 +27,7 @@ export default async function StatsPage() {
       </div>
 
       <Tabs defaultValue="sessions">
-        <TabsList>
+        <TabsList className="bp-glass">
           <TabsTrigger value="sessions">Sessions</TabsTrigger>
           <TabsTrigger value="devices">Devices</TabsTrigger>
           <TabsTrigger value="recordings">Recordings</TabsTrigger>

app/globals.css

@@ -127,13 +127,46 @@
     @apply border-border outline-ring/50;
     }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
     }
   html {
     @apply font-sans;
     }
 }
 
+/* Animated signature-sweep background - sits behind everything; cards use
+   .bp-glass (translucent + blurred) so it shines through instead of being
+   fully hidden behind an opaque card surface. */
+body {
+  background-color: var(--background);
+  background-image:
+    radial-gradient(ellipse 80% 60% at 15% 10%, color-mix(in srgb, #ff6fb0 32%, transparent), transparent 60%),
+    radial-gradient(ellipse 70% 60% at 85% 25%, color-mix(in srgb, #4f7fe0 28%, transparent), transparent 60%),
+    radial-gradient(ellipse 75% 65% at 50% 100%, color-mix(in srgb, #b34bde 30%, transparent), transparent 60%);
+  background-repeat: no-repeat;
+  background-size: 140% 140%;
+  background-attachment: fixed;
+  animation: bp-bg-drift 24s ease-in-out infinite;
+}
+
+@keyframes bp-bg-drift {
+  0% {
+    background-position: 0% 0%, 100% 0%, 50% 100%;
+  }
+  50% {
+    background-position: 20% 20%, 80% 30%, 60% 80%;
+  }
+  100% {
+    background-position: 0% 0%, 100% 0%, 50% 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body {
+    animation: none;
+  }
+}
+
 /* Signature pink -> purple -> blue sweep (matches app/icon.svg), used for
    the wordmark and one hero moment - not smeared across every surface. */
 .bp-gradient-text {
@@ -147,17 +180,20 @@
   background: linear-gradient(135deg, #ff6fb0, #b34bde 50%, #4f7fe0);
 }
 
-/* Console-module surface: hairline border + a soft inset top highlight,
+/* Console-module surface: translucent + blurred so the animated background
-   standing in for backdrop-blur glassmorphism. */
+   sweep shines through, with a hairline border and soft inset top highlight. */
 .bp-glass {
-  background: var(--card);
+  background: color-mix(in srgb, var(--card) 55%, transparent);
+  backdrop-filter: blur(20px) saturate(150%);
   border: 1px solid var(--border);
   box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 8%, transparent);
   transition:
     border-color 0.2s ease,
-    box-shadow 0.2s ease;
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
 }
 .bp-glass:hover {
+  background: color-mix(in srgb, var(--card) 62%, transparent);
   border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
   box-shadow:
     inset 0 1px 0 color-mix(in srgb, var(--foreground) 10%, transparent),
@@ -201,6 +237,47 @@
   letter-spacing: 0.01em;
 }
 
+/* BrandMark's animated variant (dashboard hero): the heart glyph beats, the
+   EKG-style curve glows in the primary accent instead of plain white. */
+@keyframes bp-mark-heartbeat {
+  0%,
+  100% {
+    opacity: 0.22;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.75;
+    transform: scale(1.1);
+  }
+}
+.bp-mark-heart {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: bp-mark-heartbeat 1.8s ease-in-out infinite;
+}
+@keyframes bp-mark-curve-glow {
+  0%,
+  100% {
+    filter: drop-shadow(0 0 1px color-mix(in srgb, var(--primary) 50%, transparent));
+  }
+  50% {
+    filter:
+      drop-shadow(0 0 5px color-mix(in srgb, var(--primary) 100%, transparent))
+      drop-shadow(0 0 10px color-mix(in srgb, var(--primary) 70%, transparent));
+  }
+}
+.bp-mark-curve {
+  stroke: #fff;
+  animation: bp-mark-curve-glow 1.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bp-mark-heart,
+  .bp-mark-curve {
+    animation: none;
+  }
+}
+
 @keyframes bp-pulse-glow {
   0%,
   100% {

app/icon.svg

@@ -7,16 +7,18 @@
     </linearGradient>
   </defs>
   <rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGrad)" />
-  <path
+  <g transform="translate(0 0.7)">
-    d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
+    <path
-    fill="rgba(255,255,255,0.22)"
+      d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
-  />
+      fill="rgba(255,255,255,0.22)"
-  <polyline
+    />
-    points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
+    <polyline
-    fill="none"
+      points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
-    stroke="#ffffff"
+      fill="none"
-    stroke-width="1.7"
+      stroke="#ffffff"
-    stroke-linecap="round"
+      stroke-width="1.7"
-    stroke-linejoin="round"
+      stroke-linecap="round"
-  />
+      stroke-linejoin="round"
+    />
+  </g>
 </svg>

app/layout.tsx

@@ -1,12 +1,12 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Inter, Space_Grotesk, JetBrains_Mono } from "next/font/google";
+import { Inter, Sora, JetBrains_Mono } from "next/font/google";
 import { cn } from "@/lib/utils";
 import { ThemeProvider } from "@/components/layout/ThemeProvider";
 import { Toaster } from "@/components/ui/sonner";
 
 const inter = Inter({ subsets: ["latin"], variable: "--font-sans" });
-const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-display" });
+const sora = Sora({ subsets: ["latin"], variable: "--font-display" });
 const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-mono" });
 
 export const metadata: Metadata = {
@@ -19,7 +19,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html
       lang="en"
       suppressHydrationWarning
-      className={cn("font-sans", inter.variable, spaceGrotesk.variable, jetbrainsMono.variable)}
+      className={cn("font-sans", inter.variable, sora.variable, jetbrainsMono.variable)}
     >
       <body>
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>

app/login/page.tsx

@@ -13,7 +13,7 @@ export default function LoginPage() {
         <CardHeader>
           <div className="flex items-center gap-2">
             <BrandMark size={32} />
-            <CardTitle className="font-heading bp-gradient-text text-2xl">Sexy</CardTitle>
+            <CardTitle className="font-heading text-2xl">Sexy</CardTitle>
           </div>
           <CardDescription>Enter the shared access secret to continue.</CardDescription>
         </CardHeader>

components/control/RecordControls.tsx

@@ -28,7 +28,7 @@ export function RecordControls({ active, elapsedLabel, disabled, busy, onStart,
   }
 
   return (
-    <Button onClick={onStart} disabled={disabled || busy} size="sm">
+    <Button onClick={onStart} disabled={disabled || busy}>
       <Circle className="size-3.5" /> Start session
     </Button>
   );

components/layout/BrandMark.tsx

@@ -3,10 +3,12 @@ import { cn } from "@/lib/utils";
 interface BrandMarkProps {
   size?: number;
   className?: string;
+  /** Beats the heart glyph and makes the curve glow - used for the dashboard hero mark. */
+  animated?: boolean;
 }
 
 /** Inline twin of app/icon.svg (the favicon) - kept as markup, not an <img>, so it can be sized/animated with CSS. */
-export function BrandMark({ size = 28, className }: BrandMarkProps) {
+export function BrandMark({ size = 28, className, animated = false }: BrandMarkProps) {
   return (
     <svg
       width={size}
@@ -25,18 +27,22 @@ export function BrandMark({ size = 28, className }: BrandMarkProps) {
         </linearGradient>
       </defs>
       <rect x="1" y="1" width="30" height="30" rx="9" fill="url(#bpGradMark)" />
-      <path
+      <g transform="translate(0 0.7)">
-        d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
+        <path
-        fill="rgba(255,255,255,0.22)"
+          d="M16 22.6c-.3 0-.5-.1-.7-.3C11.7 19 8 15.6 8 12.3 8 9.9 9.9 8 12.3 8c1.3 0 2.6.6 3.4 1.7.1.1.2.1.3 0 .8-1.1 2.1-1.7 3.4-1.7C21.8 8 23.7 9.9 23.7 12.3c0 3.3-3.7 6.7-7.3 10-.2.2-.4.3-.7.3z"
-      />
+          fill="rgba(255,255,255,0.22)"
-      <polyline
+          className={cn(animated && "bp-mark-heart")}
-        points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
+        />
-        fill="none"
+        <polyline
-        stroke="#ffffff"
+          points="6,15 10,15 12,9 15,21 18,13 20,15 26,15"
-        strokeWidth={1.7}
+          fill="none"
-        strokeLinecap="round"
+          stroke="#ffffff"
-        strokeLinejoin="round"
+          strokeWidth={1.7}
-      />
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn(animated && "bp-mark-curve")}
+        />
+      </g>
     </svg>
   );
 }

components/layout/Breadcrumbs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronRight, House } from "lucide-react";
+
+const SECTION_LABELS: Record<string, string> = {
+  control: "Control",
+  recordings: "Recordings",
+  sessions: "Sessions",
+  stats: "Stats",
+  devices: "Devices",
+};
+
+const LEAF_LABELS: Record<string, string> = {
+  replay: "Replay",
+};
+
+export function Breadcrumbs() {
+  const pathname = usePathname();
+  const segments = pathname.split("/").filter(Boolean);
+
+  if (segments.length === 0) {
+    return null;
+  }
+
+  const crumbs = segments.reduce<{ label: string; href: string }[]>((acc, segment) => {
+    const href = `${acc.at(-1)?.href ?? ""}/${segment}`;
+    const label = /^\d+$/.test(segment) ? `#${segment}` : (LEAF_LABELS[segment] ?? SECTION_LABELS[segment] ?? segment);
+    return [...acc, { label, href }];
+  }, []);
+
+  return (
+    <nav aria-label="Breadcrumb" className="bp-glass mb-6 flex w-fit items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-muted-foreground">
+      <Link href="/" className="flex items-center hover:text-foreground" aria-label="Dashboard">
+        <House className="size-3.5" />
+      </Link>
+      {crumbs.map((crumb, i) => {
+        const isLast = i === crumbs.length - 1;
+        return (
+          <span key={crumb.href} className="flex items-center gap-1.5">
+            <ChevronRight className="size-3.5 text-muted-foreground/50" />
+            {isLast ? (
+              <span className="font-medium text-foreground">{crumb.label}</span>
+            ) : (
+              <Link href={crumb.href} className="hover:text-foreground">
+                {crumb.label}
+              </Link>
+            )}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}

components/layout/Footer.tsx

@@ -0,0 +1,32 @@
+export function Footer() {
+  const year = new Date().getFullYear();
+
+  return (
+    <footer className="mx-auto w-full max-w-6xl px-4 py-6">
+      <div className="flex flex-col items-center gap-1 text-center text-xs text-muted-foreground">
+        <p>
+          Made with <span aria-hidden="true">💜</span> by{" "}
+          <a
+            href="https://dev.pivoine.art/valknar/sexy"
+            target="_blank"
+            rel="noreferrer noopener"
+            className="underline underline-offset-2 hover:text-foreground"
+          >
+            Valknar
+          </a>
+        </p>
+        <p>
+          &copy; {year} Sexy · Powered by{" "}
+          <a
+            href="https://buttplug.io/"
+            target="_blank"
+            rel="noreferrer noopener"
+            className="underline underline-offset-2 hover:text-foreground"
+          >
+            Buttplug.io
+          </a>
+        </p>
+      </div>
+    </footer>
+  );
+}

components/layout/NavBar.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
@@ -45,6 +46,7 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
 export function NavBar() {
   const { theme, setTheme } = useTheme();
   const router = useRouter();
+  const [menuOpen, setMenuOpen] = useState(false);
 
   async function handleLogout() {
     await fetch("/api/auth/logout", { method: "POST" });
@@ -57,7 +59,7 @@ export function NavBar() {
       <div className="mx-auto flex h-14 max-w-6xl items-center gap-3 px-4">
         <Link href="/" className="mr-2 flex items-center gap-2">
           <BrandMark size={26} />
-          <span className="font-heading bp-gradient-text text-lg font-semibold">Sexy</span>
+          <span className="font-heading text-lg font-semibold">Sexy</span>
         </Link>
 
         <nav className="hidden items-center gap-1 md:flex">
@@ -79,7 +81,7 @@ export function NavBar() {
             <LogOut className="size-4" />
           </Button>
 
-          <Sheet>
+          <Sheet open={menuOpen} onOpenChange={setMenuOpen}>
             <SheetTrigger asChild>
               <Button variant="ghost" size="icon" className="md:hidden" aria-label="Open menu">
                 <Menu className="size-4" />
@@ -88,7 +90,7 @@ export function NavBar() {
             <SheetContent side="right" className="w-64">
               <SheetTitle className="px-4 pt-4">Menu</SheetTitle>
               <nav className="flex flex-col gap-1 p-4">
-                <NavLinks />
+                <NavLinks onNavigate={() => setMenuOpen(false)} />
               </nav>
             </SheetContent>
           </Sheet>

components/recordings/ReplayPlayer.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
@@ -32,7 +31,6 @@ function formatTime(ms: number): string {
 }
 
 export function ReplayPlayer({ recordingId }: { recordingId: number }) {
-  const router = useRouter();
   const scanning = useButtplugStore((s) => s.scanning);
   const devices = useButtplugStore((s) => s.devices);
   const setActuatorValue = useButtplugStore((s) => s.setActuatorValue);
@@ -289,10 +287,6 @@ export function ReplayPlayer({ recordingId }: { recordingId: number }) {
         onCancel={() => setShowRemap(false)}
         onConfirm={(mapping) => void handleConfirmRemap(mapping)}
       />
-
-      <Button variant="ghost" size="sm" onClick={() => router.push("/recordings")}>
-        Back to recordings
-      </Button>
     </div>
   );
 }

components/stats/DeviceUsageTable.tsx

@@ -1,3 +1,4 @@
+import { Card, CardContent } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 
 export interface DeviceUsageRow {
@@ -12,33 +13,41 @@ export interface DeviceUsageRow {
 
 export function DeviceUsageTable({ devices }: { devices: DeviceUsageRow[] }) {
   if (devices.length === 0) {
-    return <p className="text-sm text-muted-foreground">No device activity yet.</p>;
+    return (
+      <Card className="bp-glass">
+        <CardContent className="py-6 text-sm text-muted-foreground">No device activity yet.</CardContent>
+      </Card>
+    );
   }
 
   return (
-    <Table>
+    <Card className="bp-glass">
-      <TableHeader>
+      <CardContent>
-        <TableRow>
+        <Table>
-          <TableHead>Device</TableHead>
+          <TableHeader>
-          <TableHead>Sessions</TableHead>
+            <TableRow>
-          <TableHead>Active time</TableHead>
+              <TableHead>Device</TableHead>
-          <TableHead>Commands</TableHead>
+              <TableHead>Sessions</TableHead>
-          <TableHead>Last used</TableHead>
+              <TableHead>Active time</TableHead>
-        </TableRow>
+              <TableHead>Commands</TableHead>
-      </TableHeader>
+              <TableHead>Last used</TableHead>
-      <TableBody>
+            </TableRow>
-        {devices.map((d) => (
+          </TableHeader>
-          <TableRow key={d.deviceId}>
+          <TableBody>
-            <TableCell className="font-medium">{d.displayName ?? d.bleName}</TableCell>
+            {devices.map((d) => (
-            <TableCell className="bp-readout">{d.sessionCount}</TableCell>
+              <TableRow key={d.deviceId}>
-            <TableCell className="bp-readout">{(d.totalActiveMs / 60_000).toFixed(1)}m</TableCell>
+                <TableCell className="font-medium">{d.displayName ?? d.bleName}</TableCell>
-            <TableCell className="bp-readout">{d.commandCount}</TableCell>
+                <TableCell className="bp-readout">{d.sessionCount}</TableCell>
-            <TableCell className="bp-readout text-muted-foreground">
+                <TableCell className="bp-readout">{(d.totalActiveMs / 60_000).toFixed(1)}m</TableCell>
-              {d.lastUsedAt ? new Date(d.lastUsedAt).toLocaleString() : "Never"}
+                <TableCell className="bp-readout">{d.commandCount}</TableCell>
-            </TableCell>
+                <TableCell className="bp-readout text-muted-foreground">
-          </TableRow>
+                  {d.lastUsedAt ? new Date(d.lastUsedAt).toLocaleString() : "Never"}
-        ))}
+                </TableCell>
-      </TableBody>
+              </TableRow>
-    </Table>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
   );
 }

components/stats/RecordingLibraryStats.tsx

@@ -35,26 +35,30 @@ export function RecordingLibraryStats({ stats }: { stats: RecordingLibrarySummar
       </div>
 
       {stats.list.length > 0 && (
-        <Table>
+        <Card className="bp-glass">
-          <TableHeader>
+          <CardContent>
-            <TableRow>
+            <Table>
-              <TableHead>Recording</TableHead>
+              <TableHeader>
-              <TableHead>Plays</TableHead>
+                <TableRow>
-              <TableHead>Last played</TableHead>
+                  <TableHead>Recording</TableHead>
-            </TableRow>
+                  <TableHead>Plays</TableHead>
-          </TableHeader>
+                  <TableHead>Last played</TableHead>
-          <TableBody>
+                </TableRow>
-            {stats.list.map((r) => (
+              </TableHeader>
-              <TableRow key={r.id}>
+              <TableBody>
-                <TableCell className="font-medium">{r.name}</TableCell>
+                {stats.list.map((r) => (
-                <TableCell className="bp-readout">{r.playCount}</TableCell>
+                  <TableRow key={r.id}>
-                <TableCell className="bp-readout text-muted-foreground">
+                    <TableCell className="font-medium">{r.name}</TableCell>
-                  {r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
+                    <TableCell className="bp-readout">{r.playCount}</TableCell>
-                </TableCell>
+                    <TableCell className="bp-readout text-muted-foreground">
-              </TableRow>
+                      {r.lastPlayedAt ? new Date(r.lastPlayedAt).toLocaleString() : "Never"}
-            ))}
+                    </TableCell>
-          </TableBody>
+                  </TableRow>
-        </Table>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
       )}
     </div>
   );

components/stats/SessionsSummaryCards.tsx

@@ -40,9 +40,11 @@ export function SessionsSummaryCards({ summary }: { summary: SessionsSummary })
           </CardContent>
         </Card>
       </div>
-      <p className="text-sm text-muted-foreground">
+      <Card className="bp-glass">
-        {liveCount} live · {replayCount} replay
+        <CardContent className="py-3 text-sm text-muted-foreground">
-      </p>
+          {liveCount} live · {replayCount} replay
+        </CardContent>
+      </Card>
       {summary.durationPerDevice.length > 0 && (
         <Card className="bp-glass">
           <CardHeader>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sexy",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "scripts": {
     "dev": "next dev",