Web: redesign, logo, PWA, QR codes, Spotify guidance

- Album-art-tinted cards that crossfade on song change, equalizer bars,
  live avatar rings, drifting ambient colour, Space Grotesk display font,
  brand purple-to-blue gradient from the logo
- Feed cards rise in and glide to new positions (motion); respects
  reduced-motion
- New logo as nav mark, favicon and Apple touch icon
- Installable PWA: manifest, maskable icons, small service worker
  (cached build assets + offline page), security headers
- Show-QR-code on your own profile; centred profile header with stats
- Settings explains connecting Spotify via Last.fm or ListenBrainz

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MzFywujuH9TiuXbr9vjoX8

apps/web/Dockerfile

@@ -31,6 +31,7 @@ ENV NODE_ENV=production \
     HOSTNAME=0.0.0.0
 COPY --from=builder --chown=node:node /app/apps/web/.next/standalone ./
 COPY --from=builder --chown=node:node /app/apps/web/.next/static ./apps/web/.next/static
+COPY --from=builder --chown=node:node /app/apps/web/public ./apps/web/public
 USER node
 EXPOSE 3737
 HEALTHCHECK --interval=10s --timeout=3s --start-period=10s --retries=3 \

apps/web/next.config.ts

@@ -7,6 +7,27 @@ const config: NextConfig = {
   output: 'standalone',
   // Monorepo: trace files from the repo root so the shared package is included.
   outputFileTracingRoot: fileURLToPath(new URL('../..', import.meta.url)),
+  async headers() {
+    return [
+      {
+        source: '/(.*)',
+        headers: [
+          { key: 'X-Content-Type-Options', value: 'nosniff' },
+          { key: 'X-Frame-Options', value: 'DENY' },
+          { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
+        ],
+      },
+      {
+        // The service worker must never be cached, or updates would never reach users.
+        source: '/sw.js',
+        headers: [
+          { key: 'Content-Type', value: 'application/javascript; charset=utf-8' },
+          { key: 'Cache-Control', value: 'no-cache, no-store, must-revalidate' },
+          { key: 'Content-Security-Policy', value: "default-src 'self'; script-src 'self'" },
+        ],
+      },
+    ];
+  },
 };
 
 export default config;

apps/web/package.json

@@ -15,10 +15,11 @@
     "typescript": "~6.0.3"
   },
   "dependencies": {
+    "@musicshare/shared": "*",
+    "motion": "^14.0.0",
     "next": "^16.3.8",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "swr": "^2.5.1",
+    "swr": "^2.5.1"
-    "@musicshare/shared": "*"
   }
 }

