diff --git a/src/components/GeneratorCard.astro b/src/components/GeneratorCard.astro
index b301bdb..9f54261 100644
--- a/src/components/GeneratorCard.astro
+++ b/src/components/GeneratorCard.astro
@@ -20,6 +20,7 @@ const icons: Record<string, string> = {
   'circle-dollar-sign': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 18V6"/></svg>`,
   'list': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" x2="21" y1="6" y2="6"/><line x1="8" x2="21" y1="12" y2="12"/><line x1="8" x2="21" y1="18" y2="18"/><line x1="3" x2="3.01" y1="6" y2="6"/><line x1="3" x2="3.01" y1="12" y2="12"/><line x1="3" x2="3.01" y1="18" y2="18"/></svg>`,
   'fingerprint': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/><path d="M2 12a10 10 0 0 1 18-6"/><path d="M2 17c1 .5 2.25 1 4 1 1.5 0 3-.5 4-1"/><path d="M20 12c0 2-.5 4.5-2 6"/><path d="M7 13.02c0 2.38 0 5.5 1 7.48"/><path d="M8.5 8.5A5 5 0 0 1 17 12"/></svg>`,
+  'pie-chart': `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>`,
 };
 ---
 
diff --git a/src/components/generators/WheelSpinner.astro b/src/components/generators/WheelSpinner.astro
new file mode 100644
index 0000000..a09e087
--- /dev/null
+++ b/src/components/generators/WheelSpinner.astro
@@ -0,0 +1,338 @@
+---
+// Wheel of Fortune spinner — canvas-based, vanilla JS, no libraries
+---
+
+<div id="wheel-spinner" class="mt-8">
+
+  <!-- Items input -->
+  <div class="flex flex-col gap-3">
+    <div>
+      <label for="ws-items" class="block text-sm font-medium text-zinc-400 mb-1">
+        Items <span class="text-zinc-600">(one per line, 2–24)</span>
+      </label>
+      <textarea
+        id="ws-items"
+        rows="6"
+        class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-zinc-100 text-sm font-mono focus:outline-none focus:border-[#534AB7] focus:ring-1 focus:ring-[#534AB7] transition-colors resize-y"
+      >Alice
+Bob
+Carol
+Dave
+Eve
+Frank</textarea>
+    </div>
+    <div class="flex items-center gap-3">
+      <button
+        id="ws-update-btn"
+        type="button"
+        class="px-4 py-2 text-sm font-semibold border border-zinc-700 text-zinc-300 rounded-lg hover:border-[#534AB7] hover:text-zinc-100 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] cursor-pointer"
+      >
+        Update wheel
+      </button>
+      <p id="ws-error" role="alert" aria-live="polite" class="text-sm text-red-500 hidden"></p>
+    </div>
+  </div>
+
+  <!-- Wheel area -->
+  <div class="flex flex-col items-center mt-8 gap-6">
+    <div class="relative w-full max-w-[480px]" id="ws-wheel-wrap">
+      <!-- Pointer: triangle pointing down at top-center of wheel -->
+      <div
+        id="ws-pointer"
+        class="absolute left-1/2 top-0 z-10 -translate-x-1/2 -translate-y-1/2"
+        style="width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:24px solid #534AB7;filter:drop-shadow(0 2px 8px rgba(83,74,183,0.6));"
+        aria-hidden="true"
+      ></div>
+      <canvas
+        id="ws-canvas"
+        class="block w-full"
+        aria-label="Wheel of fortune"
+      ></canvas>
+    </div>
+
+    <button
+      id="ws-spin-btn"
+      type="button"
+      class="w-full sm:w-auto px-10 py-3 bg-[#534AB7] text-white font-semibold rounded-lg hover:bg-[#4740a0] active:bg-[#3d3990] focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 transition-colors duration-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+    >
+      Spin
+    </button>
+  </div>
+
+  <!-- Result card (hidden until first spin) -->
+  <div id="ws-result-card" class="hidden mt-10 flex flex-col items-center gap-3" aria-live="polite">
+    <p class="text-xs font-semibold uppercase tracking-widest text-zinc-500">Winner</p>
+    <span id="ws-result-text" class="text-3xl sm:text-4xl font-bold text-zinc-100 text-center break-words max-w-full"></span>
+    <button
+      id="ws-copy-btn"
+      type="button"
+      class="inline-flex items-center gap-1.5 text-xs font-medium text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
+    >
+      <span id="ws-copy-label">Copy</span>
+      <span id="ws-copy-icon" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
+          <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
+        </svg>
+      </span>
+      <span id="ws-check-icon" class="hidden text-[#534AB7]" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M20 6 9 17l-5-5"/>
+        </svg>
+      </span>
+    </button>
+  </div>
+
+</div>
+
+<style>
+  @keyframes ws-pop {
+    from { transform: scale(0.6); opacity: 0; }
+    to   { transform: scale(1);   opacity: 1; }
+  }
+  .ws-pop { animation: ws-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
+</style>
+
+<script>
+  const COLORS = ['#534AB7','#0F6E56','#993C1D','#185FA5','#854F0B','#993556','#3B6D11','#A32D2D'];
+  const TAU = 2 * Math.PI;
+
+  const textarea   = document.getElementById('ws-items')       as HTMLTextAreaElement;
+  const updateBtn  = document.getElementById('ws-update-btn')  as HTMLButtonElement;
+  const errorEl    = document.getElementById('ws-error')       as HTMLParagraphElement;
+  const canvas     = document.getElementById('ws-canvas')      as HTMLCanvasElement;
+  const spinBtn    = document.getElementById('ws-spin-btn')    as HTMLButtonElement;
+  const resultCard = document.getElementById('ws-result-card') as HTMLDivElement;
+  const resultText = document.getElementById('ws-result-text') as HTMLSpanElement;
+  const copyBtn    = document.getElementById('ws-copy-btn')    as HTMLButtonElement;
+  const copyLabel  = document.getElementById('ws-copy-label')  as HTMLSpanElement;
+  const copyIcon   = document.getElementById('ws-copy-icon')   as HTMLSpanElement;
+  const checkIcon  = document.getElementById('ws-check-icon')  as HTMLSpanElement;
+  const wheelWrap  = document.getElementById('ws-wheel-wrap')  as HTMLDivElement;
+
+  const ctx = canvas.getContext('2d')!;
+  let items: string[] = ['Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank'];
+  let currentRotation = 0;
+  let isSpinning = false;
+  let copyRevertTimer: ReturnType<typeof setTimeout> | null = null;
+
+  // ── Canvas sizing ────────────────────────────────────────────────
+  function resize() {
+    const size = Math.min(wheelWrap.offsetWidth, 480);
+    canvas.width = size;
+    canvas.height = size;
+    draw(currentRotation);
+  }
+  new ResizeObserver(resize).observe(wheelWrap);
+  resize();
+
+  // ── Drawing ──────────────────────────────────────────────────────
+  function clampText(text: string, maxWidth: number): string {
+    if (ctx.measureText(text).width <= maxWidth) return text;
+    let s = text;
+    while (s.length > 0 && ctx.measureText(s + '…').width > maxWidth) s = s.slice(0, -1);
+    return s + '…';
+  }
+
+  function draw(rotation: number) {
+    const size = canvas.width;
+    const r = size / 2 - 6;
+    const n = items.length;
+    const seg = TAU / n;
+
+    ctx.clearRect(0, 0, size, size);
+    ctx.save();
+    ctx.translate(size / 2, size / 2);
+
+    for (let i = 0; i < n; i++) {
+      const a0 = -Math.PI / 2 + i * seg + rotation;
+      const a1 = a0 + seg;
+
+      // fill
+      ctx.beginPath();
+      ctx.moveTo(0, 0);
+      ctx.arc(0, 0, r, a0, a1);
+      ctx.closePath();
+      ctx.fillStyle = COLORS[i % COLORS.length];
+      ctx.fill();
+
+      // divider
+      ctx.strokeStyle = 'rgba(255,255,255,0.13)';
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+
+      // label
+      const mid = a0 + seg / 2;
+      const fontSize = Math.max(9, Math.min(14, Math.floor(r * seg * 0.4)));
+      ctx.save();
+      ctx.rotate(mid);
+      ctx.textAlign = 'right';
+      ctx.fillStyle = 'rgba(255,255,255,0.92)';
+      ctx.font = `bold ${fontSize}px 'Space Grotesk', sans-serif`;
+      const label = clampText(items[i], r * 0.54);
+      ctx.fillText(label, r - 10, fontSize * 0.38);
+      ctx.restore();
+    }
+
+    // outer ring
+    ctx.beginPath();
+    ctx.arc(0, 0, r, 0, TAU);
+    ctx.strokeStyle = 'rgba(255,255,255,0.2)';
+    ctx.lineWidth = 3;
+    ctx.stroke();
+
+    // center hub
+    ctx.beginPath();
+    ctx.arc(0, 0, 15, 0, TAU);
+    ctx.fillStyle = '#18181b';
+    ctx.fill();
+    ctx.strokeStyle = 'rgba(255,255,255,0.22)';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+
+    ctx.restore();
+  }
+
+  // ── Items ────────────────────────────────────────────────────────
+  function parseItems(): string[] | null {
+    const lines = textarea.value.split('\n').map(l => l.trim()).filter(Boolean);
+    if (lines.length < 2)  { showError('Add at least 2 items.'); return null; }
+    if (lines.length > 24) { showError('Maximum 24 items.'); return null; }
+    clearError();
+    return lines;
+  }
+
+  function showError(msg: string) { errorEl.textContent = msg; errorEl.classList.remove('hidden'); }
+  function clearError()           { errorEl.textContent = '';  errorEl.classList.add('hidden');    }
+
+  updateBtn.addEventListener('click', () => {
+    const parsed = parseItems();
+    if (parsed) { items = parsed; draw(currentRotation); }
+  });
+
+  // ── Spin ─────────────────────────────────────────────────────────
+  spinBtn.addEventListener('click', () => {
+    if (isSpinning) return;
+    const parsed = parseItems();
+    if (!parsed) return;
+    items = parsed;
+    draw(currentRotation);
+
+    const n = items.length;
+    const seg = TAU / n;
+    const winnerIdx = Math.floor(Math.random() * n);
+
+    // Desired phase: rotation value (mod TAU) that puts center of winner at top (-π/2)
+    // midAngle of seg i = -π/2 + (i + 0.5)*seg + rotation → want ≡ -π/2 (mod TAU)
+    // → rotation ≡ -(i + 0.5)*seg (mod TAU)
+    const desiredPhase = (-(winnerIdx + 0.5) * seg % TAU + TAU) % TAU;
+    const currentPhase = ((currentRotation % TAU) + TAU) % TAU;
+    let delta = (desiredPhase - currentPhase + TAU) % TAU;
+    if (delta < 0.5) delta += TAU; // avoid near-zero spin
+
+    // Small jitter so it doesn't always stop dead-center
+    const jitter = (Math.random() - 0.5) * seg * 0.55;
+    const fullTurns = 5 + Math.floor(Math.random() * 3);
+    const totalDelta = fullTurns * TAU + delta + jitter;
+
+    const startRot = currentRotation;
+    const duration = 4000 + Math.random() * 2000;
+    const t0 = performance.now();
+
+    isSpinning = true;
+    spinBtn.disabled = true;
+    resultCard.classList.add('hidden');
+
+    (function animate(now: number) {
+      const p = Math.min((now - t0) / duration, 1);
+      const eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
+      currentRotation = startRot + totalDelta * eased;
+      draw(currentRotation);
+
+      if (p < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        currentRotation = startRot + totalDelta;
+        isSpinning = false;
+        spinBtn.disabled = false;
+        showResult(items[winnerIdx]);
+        spawnConfetti();
+      }
+    })(t0);
+  });
+
+  // ── Result ───────────────────────────────────────────────────────
+  function showResult(winner: string) {
+    resultText.textContent = winner;
+    resultCard.classList.remove('hidden');
+    resultText.classList.remove('ws-pop');
+    void resultText.offsetWidth; // reflow to restart animation
+    resultText.classList.add('ws-pop');
+    copyLabel.textContent = 'Copy';
+    copyIcon.classList.remove('hidden');
+    checkIcon.classList.add('hidden');
+  }
+
+  copyBtn.addEventListener('click', async () => {
+    const value = resultText.textContent?.trim();
+    if (!value) return;
+    await navigator.clipboard.writeText(value);
+    copyIcon.classList.add('hidden');
+    checkIcon.classList.remove('hidden');
+    copyLabel.textContent = 'Copied';
+    if (copyRevertTimer) clearTimeout(copyRevertTimer);
+    copyRevertTimer = setTimeout(() => {
+      checkIcon.classList.add('hidden');
+      copyIcon.classList.remove('hidden');
+      copyLabel.textContent = 'Copy';
+    }, 1500);
+  });
+
+  // ── Confetti ─────────────────────────────────────────────────────
+  function spawnConfetti() {
+    const cr = canvas.getBoundingClientRect();
+    const wr = wheelWrap.getBoundingClientRect();
+    const cx = cr.left - wr.left + cr.width / 2;
+    const cy = cr.top  - wr.top  + cr.height / 2;
+
+    type Particle = { el: HTMLDivElement; x: number; y: number; vx: number; vy: number };
+    const particles: Particle[] = [];
+
+    for (let i = 0; i < 60; i++) {
+      const el = document.createElement('div');
+      const w = 4 + Math.random() * 6;
+      const h = 4 + Math.random() * 6;
+      el.style.cssText = `position:absolute;width:${w}px;height:${h}px;` +
+        `background:${COLORS[i % COLORS.length]};border-radius:1px;` +
+        `pointer-events:none;left:${cx}px;top:${cy}px;will-change:transform,opacity;`;
+      wheelWrap.appendChild(el);
+
+      const angle = Math.random() * TAU;
+      const speed = 4 + Math.random() * 7;
+      particles.push({
+        el, x: cx, y: cy,
+        vx: Math.cos(angle) * speed,
+        vy: -(Math.abs(Math.sin(angle)) * speed + 2 + Math.random() * 4),
+      });
+    }
+
+    const dur = 2500;
+    const t0 = performance.now();
+    const gravity = 0.2;
+
+    (function tick(now: number) {
+      const elapsed = now - t0;
+      if (elapsed >= dur) { particles.forEach(p => p.el.remove()); return; }
+      const opacity = 1 - elapsed / dur;
+      particles.forEach(p => {
+        p.vy += gravity;
+        p.vx *= 0.99;
+        p.x += p.vx;
+        p.y += p.vy;
+        p.el.style.transform = `translate(${p.x - cx}px,${p.y - cy}px) rotate(${p.x * 2}deg)`;
+        p.el.style.opacity = String(Math.max(0, opacity));
+      });
+      requestAnimationFrame(tick);
+    })(t0);
+  }
+</script>
diff --git a/src/data/generators.ts b/src/data/generators.ts
index 7175e3b..f4b23d2 100644
--- a/src/data/generators.ts
+++ b/src/data/generators.ts
@@ -90,4 +90,13 @@ export const generators: Generator[] = [
     seoTitle: 'UUID Generator — UUID v4, Hex & Base64 Tokens | Randify',
     seoDescription: 'Generate random UUID v4, hex tokens, or base64 strings online. Cryptographically secure, runs in your browser. Free UUID and token generator.',
   },
+  {
+    slug: 'wheel',
+    title: 'Spin the Wheel',
+    description: 'Add your items, spin the wheel, and let chance decide.',
+    icon: 'pie-chart',
+    status: 'live',
+    seoTitle: 'Spin the Wheel — Random Picker | Randify',
+    seoDescription: 'Spin a customizable wheel of fortune to pick a random winner, choice, or option. Add your own items and let the wheel decide.',
+  },
 ];
diff --git a/src/pages/generators/wheel.astro b/src/pages/generators/wheel.astro
new file mode 100644
index 0000000..55f057b
--- /dev/null
+++ b/src/pages/generators/wheel.astro
@@ -0,0 +1,77 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import WheelSpinner from '../../components/generators/WheelSpinner.astro';
+import AdBanner from '../../components/AdBanner.astro';
+import SeoBlock from '../../components/SeoBlock.astro';
+import { generators } from '../../data/generators';
+
+const generator = generators.find((g) => g.slug === 'wheel')!;
+---
+
+<BaseLayout
+  title={generator.seoTitle}
+  description={generator.seoDescription}
+>
+  <div class="max-w-2xl mx-auto px-4 py-12 sm:py-20">
+    <nav aria-label="Breadcrumb" class="mb-10">
+      <a
+        href="/"
+        class="inline-flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-200 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#534AB7] rounded"
+        aria-label="Back to all generators"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m15 18-6-6 6-6"/>
+        </svg>
+        All generators
+      </a>
+    </nav>
+
+    <header class="mb-2">
+      <div class="flex items-center gap-2 mb-4">
+        <span
+          class="inline-block w-2.5 h-2.5 rounded-full bg-[#534AB7]"
+          aria-hidden="true"
+        ></span>
+        <span class="text-sm font-medium text-zinc-400 uppercase tracking-widest">randify</span>
+      </div>
+      <h1 class="text-3xl sm:text-4xl font-bold text-zinc-100">
+        {generator.title}
+      </h1>
+      <p class="mt-2 text-base text-zinc-400">{generator.description}</p>
+    </header>
+
+    <main>
+      <WheelSpinner />
+    </main>
+
+    <div class="mt-12 flex justify-center">
+      <AdBanner size="tile" />
+    </div>
+
+    <SeoBlock
+      howTo={[
+        'Type your items into the text box — one per line.',
+        'Click "Update wheel" to apply changes.',
+        'Hit "Spin" and watch the wheel decide.',
+        'Copy the result or spin again.',
+      ]}
+      whenTo={[
+        'Picking a winner for a giveaway or raffle.',
+        'Deciding whose turn it is in a game or meeting.',
+        'Choosing a random activity, movie, or restaurant.',
+        'Any decision you want to leave to chance.',
+      ]}
+    />
+  </div>
+</BaseLayout>