apps/web/public/offline.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#07070b" />
+    <title>musicshare · offline</title>
+    <style>
+      body {
+        margin: 0;
+        min-height: 100vh;
+        display: grid;
+        place-items: center;
+        background: radial-gradient(circle at 20% 10%, #3b1170 0, transparent 45%),
+          radial-gradient(circle at 90% 90%, #0f3f86 0, transparent 50%), #07070b;
+        color: #f4f3fa;
+        font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+        text-align: center;
+        padding: 1.5rem;
+      }
+      img { width: 88px; height: 88px; border-radius: 22px; }
+      h1 { font-size: 1.6rem; margin: 1rem 0 0.4rem; }
+      p { color: #9b99ae; margin: 0 0 1.5rem; }
+      button {
+        font: inherit; font-weight: 600; color: #fff; border: 0; border-radius: 999px; padding: 0.7rem 1.4rem; cursor: pointer;
+        background: linear-gradient(135deg, #7b2ff7, #5b4cf0, #2f8cff);
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <img src="/icon-192.png" alt="" />
+      <h1>You're offline</h1>
+      <p>musicshare needs a connection to see what your friends are playing.</p>
+      <button onclick="location.reload()">Try again</button>
+    </main>
+  </body>
+</html>

apps/web/public/sw.js

@@ -0,0 +1,49 @@
+// musicshare service worker.
+// Deliberately small: live data must always come from the network, so we only
+// cache Next.js's immutable build assets, and show an offline page when a
+// navigation fails. (Web push notifications will hook in here later.)
+const VERSION = 'v1';
+const STATIC_CACHE = `static-${VERSION}`;
+const OFFLINE_URL = '/offline.html';
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(caches.open(STATIC_CACHE).then((cache) => cache.addAll([OFFLINE_URL, '/icon-192.png'])));
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) => Promise.all(keys.filter((k) => k !== STATIC_CACHE).map((k) => caches.delete(k))))
+      .then(() => self.clients.claim()),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  if (request.method !== 'GET') return;
+  const url = new URL(request.url);
+  if (url.origin !== self.location.origin) return; // API calls, artwork, etc.: straight to the network
+
+  // Hashed build assets never change: cache first.
+  if (url.pathname.startsWith('/_next/static/')) {
+    event.respondWith(
+      caches.match(request).then(
+        (hit) =>
+          hit ||
+          fetch(request).then((res) => {
+            const copy = res.clone();
+            caches.open(STATIC_CACHE).then((cache) => cache.put(request, copy));
+            return res;
+          }),
+      ),
+    );
+    return;
+  }
+
+  // Pages: always fresh; offline page if the network is gone.
+  if (request.mode === 'navigate') {
+    event.respondWith(fetch(request).catch(() => caches.match(OFFLINE_URL)));
+  }
+});

apps/web/src/app/globals.css

@@ -1,133 +1,230 @@
 :root {
-  --bg: #0e0f13;
+  --bg: #07070b;
-  --surface: #171920;
+  --surface: rgba(255, 255, 255, 0.045);
-  --surface-2: #20232c;
+  --surface-solid: #12121a;
-  --border: #2a2e39;
+  --surface-2: rgba(255, 255, 255, 0.08);
-  --text: #eceef3;
+  --border: rgba(255, 255, 255, 0.09);
-  --muted: #9097a6;
+  --border-strong: rgba(255, 255, 255, 0.16);
-  --accent: #7c5cff;
+  --text: #f4f3fa;
+  --muted: #9b99ae;
+  /* Brand: the logo's purple-to-blue. */
+  --accent: #7c4dff;
+  --accent-2: #2f8cff;
+  --grad: linear-gradient(135deg, #7b2ff7 0%, #5b4cf0 50%, #2f8cff 100%);
   --accent-text: #fff;
-  --live: #3ddc84;
+  --live: #34d399;
-  --danger: #ff5c6c;
+  --pin: #fbbf24;
-  --radius: 14px;
+  --danger: #fb7185;
+  --radius: 20px;
+  --font-display: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
+  --font-body: var(--font-inter), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   color-scheme: dark;
 }
 
 * { box-sizing: border-box; }
+html { background: var(--bg); }
 body {
   margin: 0;
+  min-height: 100vh;
   background: var(--bg);
   color: var(--text);
-  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  font: 15px/1.55 var(--font-body);
+  -webkit-font-smoothing: antialiased;
 }
+
+/* Slowly drifting colour behind everything, so the app never feels static. */
+.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
+.ambient::before, .ambient::after {
+  content: ''; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
+  filter: blur(90px); opacity: 0.34;
+}
+.ambient::before { background: #6d28d9; top: -25vmax; left: -15vmax; animation: drift-a 28s ease-in-out infinite alternate; }
+.ambient::after { background: #1d6fe0; bottom: -30vmax; right: -20vmax; animation: drift-b 34s ease-in-out infinite alternate; }
+@keyframes drift-a { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
+@keyframes drift-b { to { transform: translate(-16vmax, -10vmax) scale(0.9); } }
+
 a { color: inherit; }
-h1 { font-size: 1.6rem; margin: 0; }
+h1, h2, .brand, .display { font-family: var(--font-display); letter-spacing: -0.02em; }
-h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
+h1 { font-size: 1.85rem; margin: 0; line-height: 1.15; }
+h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
 input, textarea, select {
   width: 100%;
-  padding: 0.6rem 0.75rem;
+  padding: 0.7rem 0.85rem;
-  border-radius: 10px;
+  border-radius: 12px;
   border: 1px solid var(--border);
   background: var(--surface-2);
   color: var(--text);
   font: inherit;
+  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+}
+input:focus, textarea:focus, select:focus {
+  outline: none; border-color: var(--accent); background: rgba(124, 77, 255, 0.08);
+  box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.2);
 }
-input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
 
-.container { max-width: 680px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
+.container { max-width: 680px; margin: 0 auto; padding: 1.75rem 1rem 5rem; }
 .stack { display: flex; flex-direction: column; gap: 1rem; }
 .row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
 .grow { flex: 1; min-width: 0; }
 .muted { color: var(--muted); }
 .error { color: var(--danger); margin: 0; }
-.notice { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 1rem; margin: 0; }
+.notice {
-.section-label { margin: 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
+  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0.85rem 1rem; margin: 0;
-.narrow { max-width: 420px; margin: 2rem auto; }
+  backdrop-filter: blur(16px);
+}
+.section-label { margin: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 700; }
+.narrow { max-width: 420px; margin: 2.5rem auto; }
 
 .nav {
   display: flex; justify-content: space-between; align-items: center;
-  padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--border);
+  padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border);
-  position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(8px); z-index: 10;
+  position: sticky; top: 0; background: rgba(7, 7, 11, 0.65); backdrop-filter: blur(18px) saturate(1.4); z-index: 10;
 }
-.brand { font-weight: 800; letter-spacing: -0.02em; text-decoration: none; font-size: 1.1rem; }
+.brand { font-weight: 700; text-decoration: none; font-size: 1.2rem; display: inline-flex; align-items: center; gap: 0.5rem; }
-.nav-links { display: flex; gap: 1rem; align-items: center; }
+.brand-logo { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 4px 14px -4px rgba(47, 140, 255, 0.6); }
-.nav-links a { text-decoration: none; color: var(--muted); }
+.nav-links { display: flex; gap: 1.1rem; align-items: center; }
+.nav-links a { text-decoration: none; color: var(--muted); transition: color 0.2s; }
 .nav-links a:hover { color: var(--text); }
 .nav-links a.btn-primary { color: var(--accent-text); }
-.nav-links a.support-link { color: #ff7aa8; }
+.nav-links a.support-link { color: #f9a8d4; }
 @media (max-width: 480px) { .nav-links a.support-link { display: none; } }
 
 .btn {
-  display: inline-flex; align-items: center; justify-content: center;
+  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
-  padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--border);
+  padding: 0.55rem 1.05rem; border-radius: 999px; border: 1px solid var(--border-strong);
   background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600;
   text-decoration: none; cursor: pointer; white-space: nowrap;
+  transition: transform 0.25s var(--spring), border-color 0.2s, background 0.2s, box-shadow 0.25s, filter 0.2s;
 }
-.btn:hover { border-color: var(--muted); }
+.btn:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
-.btn:disabled { opacity: 0.6; cursor: default; }
+.btn:active { transform: scale(0.96); }
-.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
+.btn:disabled { opacity: 0.55; cursor: default; transform: none; }
-.btn-primary:hover { border-color: var(--accent); filter: brightness(1.1); }
+.btn-primary {
+  background: var(--grad); border-color: transparent; color: var(--accent-text);
+  box-shadow: 0 6px 22px -6px rgba(91, 76, 240, 0.6);
+}
+.btn-primary:hover { background: var(--grad); filter: brightness(1.08); box-shadow: 0 10px 28px -6px rgba(47, 140, 255, 0.65); }
 .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
-.link-button { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; }
+.btn-small { padding: 0.3rem 0.75rem; font-size: 0.82rem; }
+.link-button { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; transition: color 0.2s; }
 .link-button:hover { color: var(--text); }
 
-.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
+.card {
-.card-pinned { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
+  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
-.pin { background: none; border: 0; cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--muted); padding: 0.1rem 0.2rem; }
+  padding: 1.1rem; backdrop-filter: blur(20px) saturate(1.3); overflow: hidden;
-.pin:hover, .pin.pinned { color: #f5c542; }
-.card-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
-.form { display: flex; flex-direction: column; gap: 0.75rem; }
-.form label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; font-size: 0.9rem; }
-
-.user-chip { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 600; }
-.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
-.avatar-empty { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-weight: 700; }
-
-.status { font-size: 0.85rem; color: var(--muted); }
-.status-live { color: var(--live); }
-.status-live::before {
-  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
-  background: var(--live); margin-right: 6px; animation: pulse 1.6s ease-in-out infinite;
 }
-@keyframes pulse { 50% { opacity: 0.35; } }
+.card-header { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; }
+.card-header .user-chip { flex-shrink: 0; }
+.card-header > .row { flex-wrap: nowrap; min-width: 0; justify-content: flex-end; margin-left: auto; }
+.card-header .status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: inline-block; }
+.card-header .status .eq { vertical-align: -1px; margin-right: 0.4rem; }
+.card-header .pin { flex-shrink: 0; }
+.form { display: flex; flex-direction: column; gap: 0.8rem; }
+.form label { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 600; font-size: 0.9rem; }
+
+/* Now-playing cards take their colour from the album art. */
+.np-card { border-color: rgba(255, 255, 255, 0.11); }
+.np-card.pinned { border-color: rgba(251, 191, 36, 0.45); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.15), 0 18px 40px -20px rgba(251, 191, 36, 0.35); }
+.np-backdrop {
+  position: absolute; inset: -40%; z-index: 0; background-size: cover; background-position: center;
+  filter: blur(40px) saturate(2.2) brightness(1.1); opacity: 0.6; transform: scale(1.1); transition: opacity 0.6s;
+}
+.np-card.playing .np-backdrop { animation: breathe 9s ease-in-out infinite alternate; }
+@keyframes breathe { to { transform: scale(1.3) rotate(8deg); opacity: 0.75; } }
+.np-card::after {
+  content: ''; position: absolute; inset: 0; z-index: 0;
+  background: linear-gradient(180deg, rgba(7, 7, 11, 0.05), rgba(7, 7, 11, 0.45));
+}
+.np-card > *:not(.np-backdrop) { position: relative; z-index: 1; }
+
+.pin {
+  background: none; border: 0; cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--muted);
+  padding: 0.15rem 0.25rem; transition: color 0.2s;
+}
+.pin:hover, .pin.pinned { color: var(--pin); }
+.pin.pinned { text-shadow: 0 0 14px rgba(251, 191, 36, 0.6); }
+
+.user-chip { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-weight: 600; }
+.user-chip:hover .user-name { text-decoration: underline; }
+.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; }
+.avatar-empty { display: grid; place-items: center; background: linear-gradient(135deg, #4a1278, #1872cf); color: #fff; font-weight: 700; font-family: var(--font-display); }
+/* A spinning gradient ring while someone is listening. */
+.avatar-ring { position: relative; display: inline-grid; place-items: center; border-radius: 50%; padding: 2px; flex-shrink: 0; }
+.avatar-ring.live::before {
+  content: ''; position: absolute; inset: 0; border-radius: 50%;
+  background: conic-gradient(from 0deg, #7b2ff7, #2f8cff, #34d399, #7b2ff7); animation: spin 3.5s linear infinite;
+}
+.avatar-ring > * { position: relative; border: 2px solid var(--bg); border-radius: 50%; }
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.status { font-size: 0.85rem; color: var(--muted); display: inline-flex; align-items: center; gap: 0.45rem; }
+.status-live { color: var(--live); font-weight: 600; }
+
+/* Equalizer bars: dancing while playing, resting when paused. */
+.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
+.eq span { width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; transform: scaleY(0.3); }
+.eq.playing span { animation: eq 1s ease-in-out infinite alternate; }
+.eq.playing span:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
+.eq.playing span:nth-child(3) { animation-duration: 1.2s; animation-delay: -0.6s; }
+.eq.playing span:nth-child(4) { animation-duration: 0.85s; animation-delay: -0.15s; }
+@keyframes eq { 0% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0.45); } }
 
 .track { display: flex; gap: 1rem; align-items: flex-start; }
-.artwork { width: 104px; height: 104px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
+.artwork {
-.artwork-empty { display: grid; place-items: center; font-size: 2rem; color: var(--muted); }
+  width: 112px; height: 112px; border-radius: 14px; object-fit: cover; flex-shrink: 0; background: var(--surface-2);
-.artwork-sm { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
+  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
+  transition: transform 0.4s var(--spring);
+}
+.track:hover .artwork { transform: scale(1.04) rotate(-1deg); }
+.artwork-empty { display: grid; place-items: center; font-size: 2rem; color: rgba(255, 255, 255, 0.85); background: linear-gradient(135deg, #4a1278, #1872cf); }
+.artwork-sm { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; flex-shrink: 0; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.8); }
 .track-body { min-width: 0; flex: 1; }
-.track-title { font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.track-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.track-artist { color: var(--text); opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.track-artist { color: var(--text); opacity: 0.82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.track-actions { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; margin-top: 0.65rem; }
+.track-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.8rem; }
-.service-link { font-size: 0.8rem; color: var(--muted); text-decoration: none; }
+.service-link {
-.service-link:hover { color: var(--text); text-decoration: underline; }
+  font-size: 0.76rem; color: var(--text); text-decoration: none; padding: 0.2rem 0.55rem; border-radius: 999px;
-.service-link.inexact { opacity: 0.6; }
+  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.2s, transform 0.25s var(--spring);
+}
+.service-link:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }
+.service-link.inexact { opacity: 0.55; }
 
-.profile-header { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
+.profile-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 0.5rem 0 0.75rem; }
-.profile-header p { margin: 0.4rem 0 0; }
+.profile-header h1 { font-size: 2.1rem; }
-.featured blockquote { margin: 0.85rem 0 0; padding-left: 0.85rem; border-left: 3px solid var(--accent); font-style: italic; }
+.profile-header .bio { margin: 0; max-width: 30rem; }
+.stats { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
+.stats span { padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); font-size: 0.88rem; }
+.stats strong { color: var(--text); font-family: var(--font-display); }
+.featured blockquote {
+  margin: 0.9rem 0 0; padding: 0.6rem 0.9rem; border-left: 3px solid transparent; font-style: italic;
+  border-image: var(--grad) 1; background: rgba(255, 255, 255, 0.04);
+}
 
 .search { position: relative; }
-.search-results { list-style: none; margin: 0.4rem 0 0; padding: 0.35rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
+.search-results { list-style: none; margin: 0.5rem 0 0; padding: 0.4rem; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 14px; }
-.search-results li { padding: 0.35rem 0.4rem; }
+.search-results li { padding: 0.4rem 0.45rem; border-radius: 10px; transition: background 0.15s; }
+.search-results li:hover { background: var(--surface-2); }
 .result { display: flex; gap: 0.6rem; align-items: center; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; width: 100%; text-align: left; padding: 0; }
-.result:hover { color: var(--accent); }
 .recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
-.recent-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0; text-decoration: none; border-radius: 8px; }
+.recent-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.4rem; text-decoration: none; border-radius: 12px; transition: background 0.15s, transform 0.25s var(--spring); }
-a.recent-row:hover .recent-title { color: var(--accent); }
+a.recent-row:hover { background: var(--surface-2); transform: translateX(3px); }
 .recent li + li { border-top: 1px solid var(--border); }
 .recent-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
 .recent-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .recent-title { font-weight: 600; }
-.credit { margin: 0.6rem 0 0; font-size: 0.8rem; }
 .recent-time { font-size: 0.8rem; white-space: nowrap; }
 .artwork-sm.artwork-empty { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
+.qr-card { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
+.qr { border-radius: 14px; box-shadow: 0 20px 50px -20px rgba(47, 140, 255, 0.6); }
+.credit { margin: 0.6rem 0 0; font-size: 0.8rem; }
 .picked { display: flex; gap: 0.75rem; align-items: center; }
 
 .connections { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; }
-.connection { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
+.connection { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
 .connection form input { width: 160px; }
 .connection.disabled { opacity: 0.55; }
+.steps { margin: 0.5rem 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
 .jellyfin-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.6rem; }
 .jellyfin-form input[name='serverUrl'] { grid-column: 1 / -1; }
 .jellyfin-form .btn { justify-self: start; }
@@ -135,15 +232,25 @@ a.recent-row:hover .recent-title { color: var(--accent); }
 .webhook summary { cursor: pointer; color: var(--muted); }
 .webhook p { margin: 0.35rem 0; }
 .webhook code { font-size: 0.75rem; background: var(--surface-2); padding: 0.3rem 0.5rem; border-radius: 6px; word-break: break-all; flex: 1; min-width: 0; }
-.btn-small { padding: 0.25rem 0.65rem; font-size: 0.8rem; }
 @media (max-width: 480px) { .jellyfin-form { grid-template-columns: 1fr; } }
 
-.hero { padding: 3rem 0; display: flex; flex-direction: column; gap: 1rem; }
+.hero { padding: 4.5rem 0 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
-.hero h1 { font-size: 2.4rem; letter-spacing: -0.03em; line-height: 1.1; }
+.hero h1 { font-size: 3.2rem; letter-spacing: -0.04em; line-height: 1.02; }
-.hero p { color: var(--muted); font-size: 1.1rem; margin: 0; }
+.gradient-text {
+  background: linear-gradient(90deg, #a78bfa, #7dd3fc, #60a5fa, #a78bfa); background-size: 300% 100%;
+  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 8s linear infinite;
+}
+@keyframes shimmer { to { background-position: 300% 0; } }
+.hero p { color: var(--muted); font-size: 1.15rem; margin: 0; max-width: 34rem; }
+.hero .eq { height: 42px; gap: 5px; color: #8b9dff; }
+.hero .eq span { width: 8px; border-radius: 4px; }
 
 @media (max-width: 480px) {
-  .artwork { width: 76px; height: 76px; }
+  .artwork { width: 84px; height: 84px; }
-  .nav-links { gap: 0.7rem; font-size: 0.9rem; }
+  .nav-links { gap: 0.75rem; font-size: 0.9rem; }
-  .hero h1 { font-size: 1.9rem; }
+  .hero h1 { font-size: 2.3rem; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
 }

apps/web/src/app/layout.tsx

@@ -1,18 +1,34 @@
-import type { Metadata } from 'next';
+import type { Metadata, Viewport } from 'next';
+import { Inter, Space_Grotesk } from 'next/font/google';
 import { Nav } from '@/components/Nav';
+import { Providers } from '@/components/Providers';
 import './globals.css';
 
+const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' });
+const spaceGrotesk = Space_Grotesk({ subsets: ['latin'], variable: '--font-space-grotesk', display: 'swap' });
+
 export const metadata: Metadata = {
   title: 'musicshare',
   description: "See what your friends are listening to, and play it on your own service.",
+  applicationName: 'musicshare',
+  // iOS "Add to Home Screen": open full-screen with a dark status bar.
+  appleWebApp: { capable: true, title: 'musicshare', statusBarStyle: 'black-translucent' },
+};
+
+export const viewport: Viewport = {
+  themeColor: '#07070b',
+  viewportFit: 'cover',
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" className={`${inter.variable} ${spaceGrotesk.variable}`}>
       <body>
+        <div className="ambient" aria-hidden />
+        <Providers>
           <Nav />
           <main className="container">{children}</main>
+        </Providers>
       </body>
     </html>
   );

apps/web/src/app/manifest.ts

@@ -0,0 +1,22 @@
+import type { MetadataRoute } from 'next';
+
+/** Makes the website installable ("Add to Home Screen") as a standalone app. Needs HTTPS in production. */
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'musicshare',
+    short_name: 'musicshare',
+    description: 'See what your friends are listening to, and play it on your own service.',
+    start_url: '/',
+    scope: '/',
+    display: 'standalone',
+    orientation: 'portrait',
+    background_color: '#07070b',
+    theme_color: '#07070b',
+    categories: ['music', 'social'],
+    icons: [
+      { src: '/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
+      { src: '/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
+      { src: '/icon-maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
+    ],
+  };
+}

apps/web/src/app/page.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { AnimatePresence, motion } from 'motion/react';
 import Link from 'next/link';
 import useSWR from 'swr';
 import { sortFeed, type FeedItemDTO, type ProfileDTO } from '@musicshare/shared';
+import { Equalizer } from '@/components/Equalizer';
 import { NowPlayingCard } from '@/components/NowPlayingCard';
 import { SharingControls } from '@/components/SharingControls';
 import { UserSearch } from '@/components/UserSearch';
@@ -70,26 +72,45 @@ function Feed() {
       {feed?.length === 0 && (
         <p className="muted">Nothing yet. Follow some friends and their music will show up here live.</p>
       )}
-      {feed?.map((np) => (
+      {/* Cards rise in on load and glide to new positions when someone pins or starts playing. */}
-        <NowPlayingCard
+      <AnimatePresence initial={true}>
+        {feed?.map((np, i) => (
+          <motion.div
             key={np.user.id}
+            layout
+            initial={{ opacity: 0, y: 24, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.96 }}
+            transition={{ type: 'spring', stiffness: 380, damping: 32, delay: Math.min(i, 8) * 0.05 }}
+          >
+            <NowPlayingCard
               np={np}
               preferred={me?.preferredService}
               pinned={Boolean(np.pinnedAt)}
               onTogglePin={() => togglePin(np)}
             />
+          </motion.div>
         ))}
+      </AnimatePresence>
     </div>
   );
 }
 
 function Landing() {
   return (
-    <section className="hero">
+    <motion.section
-      <h1>See what your friends are playing.</h1>
+      className="hero"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
+    >
+      <Equalizer playing />
+      <h1>
+        See what your friends are <span className="gradient-text">playing.</span>
+      </h1>
       <p>
-        Connect Spotify, Last.fm, ListenBrainz and more. When a friend on Apple Music is playing something you like,
+        Share what you play on Spotify, Apple Music, YouTube Music, Plex and more. When a friend on Apple Music is
-        one tap opens it in your app.
+        playing something you like, one tap opens it in your app.
       </p>
       <div className="row">
         <Link href="/register" className="btn btn-primary">
@@ -99,6 +120,6 @@ function Landing() {
           Log in
         </Link>
       </div>
-    </section>
+    </motion.section>
   );
 }

apps/web/src/app/settings/page.tsx

@@ -99,9 +99,7 @@ function ProfileForm({ me }: { me: MeDTO }) {
 function Connections() {
   const params = useSearchParams();
   const { data: connections = [], mutate } = useSWR<ConnectionDTO[]>('/connections', fetcher);
-  const errorParam = params.get('error');
+  const [error, setError] = useState<string | null>(params.get('error'));
-  const spotifyLimited = errorParam === 'spotify_limited';
-  const [error, setError] = useState<string | null>(spotifyLimited ? null : errorParam);
   const byProvider = new Map(connections.map((c) => [c.provider, c]));
 
   const run = async (fn: () => Promise<unknown>) => {
@@ -114,7 +112,7 @@ function Connections() {
     }
   };
 
-  const connectOAuth = (provider: 'spotify' | 'plex' | 'lastfm') =>
+  const connectOAuth = (provider: 'plex' | 'lastfm') =>
     run(async () => {
       const { url } = await api<{ url: string }>(`/connections/${provider}/authorize`, { body: { client: 'web' } });
       window.location.href = url;
@@ -153,24 +151,50 @@ function Connections() {
       <p className="muted">Connect where you listen. Your friends see what you&apos;re playing in real time.</p>
       {error && <p className="error">{error}</p>}
       <div className="connections">
-        {(['spotify', 'plex'] as const).map((p) => (
+        {/* Spotify caps new apps at a handful of accounts; Spotify's own Last.fm/ListenBrainz link works for everyone. */}
-          <div className="connection" key={p}>
+        <div className="connection spotify-how">
           <div>
-              <strong>{SERVICE_LABELS[p]}</strong>
+            <strong>Spotify</strong>
-              <div>{status(p) ?? (p === 'plex' && <span className="muted">Music you play from your Plex servers</span>)}</div>
+            <div className="muted">
-              <WebhookHint connection={byProvider.get(p)} />
+              Spotify sends everything you play to <strong>Last.fm</strong> or <strong>ListenBrainz</strong>, and we share it from
+              there. Connect one of them below, then link Spotify on their site:
             </div>
-            {byProvider.get(p)?.status === 'active' ? (
+            <ol className="steps">
-              <button className="btn" onClick={() => disconnect(p)}>
+              <li>
+                <strong>Last.fm</strong> (most popular): sign in below, then{' '}
+                <a href={SPOTIFY_LINK_PAGES.lastfm} target="_blank" rel="noreferrer">
+                  connect “Spotify Scrobbling” on Last.fm
+                </a>
+                .
+              </li>
+              <li>
+                <strong>ListenBrainz</strong> (open source): add your username below, then{' '}
+                <a href={SPOTIFY_LINK_PAGES.listenbrainz} target="_blank" rel="noreferrer">
+                  connect Spotify on ListenBrainz
+                </a>
+                .
+              </li>
+            </ol>
+            <div className="muted">On Android, the musicshare app shares Spotify automatically.</div>
+          </div>
+        </div>
+
+        <div className="connection">
+          <div>
+            <strong>Plex</strong>
+            <div>{status('plex') ?? <span className="muted">Music you play from your Plex servers</span>}</div>
+            <WebhookHint connection={byProvider.get('plex')} />
+          </div>
+          {byProvider.get('plex')?.status === 'active' ? (
+            <button className="btn" onClick={() => disconnect('plex')}>
               Disconnect
             </button>
           ) : (
-              <button className="btn btn-primary" onClick={() => connectOAuth(p)}>
+            <button className="btn btn-primary" onClick={() => connectOAuth('plex')}>
-                {byProvider.has(p) ? 'Reconnect' : 'Connect'}
+              {byProvider.has('plex') ? 'Reconnect' : 'Connect'}
             </button>
           )}
         </div>
-        ))}
 
         <div className="connection">
           <div className="grow">
@@ -203,16 +227,6 @@ function Connections() {
             .
           </div>
         ))}
-        {spotifyLimited && (
-          <div className="notice">
-            <strong>Spotify sign-in is limited during beta.</strong> Spotify only lets a few accounts sign in to new apps
-            directly. You can still share Spotify through Last.fm: sign in to Last.fm below, then{' '}
-            <a href="https://www.last.fm/settings/applications" target="_blank" rel="noreferrer">
-              connect “Spotify Scrobbling” on Last.fm
-            </a>
-            .
-          </div>
-        )}
         {(['lastfm', 'listenbrainz'] as const).map((p) => (
           <div className="connection" key={p}>
             <div>

apps/web/src/app/u/[username]/page.tsx

@@ -1,12 +1,14 @@
 'use client';
 
+import { motion } from 'motion/react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { useState } from 'react';
 import useSWR from 'swr';
-import type { ProfileDTO } from '@musicshare/shared';
+import { profileUrl, type ProfileDTO } from '@musicshare/shared';
 import { Avatar } from '@/components/Avatar';
 import { NowPlayingCard } from '@/components/NowPlayingCard';
+import { QrCode } from '@/components/QrCode';
 import { RecentPlays } from '@/components/RecentPlays';
 import { TrackCard } from '@/components/TrackCard';
 import { api, fetcher, useMe } from '@/lib/api';
@@ -17,6 +19,7 @@ export default function ProfilePage() {
   const { me } = useMe();
   const { data: profile, error, mutate } = useSWR<ProfileDTO>(`/users/${username}`, fetcher);
   const [busy, setBusy] = useState(false);
+  const [showQr, setShowQr] = useState(false);
 
   // Live updates arrive for people you follow (and yourself)
   useRealtime(Boolean(me), (msg) => {
@@ -53,19 +56,35 @@ export default function ProfilePage() {
 
   return (
     <div className="stack">
-      <section className="profile-header">
+      <motion.section
-        <Avatar user={user} size={72} />
+        className="profile-header"
-        <div className="grow">
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+      >
+        <Avatar user={user} size={96} live={Boolean(profile.nowPlaying?.isPlaying)} />
+        <div>
           <h1>{user.displayName ?? user.username}</h1>
-          <div className="muted">
+          <div className="muted">@{user.username}</div>
-            @{user.username} · {profile.followerCount} followers · {profile.followingCount} following
         </div>
-          {user.bio && <p>{user.bio}</p>}
+        <div className="stats">
+          <span>
+            <strong>{profile.followerCount}</strong> {profile.followerCount === 1 ? 'follower' : 'followers'}
+          </span>
+          <span>
+            <strong>{profile.followingCount}</strong> following
+          </span>
         </div>
+        {user.bio && <p className="bio">{user.bio}</p>}
         {profile.isSelf ? (
+          <div className="row">
+            <button className="btn" onClick={() => setShowQr((v) => !v)}>
+              {showQr ? 'Hide QR code' : 'Show QR code'}
+            </button>
             <Link href="/settings" className="btn">
               Edit profile
             </Link>
+          </div>
         ) : me ? (
           <div className="row">
             {profile.isFollowing && (
@@ -82,7 +101,14 @@ export default function ProfilePage() {
             Sign up to follow
           </Link>
         )}
+      </motion.section>
+
+      {profile.isSelf && showQr && (
+        <section className="card qr-card">
+          <QrCode value={profileUrl(window.location.origin, user.username)} size={220} />
+          <p className="muted">Friends scan this in the musicshare app (or their camera) to open your profile.</p>
         </section>
+      )}
 
       {profile.featured && (
         <section className="card featured">

apps/web/src/components/Avatar.tsx

@@ -1,12 +1,14 @@
 import type { UserSummaryDTO } from '@musicshare/shared';
 
-export function Avatar({ user, size = 40 }: { user: UserSummaryDTO; size?: number }) {
+/** `live` wraps the avatar in a spinning gradient ring (someone is listening right now). */
+export function Avatar({ user, size = 40, live }: { user: UserSummaryDTO; size?: number; live?: boolean }) {
   const label = (user.displayName ?? user.username).slice(0, 1).toUpperCase();
-  return user.avatarUrl ? (
+  const face = user.avatarUrl ? (
     <img className="avatar" src={user.avatarUrl} alt="" style={{ width: size, height: size }} />
   ) : (
     <div className="avatar avatar-empty" style={{ width: size, height: size, fontSize: size * 0.45 }}>
       {label}
     </div>
   );
+  return <span className={`avatar-ring ${live ? 'live' : ''}`}>{face}</span>;
 }

apps/web/src/components/Equalizer.tsx

@@ -0,0 +1,11 @@
+/** Four bars that dance while music is playing and rest when it isn't. */
+export function Equalizer({ playing, className = '' }: { playing: boolean; className?: string }) {
+  return (
+    <span className={`eq ${playing ? 'playing' : ''} ${className}`} aria-hidden>
+      <span />
+      <span />
+      <span />
+      <span />
+    </span>
+  );
+}

apps/web/src/components/Nav.tsx

@@ -16,6 +16,7 @@ export function Nav() {
   return (
     <nav className="nav">
       <Link href="/" className="brand">
+        <img className="brand-logo" src="/logo.png" alt="" width={30} height={30} />
         musicshare
       </Link>
       <div className="nav-links">

apps/web/src/components/NowPlayingCard.tsx

@@ -1,9 +1,10 @@
 'use client';
 
+import { AnimatePresence, motion } from 'motion/react';
 import Link from 'next/link';
-import { SERVICE_LABELS, type NowPlayingDTO, type StreamingService } from '@musicshare/shared';
+import { SERVICE_LABELS, timeAgo, type NowPlayingDTO, type StreamingService } from '@musicshare/shared';
-import { timeAgo } from '@musicshare/shared';
 import { Avatar } from './Avatar';
+import { Equalizer } from './Equalizer';
 import { TrackCard } from './TrackCard';
 
 export function NowPlayingCard({
@@ -19,42 +20,71 @@ export function NowPlayingCard({
   pinned?: boolean;
   onTogglePin?: () => void;
 }) {
+  const sourceLabel = np.sourceApp ?? SERVICE_LABELS[np.source];
   return (
-    <article className={`card ${pinned ? 'card-pinned' : ''}`}>
+    <article className={`card np-card ${pinned ? 'pinned' : ''} ${np.isPlaying ? 'playing' : ''}`}>
+      {/* The card glows with its album art; crossfades when the song changes. */}
+      <AnimatePresence initial={false}>
+        {np.track.artworkUrl && (
+          <motion.div
+            key={np.track.artworkUrl}
+            className="np-backdrop"
+            style={{ backgroundImage: `url("${np.track.artworkUrl}")` }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 0.6 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.8 }}
+          />
+        )}
+      </AnimatePresence>
       <header className="card-header">
         {showUser && (
           <Link href={`/u/${np.user.username}`} className="user-chip">
-            <Avatar user={np.user} size={28} />
+            <Avatar user={np.user} size={30} live={np.isPlaying} />
-            <span>{np.user.displayName ?? np.user.username}</span>
+            <span className="user-name">{np.user.displayName ?? np.user.username}</span>
           </Link>
         )}
         <span className="row">
           <span className={`status ${np.isPlaying ? 'status-live' : ''}`}>
+            {np.isPlaying && <Equalizer playing />}
             {np.isPlaying ? 'Listening now' : `Played ${timeAgo(np.updatedAt)}`}
             <span className="muted">
-              {' via '}
+              {' · '}
               {np.sourceUrl ? (
                 <a href={np.sourceUrl} target="_blank" rel="noreferrer">
-                  {np.sourceApp ?? SERVICE_LABELS[np.source]}
+                  {sourceLabel}
                 </a>
               ) : (
-                (np.sourceApp ?? SERVICE_LABELS[np.source])
+                sourceLabel
               )}
             </span>
           </span>
           {onTogglePin && (
-            <button
+            <motion.button
               className={`pin ${pinned ? 'pinned' : ''}`}
               onClick={onTogglePin}
               aria-pressed={pinned}
               title={pinned ? 'Unpin from top of feed' : 'Pin to top of feed'}
+              whileTap={{ scale: 0.7 }}
+              animate={pinned ? { scale: [1, 1.45, 1], rotate: [0, -18, 0] } : { scale: 1, rotate: 0 }}
+              transition={{ duration: 0.45, ease: 'easeOut' }}
             >
               {pinned ? '★' : '☆'}
-            </button>
+            </motion.button>
           )}
         </span>
       </header>
+      <AnimatePresence mode="wait" initial={false}>
+        <motion.div
+          key={np.track.id}
+          initial={{ opacity: 0, y: 12, filter: 'blur(6px)' }}
+          animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
+          exit={{ opacity: 0, y: -12, filter: 'blur(6px)' }}
+          transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
+        >
           <TrackCard track={np.track} preferred={preferred} />
+        </motion.div>
+      </AnimatePresence>
     </article>
   );
 }

apps/web/src/components/Providers.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { MotionConfig } from 'motion/react';
+import { useEffect } from 'react';
+
+/** Animations follow the OS "reduce motion" setting; registers the PWA service worker in production. */
+export function Providers({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js', { scope: '/', updateViaCache: 'none' }).catch(() => {});
+    }
+  }, []);
+  return <MotionConfig reducedMotion="user">{children}</MotionConfig>;
+}

apps/web/src/components/QrCode.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useMemo } from 'react';
+import { qrShape } from '@musicshare/shared';
+
+/** Black-on-white QR code (scanners need the contrast) with the standard 4-module quiet zone. */
+export function QrCode({ value, size = 240 }: { value: string; size?: number }) {
+  const shape = useMemo(() => qrShape(value), [value]);
+  const quiet = 4;
+  const total = shape.size + quiet * 2;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`${-quiet} ${-quiet} ${total} ${total}`}
+      role="img"
+      aria-label={`QR code for ${value}`}
+      shapeRendering="crispEdges"
+      className="qr"
+    >
+      <rect x={-quiet} y={-quiet} width={total} height={total} fill="#fff" />
+      <path d={shape.path} fill="#000" />
+    </svg>
+  );
+}