diff --git a/.claude/skills/onboarding-videos/SKILL.md b/.claude/skills/onboarding-videos/SKILL.md
new file mode 100644
index 0000000000..bc4715d8ca
--- /dev/null
+++ b/.claude/skills/onboarding-videos/SKILL.md
@@ -0,0 +1,123 @@
+---
+name: onboarding-videos
+description: Add, replace, and optimize the looping demo videos in the onboarding "welcome" bento grid (packages/ui/src/features/onboarding). Covers the ffmpeg compression workflow (the scripts/optimize-onboarding-videos.mjs wrapper), the faststart + right-size best practices that keep playback smooth, the first-frame poster convention, and how to wire a new clip into WelcomeScreen. Use when onboarding demo clips feel laggy, when a clip is being added/swapped/re-recorded, or when posters and videos drift out of sync.
+allowed-tools: Bash(node scripts/optimize-onboarding-videos.mjs:*), Bash(pnpm optimize:onboarding-videos:*), Bash(ffmpeg:*), Bash(ffprobe:*), Bash(npx biome check:*), Bash(pnpm --filter @posthog/ui typecheck:*)
+---
+
+# Onboarding bento demo videos
+
+The first onboarding step (`WelcomeScreen`) shows a bento grid of feature cards.
+A card with a `media` entry plays a short, muted, looping screen recording; cards
+without one show a static placeholder. The featured (large, top-left) card is the
+only one that plays at a time — hover just moves the highlight.
+
+| Thing | Where |
+| --- | --- |
+| Clips + posters | `packages/ui/src/features/onboarding/assets/<feature>-<light\|dark>.{mp4,jpg}` |
+| Wiring (`MEDIA` map, `startTime`) | `packages/ui/src/features/onboarding/components/WelcomeScreen.tsx` |
+| `<video>` element + play/seek logic | `packages/ui/src/features/onboarding/components/FeatureBentoCard.tsx` |
+| Optimizer script | `scripts/optimize-onboarding-videos.mjs` (`pnpm optimize:onboarding-videos`) |
+
+## Why clips need optimizing (the "it feels laggy" fix)
+
+Raw screen recordings hitch in this UI for two reasons, both fixed by re-encoding:
+
+1. **`moov` atom at the end of the file.** Without faststart the player must read
+   to EOF before it can start, so first-play and every seek stutter. We seek on
+   mount and on every loop (`FeatureBentoCard` parks the clip on `videoStartTime`),
+   so this bites constantly. Fix: `-movflags +faststart`.
+2. **Resolution far larger than it renders.** The featured slot is never wider than
+   ~500 CSS px (the grid is `max-w-[760px]`). Even at 2× retina that's ~1000px, but
+   recordings come in at ~1876px. Decoding huge frames and downscaling them — on
+   every play and during the framer-motion slot reflow — is wasted work. Fix: cap
+   width at **1000px** (which also matches the poster width exactly).
+
+Bitrate/size are usually already modest; **decode cost and startup are the lag**,
+not bytes. Don't chase file size at the expense of width/faststart.
+
+## Canonical encode target
+
+H.264 · `yuv420p` · **≤1000px wide** (keep aspect, even height) · CRF 23 ·
+`+faststart` · no audio. These live as constants at the top of
+`scripts/optimize-onboarding-videos.mjs` — change them there, not ad-hoc.
+
+## Optimize existing clips
+
+```bash
+pnpm optimize:onboarding-videos          # encode any clip not already optimized
+pnpm optimize:onboarding-videos --dry-run   # show what would change
+pnpm optimize:onboarding-videos --force     # re-encode all (after changing the target constants)
+```
+
+Requires ffmpeg (`brew install ffmpeg`). The script tags each output with a
+`comment` marker, so re-runs skip already-optimized files — it's safe to run any
+time, including right after dropping in a new clip. It rewrites files in place;
+review the `git diff --stat` and the printed before/after sizes.
+
+## Add or replace a clip
+
+1. **Record** light + dark variants at **≥1000px wide**. The optimizer downscales to
+   1000px but never upscales, so anything narrower ships soft — resolution is the one
+   thing it can't fix for you. Keep it short (~10–13s); it loops.
+2. **Name + drop** the files as `assets/<feature>-light.mp4` and
+   `assets/<feature>-dark.mp4`. Two things bite every time:
+   - Recordings almost always arrive with the **light variant unsuffixed**
+     (`foo.mp4`, only `foo-dark.mp4` is tagged). Rename it to `foo-light.mp4`.
+   - The source filename (e.g. whatever's in `~/Downloads`) is irrelevant — the
+     `<feature>` prefix must be the **media id** you'll use in `WelcomeScreen` and
+     follow the existing convention, not whatever the file was called.
+
+   No `assets.d.ts` change needed — `*.mp4`/`*.jpg` are wildcard modules.
+3. **Optimize**: `pnpm optimize:onboarding-videos`.
+4. **Make the poster** — the still shown before play. **Use the clip's first frame**
+   and leave `startTime` at 0, so the poster, the first played frame, and the loop
+   point are all the same with nothing to keep in sync:
+
+   ```bash
+   ffmpeg -y -i assets/<feature>-<theme>.mp4 \
+     -frames:v 1 -vf "scale=1000:-2:flags=lanczos" -q:v 3 \
+     assets/<feature>-<theme>.jpg
+   ```
+
+5. **Wire it up** in `WelcomeScreen.tsx`. For a *new* media id, four edits, all keyed
+   by the same slug: import the `.mp4` + `.jpg`, add the id to the `MediaId` union,
+   add its entry to the `MEDIA` map (`startTime: 0`), and set `media: "<id>"` on the
+   target `FeatureDef`.
+
+### Replacing an existing clip
+
+Keep the **same asset filename** and the wiring is untouched — none of step 5
+applies. Drop the new file over `assets/<feature>-<theme>.mp4`, run the optimizer (a
+fresh drop carries no skip-marker, so it re-encodes without `--force`), and
+**regenerate that poster** (step 4). If you replace only one theme, re-check that
+light and dark still share an aspect ratio — a clip with stray padding frames
+differently from its sibling, and the gap shows when the user toggles theme.
+
+## Poster = first frame (and startTime = 0)
+
+`FeatureBentoCard` shows the poster while a card rests, then seeks the `<video>` to
+`MEDIA[id].startTime` on mount and loops back there (not necessarily to 0). The
+simple, default contract: **the poster is the clip's first frame and `startTime` is
+0**, so the still, the first played frame, and the loop point are all identical —
+nothing to keep in sync. Keep the poster the same pixel width as the clip (1000px)
+so the poster→video swap is seamless.
+
+`startTime` can start/loop mid-clip if you ever need it (the `code-review` clip uses
+3s) — but then the poster MUST be that exact frame (`ffmpeg -ss <startTime> -i …`),
+or the still jumps the instant playback starts. Prefer the first-frame default
+unless you have a specific reason.
+
+## Verify
+
+```bash
+# clips: moov should print BEFORE mdat, width ≤ 1000:
+ffprobe -v trace <clip>.mp4 2>&1 | grep -o -m2 -E "type:'(moov|mdat)'"
+ffprobe -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 <clip>.mp4
+
+# wiring: a grown MediaId union may need a formatter reflow, so let biome fix it:
+npx biome check --write packages/ui/src/features/onboarding/components/WelcomeScreen.tsx
+pnpm --filter @posthog/ui typecheck
+```
+
+To confirm playback feels smooth in the real app, use the `test-electron-app`
+skill to drive the running onboarding flow.
diff --git a/package.json b/package.json
index a52a3cf7bb..0d8cd278c4 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "rebuild:sqlite-electron": "node scripts/rebuild-better-sqlite3-electron.mjs",
     "typecheck": "turbo typecheck",
     "boundaries": "node scripts/check-host-boundaries.mjs",
+    "optimize:onboarding-videos": "node scripts/optimize-onboarding-videos.mjs",
     "lint": "biome check --write --unsafe",
     "format": "biome format --write",
     "clean": "pnpm -r clean",
diff --git a/packages/ui/src/assets.d.ts b/packages/ui/src/assets.d.ts
index e821a9efaf..1e836df22c 100644
--- a/packages/ui/src/assets.d.ts
+++ b/packages/ui/src/assets.d.ts
@@ -12,3 +12,13 @@ declare module "*.mp3" {
   const src: string;
   export default src;
 }
+
+declare module "*.mp4" {
+  const src: string;
+  export default src;
+}
+
+declare module "*.jpg" {
+  const src: string;
+  export default src;
+}
diff --git a/packages/ui/src/features/onboarding/assets/code-review-dark.jpg b/packages/ui/src/features/onboarding/assets/code-review-dark.jpg
new file mode 100644
index 0000000000..5a9f212214
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/code-review-dark.jpg differ
diff --git a/packages/ui/src/features/onboarding/assets/code-review-dark.mp4 b/packages/ui/src/features/onboarding/assets/code-review-dark.mp4
new file mode 100644
index 0000000000..067be9b7d3
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/code-review-dark.mp4 differ
diff --git a/packages/ui/src/features/onboarding/assets/code-review-light.jpg b/packages/ui/src/features/onboarding/assets/code-review-light.jpg
new file mode 100644
index 0000000000..345a0569aa
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/code-review-light.jpg differ
diff --git a/packages/ui/src/features/onboarding/assets/code-review-light.mp4 b/packages/ui/src/features/onboarding/assets/code-review-light.mp4
new file mode 100644
index 0000000000..53e135cecf
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/code-review-light.mp4 differ
diff --git a/packages/ui/src/features/onboarding/assets/command-center-dark.jpg b/packages/ui/src/features/onboarding/assets/command-center-dark.jpg
new file mode 100644
index 0000000000..74f6f1fd69
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/command-center-dark.jpg differ
diff --git a/packages/ui/src/features/onboarding/assets/command-center-dark.mp4 b/packages/ui/src/features/onboarding/assets/command-center-dark.mp4
new file mode 100644
index 0000000000..152cc8ca60
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/command-center-dark.mp4 differ
diff --git a/packages/ui/src/features/onboarding/assets/command-center-light.jpg b/packages/ui/src/features/onboarding/assets/command-center-light.jpg
new file mode 100644
index 0000000000..b059500ef6
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/command-center-light.jpg differ
diff --git a/packages/ui/src/features/onboarding/assets/command-center-light.mp4 b/packages/ui/src/features/onboarding/assets/command-center-light.mp4
new file mode 100644
index 0000000000..a321555f14
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/command-center-light.mp4 differ
diff --git a/packages/ui/src/features/onboarding/assets/phc-context-dark.jpg b/packages/ui/src/features/onboarding/assets/phc-context-dark.jpg
new file mode 100644
index 0000000000..5cb8ae01d4
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/phc-context-dark.jpg differ
diff --git a/packages/ui/src/features/onboarding/assets/phc-context-dark.mp4 b/packages/ui/src/features/onboarding/assets/phc-context-dark.mp4
new file mode 100644
index 0000000000..519e97737e
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/phc-context-dark.mp4 differ
diff --git a/packages/ui/src/features/onboarding/assets/phc-context-light.jpg b/packages/ui/src/features/onboarding/assets/phc-context-light.jpg
new file mode 100644
index 0000000000..54702e769b
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/phc-context-light.jpg differ
diff --git a/packages/ui/src/features/onboarding/assets/phc-context-light.mp4 b/packages/ui/src/features/onboarding/assets/phc-context-light.mp4
new file mode 100644
index 0000000000..6e5db542dd
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/phc-context-light.mp4 differ
diff --git a/packages/ui/src/features/onboarding/assets/phc-harness-dark.jpg b/packages/ui/src/features/onboarding/assets/phc-harness-dark.jpg
new file mode 100644
index 0000000000..84e420b09c
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/phc-harness-dark.jpg differ
diff --git a/packages/ui/src/features/onboarding/assets/phc-harness-dark.mp4 b/packages/ui/src/features/onboarding/assets/phc-harness-dark.mp4
new file mode 100644
index 0000000000..11a7e2bbd0
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/phc-harness-dark.mp4 differ
diff --git a/packages/ui/src/features/onboarding/assets/phc-harness-light.jpg b/packages/ui/src/features/onboarding/assets/phc-harness-light.jpg
new file mode 100644
index 0000000000..c2e2aaed30
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/phc-harness-light.jpg differ
diff --git a/packages/ui/src/features/onboarding/assets/phc-harness-light.mp4 b/packages/ui/src/features/onboarding/assets/phc-harness-light.mp4
new file mode 100644
index 0000000000..b980a63350
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/phc-harness-light.mp4 differ
diff --git a/packages/ui/src/features/onboarding/assets/signals-inbox-dark.jpg b/packages/ui/src/features/onboarding/assets/signals-inbox-dark.jpg
new file mode 100644
index 0000000000..ab6351431a
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/signals-inbox-dark.jpg differ
diff --git a/packages/ui/src/features/onboarding/assets/signals-inbox-dark.mp4 b/packages/ui/src/features/onboarding/assets/signals-inbox-dark.mp4
new file mode 100644
index 0000000000..ab3d258c80
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/signals-inbox-dark.mp4 differ
diff --git a/packages/ui/src/features/onboarding/assets/signals-inbox-light.jpg b/packages/ui/src/features/onboarding/assets/signals-inbox-light.jpg
new file mode 100644
index 0000000000..3357ebb93d
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/signals-inbox-light.jpg differ
diff --git a/packages/ui/src/features/onboarding/assets/signals-inbox-light.mp4 b/packages/ui/src/features/onboarding/assets/signals-inbox-light.mp4
new file mode 100644
index 0000000000..496d9069a2
Binary files /dev/null and b/packages/ui/src/features/onboarding/assets/signals-inbox-light.mp4 differ
diff --git a/packages/ui/src/features/onboarding/components/FeatureBentoCard.css b/packages/ui/src/features/onboarding/components/FeatureBentoCard.css
index d706bb37e3..4319ee8820 100644
--- a/packages/ui/src/features/onboarding/components/FeatureBentoCard.css
+++ b/packages/ui/src/features/onboarding/components/FeatureBentoCard.css
@@ -39,6 +39,51 @@
   overflow: hidden;
 }
 
+.feature-bento-card__placeholder--media {
+  border-style: solid;
+  border-color: var(--gray-a4);
+  background: var(--gray-2);
+}
+
+.feature-bento-card__video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.feature-bento-card--selectable {
+  cursor: pointer;
+}
+
+.feature-bento-card__expand-hint {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-2);
+  background: rgba(0, 0, 0, 0.45);
+  color: white;
+  opacity: 0;
+  transform: scale(0.9);
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+  pointer-events: none;
+}
+
+.feature-bento-card--selectable:hover .feature-bento-card__expand-hint {
+  opacity: 1;
+  transform: scale(1);
+}
+
 .feature-bento-card__placeholder-grid {
   position: absolute;
   inset: 0;
diff --git a/packages/ui/src/features/onboarding/components/FeatureBentoCard.tsx b/packages/ui/src/features/onboarding/components/FeatureBentoCard.tsx
index b66ca94163..ec4bef0b2e 100644
--- a/packages/ui/src/features/onboarding/components/FeatureBentoCard.tsx
+++ b/packages/ui/src/features/onboarding/components/FeatureBentoCard.tsx
@@ -1,30 +1,114 @@
+import { ArrowsOut } from "@phosphor-icons/react";
 import { Flex, Text } from "@radix-ui/themes";
 import { motion } from "framer-motion";
-import type { ReactNode } from "react";
+import { type KeyboardEvent, type ReactNode, useEffect, useRef } from "react";
 import "./FeatureBentoCard.css";
 
 interface FeatureBentoCardProps {
   icon: ReactNode;
   title: string;
   description: string;
+  /** Highlights the card (the featured card when nothing is hovered). */
   active?: boolean;
   index?: number;
-  /** Tailwind classes controlling the cell's grid placement (e.g. "col-span-4 row-span-2"). */
-  className?: string;
+  /** Optional looping demo video shown in the placeholder area. */
+  videoSrc?: string;
+  /** Still frame shown until the video plays. Should match `videoStartTime`. */
+  posterSrc?: string;
+  /** Timestamp (seconds) the still is taken from; playback starts and loops here. */
+  videoStartTime?: number;
+  /** When true, this card's video plays. Only one card plays at a time. */
+  shouldPlay?: boolean;
+  /** Click handler that promotes this card into the large slot. */
+  onSelect?: () => void;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
 }
 
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
 export function FeatureBentoCard({
   icon,
   title,
   description,
   active = false,
   index = 0,
-  className = "",
+  videoSrc,
+  posterSrc,
+  videoStartTime = 0,
+  shouldPlay = false,
+  onSelect,
   onMouseEnter,
   onMouseLeave,
 }: FeatureBentoCardProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const selectable = Boolean(onSelect);
+
+  // Park the video on the still frame so it matches the poster, even after the
+  // browser has decoded it (poster only shows before the first play).
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !videoSrc) return;
+
+    const seekToStart = () => {
+      try {
+        video.currentTime = videoStartTime;
+      } catch {
+        // Seeking before metadata is ready is a no-op; the listener retries.
+      }
+    };
+
+    if (video.readyState >= 1) {
+      seekToStart();
+      return;
+    }
+    video.addEventListener("loadedmetadata", seekToStart, { once: true });
+    return () => video.removeEventListener("loadedmetadata", seekToStart);
+  }, [videoSrc, videoStartTime]);
+
+  // Play only when told to; otherwise rest on the still frame.
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !videoSrc) return;
+
+    if (shouldPlay && !prefersReducedMotion()) {
+      void video.play().catch(() => {
+        // Ignore: play() can reject if the element isn't ready yet.
+      });
+    } else {
+      video.pause();
+      try {
+        video.currentTime = videoStartTime;
+      } catch {
+        // Ignore: resetting before metadata is ready is a no-op.
+      }
+    }
+  }, [shouldPlay, videoSrc, videoStartTime]);
+
+  // Loop back to the still frame rather than the very start of the clip.
+  const handleVideoEnded = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.currentTime = videoStartTime;
+    if (shouldPlay && !prefersReducedMotion()) {
+      void video.play().catch(() => {});
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!selectable) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onSelect?.();
+    }
+  };
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 12 }}
@@ -32,24 +116,51 @@ export function FeatureBentoCard({
       transition={{ duration: 0.3, delay: index * 0.08 }}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      className={`feature-bento-card ${active ? "feature-bento-card--active" : ""} ${className}`}
+      onClick={selectable ? onSelect : undefined}
+      onKeyDown={selectable ? handleKeyDown : undefined}
+      role={selectable ? "button" : undefined}
+      tabIndex={selectable ? 0 : undefined}
+      aria-label={selectable ? `Show ${title}` : undefined}
+      className={`feature-bento-card h-full w-full ${active ? "feature-bento-card--active" : ""} ${selectable ? "feature-bento-card--selectable" : ""}`}
     >
-      <div className="feature-bento-card__placeholder">
-        <div
-          className="feature-bento-card__placeholder-grid"
-          aria-hidden="true"
-        />
-        <div
-          className="feature-bento-card__placeholder-glow"
-          aria-hidden="true"
-        />
-        <Flex
-          align="center"
-          justify="center"
-          className="relative z-10 text-(--gray-9)"
-        >
-          <div className="feature-bento-card__icon">{icon}</div>
-        </Flex>
+      <div
+        className={`feature-bento-card__placeholder ${videoSrc ? "feature-bento-card__placeholder--media" : ""}`}
+      >
+        {videoSrc ? (
+          <video
+            ref={videoRef}
+            className="feature-bento-card__video"
+            src={videoSrc}
+            poster={posterSrc}
+            muted
+            playsInline
+            preload="metadata"
+            onEnded={handleVideoEnded}
+          />
+        ) : (
+          <>
+            <div
+              className="feature-bento-card__placeholder-grid"
+              aria-hidden="true"
+            />
+            <div
+              className="feature-bento-card__placeholder-glow"
+              aria-hidden="true"
+            />
+            <Flex
+              align="center"
+              justify="center"
+              className="relative z-10 text-(--gray-9)"
+            >
+              <div className="feature-bento-card__icon">{icon}</div>
+            </Flex>
+          </>
+        )}
+        {selectable && (
+          <div className="feature-bento-card__expand-hint" aria-hidden="true">
+            <ArrowsOut size={13} weight="bold" />
+          </div>
+        )}
       </div>
       <Flex
         direction="column"
diff --git a/packages/ui/src/features/onboarding/components/WelcomeScreen.tsx b/packages/ui/src/features/onboarding/components/WelcomeScreen.tsx
index c405bb9021..e22d0ac68c 100644
--- a/packages/ui/src/features/onboarding/components/WelcomeScreen.tsx
+++ b/packages/ui/src/features/onboarding/components/WelcomeScreen.tsx
@@ -7,90 +7,222 @@ import {
   Tray,
 } from "@phosphor-icons/react";
 import { explorerHog } from "@posthog/ui/assets/hedgehogs";
+import codeReviewDarkPoster from "@posthog/ui/features/onboarding/assets/code-review-dark.jpg";
+import codeReviewDark from "@posthog/ui/features/onboarding/assets/code-review-dark.mp4";
+import codeReviewLightPoster from "@posthog/ui/features/onboarding/assets/code-review-light.jpg";
+import codeReviewLight from "@posthog/ui/features/onboarding/assets/code-review-light.mp4";
+import commandCenterDarkPoster from "@posthog/ui/features/onboarding/assets/command-center-dark.jpg";
+import commandCenterDark from "@posthog/ui/features/onboarding/assets/command-center-dark.mp4";
+import commandCenterLightPoster from "@posthog/ui/features/onboarding/assets/command-center-light.jpg";
+import commandCenterLight from "@posthog/ui/features/onboarding/assets/command-center-light.mp4";
+import phcContextDarkPoster from "@posthog/ui/features/onboarding/assets/phc-context-dark.jpg";
+import phcContextDark from "@posthog/ui/features/onboarding/assets/phc-context-dark.mp4";
+import phcContextLightPoster from "@posthog/ui/features/onboarding/assets/phc-context-light.jpg";
+import phcContextLight from "@posthog/ui/features/onboarding/assets/phc-context-light.mp4";
+import phcHarnessDarkPoster from "@posthog/ui/features/onboarding/assets/phc-harness-dark.jpg";
+import phcHarnessDark from "@posthog/ui/features/onboarding/assets/phc-harness-dark.mp4";
+import phcHarnessLightPoster from "@posthog/ui/features/onboarding/assets/phc-harness-light.jpg";
+import phcHarnessLight from "@posthog/ui/features/onboarding/assets/phc-harness-light.mp4";
+import signalsInboxDarkPoster from "@posthog/ui/features/onboarding/assets/signals-inbox-dark.jpg";
+import signalsInboxDark from "@posthog/ui/features/onboarding/assets/signals-inbox-dark.mp4";
+import signalsInboxLightPoster from "@posthog/ui/features/onboarding/assets/signals-inbox-light.jpg";
+import signalsInboxLight from "@posthog/ui/features/onboarding/assets/signals-inbox-light.mp4";
 import { FeatureBentoCard } from "@posthog/ui/features/onboarding/components/FeatureBentoCard";
 import { StepActions } from "@posthog/ui/features/onboarding/components/StepActions";
 import Logo from "@posthog/ui/primitives/Logo";
 import { OnboardingHogTip } from "@posthog/ui/primitives/OnboardingHogTip";
+import { useThemeStore } from "@posthog/ui/shell/themeStore";
 import { Button, Flex, Text } from "@radix-ui/themes";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { motion, type Transition } from "framer-motion";
+import {
+  type ReactNode,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+
+type MediaId =
+  | "code-review"
+  | "command-center"
+  | "phc-context"
+  | "phc-harness"
+  | "signals-inbox";
+
+interface MediaDef {
+  light: { video: string; poster: string };
+  dark: { video: string; poster: string };
+  /** Seconds into the clip the still is taken from; playback starts/loops here. */
+  startTime: number;
+}
+
+/** Demo media per feature, keyed per theme; resolved at render. */
+const MEDIA: Record<MediaId, MediaDef> = {
+  "code-review": {
+    light: { video: codeReviewLight, poster: codeReviewLightPoster },
+    dark: { video: codeReviewDark, poster: codeReviewDarkPoster },
+    startTime: 3,
+  },
+  "command-center": {
+    light: { video: commandCenterLight, poster: commandCenterLightPoster },
+    dark: { video: commandCenterDark, poster: commandCenterDarkPoster },
+    startTime: 0,
+  },
+  "phc-context": {
+    light: { video: phcContextLight, poster: phcContextLightPoster },
+    dark: { video: phcContextDark, poster: phcContextDarkPoster },
+    startTime: 0,
+  },
+  "phc-harness": {
+    light: { video: phcHarnessLight, poster: phcHarnessLightPoster },
+    dark: { video: phcHarnessDark, poster: phcHarnessDarkPoster },
+    startTime: 0,
+  },
+  "signals-inbox": {
+    light: { video: signalsInboxLight, poster: signalsInboxLightPoster },
+    dark: { video: signalsInboxDark, poster: signalsInboxDarkPoster },
+    startTime: 0,
+  },
+};
+
+interface FeatureDef {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  /** Marks a card that shows a looping demo video instead of a placeholder. */
+  media?: MediaId;
+}
 
-const FEATURES = [
+const FEATURES: FeatureDef[] = [
   {
     icon: <ChartLine size={28} />,
     title: "Product data as context",
     description:
       "Built-in context on analytics, session replays, experiments, feature flags, and more.",
-    className: "col-span-4",
+    media: "phc-context",
   },
   {
     icon: <Tray size={26} />,
     title: "Your signals inbox",
     description:
       "Automatically surfaces the highest-impact work from your product data so you always know what to do next.",
-    className: "col-span-2",
+    media: "signals-inbox",
   },
   {
     icon: <Robot size={22} />,
     title: "Your pick of Claude Code or Codex",
     description:
       "PostHog is harness-agnostic – both Anthropic and OpenAI supported.",
-    className: "col-span-2",
+    media: "phc-harness",
   },
   {
     icon: <Cloud size={22} />,
     title: "Build non-stop",
     description:
       "Run tasks in parallel across local and cloud environments - even while you're away.",
-    className: "col-span-2",
+    media: "command-center",
   },
   {
     icon: <GitPullRequest size={22} />,
     title: "Review and ship with confidence",
     description:
       "Inline diffs, AI-assisted code review and PR creation in a single flow.",
-    className: "col-span-2",
+    media: "code-review",
   },
 ];
 
+// Bento geometry (px). Cards are absolutely positioned into these slots and
+// animate between them, so the whole grid slides around rather than snapping.
+const GAP = 12;
+const ROW0_HEIGHT = 288;
+const ROW1_HEIGHT = 224;
+const ROW1_TOP = ROW0_HEIGHT + GAP;
+const GRID_HEIGHT = ROW1_TOP + ROW1_HEIGHT;
+
+interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+/** Slot rectangles for a given container width. Slot 0 is the large cell. */
+function slotRects(width: number): Rect[] {
+  const colWidth = (width - 5 * GAP) / 6;
+  const left = (col: number) => col * (colWidth + GAP);
+  const span2 = 2 * colWidth + GAP;
+  const span4 = 4 * colWidth + 3 * GAP;
+  return [
+    { x: left(0), y: 0, width: span4, height: ROW0_HEIGHT },
+    { x: left(4), y: 0, width: span2, height: ROW0_HEIGHT },
+    { x: left(0), y: ROW1_TOP, width: span2, height: ROW1_HEIGHT },
+    { x: left(2), y: ROW1_TOP, width: span2, height: ROW1_HEIGHT },
+    { x: left(4), y: ROW1_TOP, width: span2, height: ROW1_HEIGHT },
+  ];
+}
+
+/** Spring so every card glides to its new slot together. */
+const SLIDE_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 320,
+  damping: 34,
+};
+
 interface WelcomeScreenProps {
   onNext: () => void;
 }
 
-const CYCLE_INTERVAL_MS = 2500;
-const CYCLE_START_DELAY_MS = FEATURES.length * 100 + 400;
+/** Pointer events are suppressed for this long so the reflow doesn't thrash. */
+const REFLOW_MS = 550;
 
 export function WelcomeScreen({ onNext }: WelcomeScreenProps) {
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const timerRef = useRef<ReturnType<typeof setInterval>>(null);
-
-  const startCycling = useCallback(() => {
-    if (timerRef.current) clearInterval(timerRef.current);
-    timerRef.current = setInterval(() => {
-      setActiveIndex((prev) => (prev + 1) % FEATURES.length);
-    }, CYCLE_INTERVAL_MS);
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  // order[slot] = feature index currently occupying that slot.
+  const [order, setOrder] = useState(() => FEATURES.map((_, index) => index));
+  const [isReflowing, setIsReflowing] = useState(false);
+  const [gridWidth, setGridWidth] = useState(0);
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  // Measure the grid so slot rectangles stay correct and responsive.
+  useLayoutEffect(() => {
+    const element = gridRef.current;
+    if (!element) return;
+    const update = () => setGridWidth(element.clientWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    return () => observer.disconnect();
   }, []);
 
+  // Re-enable pointer events once the slide has settled.
   useEffect(() => {
-    const timeout = setTimeout(() => {
-      setActiveIndex(0);
-      startCycling();
-    }, CYCLE_START_DELAY_MS);
-
-    return () => {
-      clearTimeout(timeout);
-      if (timerRef.current) clearInterval(timerRef.current);
-    };
-  }, [startCycling]);
+    if (!isReflowing) return;
+    const timeout = setTimeout(() => setIsReflowing(false), REFLOW_MS);
+    return () => clearTimeout(timeout);
+  }, [isReflowing]);
 
   const handleMouseEnter = (index: number) => {
-    setActiveIndex(index);
-    if (timerRef.current) clearInterval(timerRef.current);
+    setHoveredIndex(index);
   };
 
   const handleMouseLeave = () => {
-    startCycling();
+    setHoveredIndex(null);
   };
 
+  // Rotate the order so the clicked card moves into the large slot and every
+  // other card shifts along with it (keeping their relative order).
+  const handleSelect = (index: number) => {
+    const slot = order.indexOf(index);
+    if (slot <= 0) return; // already in the large slot
+    setIsReflowing(true);
+    setOrder((prev) => [...prev.slice(slot), ...prev.slice(0, slot)]);
+  };
+
+  const rects = slotRects(gridWidth);
+  // Only the featured (large) card plays. Hover just moves the highlight.
+  const featuredIndex = order[0];
+
   return (
     <Flex align="center" height="100%" px="8">
       <Flex
@@ -118,20 +250,56 @@ export function WelcomeScreen({ onNext }: WelcomeScreenProps) {
               <Logo />
             </Flex>
 
-            <div className="grid w-full grid-cols-6 grid-rows-[18rem_14rem] gap-3 overflow-hidden rounded-lg">
-              {FEATURES.map((feature, index) => (
-                <FeatureBentoCard
-                  key={feature.title}
-                  icon={feature.icon}
-                  title={feature.title}
-                  description={feature.description}
-                  active={activeIndex === index}
-                  index={index}
-                  className={feature.className}
-                  onMouseEnter={() => handleMouseEnter(index)}
-                  onMouseLeave={handleMouseLeave}
-                />
-              ))}
+            <div
+              ref={gridRef}
+              className="relative w-full overflow-hidden rounded-lg"
+              style={{
+                height: GRID_HEIGHT,
+                pointerEvents: isReflowing ? "none" : undefined,
+              }}
+            >
+              {gridWidth > 0 &&
+                FEATURES.map((feature, index) => {
+                  const slot = order.indexOf(index);
+                  const rect = rects[slot];
+                  const mediaDef = feature.media
+                    ? MEDIA[feature.media]
+                    : undefined;
+                  const media = mediaDef?.[isDarkMode ? "dark" : "light"];
+                  return (
+                    <motion.div
+                      key={feature.title}
+                      className="absolute top-0 left-0"
+                      initial={false}
+                      animate={{
+                        x: rect.x,
+                        y: rect.y,
+                        width: rect.width,
+                        height: rect.height,
+                      }}
+                      transition={SLIDE_TRANSITION}
+                    >
+                      <FeatureBentoCard
+                        icon={feature.icon}
+                        title={feature.title}
+                        description={feature.description}
+                        active={
+                          index === featuredIndex && hoveredIndex === null
+                        }
+                        index={index}
+                        videoSrc={media?.video}
+                        posterSrc={media?.poster}
+                        videoStartTime={mediaDef?.startTime}
+                        shouldPlay={index === featuredIndex}
+                        onSelect={
+                          slot === 0 ? undefined : () => handleSelect(index)
+                        }
+                        onMouseEnter={() => handleMouseEnter(index)}
+                        onMouseLeave={handleMouseLeave}
+                      />
+                    </motion.div>
+                  );
+                })}
             </div>
           </Flex>
         </Flex>
diff --git a/scripts/optimize-onboarding-videos.mjs b/scripts/optimize-onboarding-videos.mjs
new file mode 100755
index 0000000000..90c12b441a
--- /dev/null
+++ b/scripts/optimize-onboarding-videos.mjs
@@ -0,0 +1,175 @@
+#!/usr/bin/env node
+// Optimize the onboarding bento-card demo videos for smooth in-app playback.
+//
+// The cards (packages/ui/src/features/onboarding) play a short looping clip in
+// a slot that never renders wider than ~500 CSS px. Raw screen recordings come
+// in at 2x+ that resolution with the moov atom at the end of the file, which
+// makes playback hitch on first play / seek / the framer-motion slot reflow.
+//
+// This re-encodes each clip to a sane width with faststart so the player can
+// begin instantly, and tags the output so re-runs skip already-optimized files.
+//
+// See .claude/skills/onboarding-videos/SKILL.md for the full workflow (posters,
+// adding a new clip, the WelcomeScreen videoStartTime contract).
+import { execFileSync } from "node:child_process";
+import { readdirSync, renameSync, statSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), "..");
+const ASSET_DIR = join(ROOT, "packages/ui/src/features/onboarding/assets");
+
+// Tuning. The poster JPGs are authored at 1000px wide; match them so the
+// poster -> first-frame seam is pixel-consistent. Bump only if the bento slot
+// grows — bigger means heavier decode for no visible gain at this size.
+const TARGET_WIDTH = 1000;
+const CRF = 23; // visually lossless for flat UI screencasts; lower = bigger.
+const PRESET = "veryslow"; // one-time encode, so spend the CPU on compression.
+// Marker written into the file's `comment` tag so re-runs are idempotent.
+const MARKER = `optimized-by=optimize-onboarding-videos w<=${TARGET_WIDTH} crf=${CRF}`;
+
+const USAGE = `optimize-onboarding-videos — re-encode onboarding demo clips for smooth playback.
+
+  node scripts/optimize-onboarding-videos.mjs            optimize clips not already optimized
+  node scripts/optimize-onboarding-videos.mjs --force    re-encode every clip (e.g. after changing TARGET_WIDTH/CRF)
+  node scripts/optimize-onboarding-videos.mjs --dry-run   report what would change, encode nothing
+
+Target: H.264 yuv420p, width<=${TARGET_WIDTH}px, CRF ${CRF}, faststart, no audio.`;
+
+const args = new Set(process.argv.slice(2));
+if (args.has("-h") || args.has("--help")) {
+  console.log(USAGE);
+  process.exit(0);
+}
+const force = args.has("--force");
+const dryRun = args.has("--dry-run");
+
+function ffprobe(file, entries, stream) {
+  const selectArgs = stream ? ["-select_streams", stream] : [];
+  return execFileSync(
+    "ffprobe",
+    [
+      "-v",
+      "error",
+      ...selectArgs,
+      "-show_entries",
+      entries,
+      "-of",
+      "default=noprint_wrappers=1:nokey=1",
+      file,
+    ],
+    { encoding: "utf8" },
+  ).trim();
+}
+
+function isOptimized(file) {
+  const comment = ffprobe(file, "format_tags=comment");
+  const width = Number(ffprobe(file, "stream=width", "v:0"));
+  return comment === MARKER && Number.isFinite(width) && width <= TARGET_WIDTH;
+}
+
+function kb(bytes) {
+  return `${(bytes / 1024).toFixed(0)} KB`;
+}
+
+function ensureFfmpeg() {
+  try {
+    execFileSync("ffmpeg", ["-version"], { stdio: "ignore" });
+    execFileSync("ffprobe", ["-version"], { stdio: "ignore" });
+  } catch {
+    console.error(
+      "ffmpeg/ffprobe not found on PATH. Install with: brew install ffmpeg",
+    );
+    process.exit(1);
+  }
+}
+
+function optimize(file) {
+  const before = statSync(file).size;
+  const tmp = `${file}.opt.mp4`;
+  execFileSync(
+    "ffmpeg",
+    [
+      "-y",
+      "-i",
+      file,
+      // Cap width, keep aspect with an even height, crisp downscale. Never
+      // upscales a source already narrower than the target.
+      "-vf",
+      `scale='min(${TARGET_WIDTH},iw)':-2:flags=lanczos`,
+      "-c:v",
+      "libx264",
+      "-profile:v",
+      "high",
+      "-pix_fmt",
+      "yuv420p",
+      "-crf",
+      String(CRF),
+      "-preset",
+      PRESET,
+      "-movflags",
+      "+faststart", // moov atom up front -> player starts without reading EOF.
+      "-an", // muted in the UI; drop the audio track entirely.
+      "-map_metadata",
+      "-1", // strip source metadata, then stamp our marker.
+      "-metadata",
+      `comment=${MARKER}`,
+      tmp,
+    ],
+    { stdio: ["ignore", "ignore", "inherit"] },
+  );
+  const after = statSync(tmp).size;
+  renameSync(tmp, file);
+  return { before, after };
+}
+
+ensureFfmpeg();
+
+let clips;
+try {
+  clips = readdirSync(ASSET_DIR)
+    .filter((name) => name.endsWith(".mp4"))
+    .sort();
+} catch {
+  console.error(`Asset dir not found: ${ASSET_DIR}`);
+  process.exit(1);
+}
+
+if (clips.length === 0) {
+  console.error(`No .mp4 clips in ${ASSET_DIR}`);
+  process.exit(1);
+}
+
+let optimized = 0;
+let skipped = 0;
+let totalBefore = 0;
+let totalAfter = 0;
+
+for (const name of clips) {
+  const file = join(ASSET_DIR, name);
+  if (!force && isOptimized(file)) {
+    console.log(`  skip   ${name} (already optimized)`);
+    skipped++;
+    continue;
+  }
+  if (dryRun) {
+    console.log(`  would  ${name} (${kb(statSync(file).size)})`);
+    continue;
+  }
+  const { before, after } = optimize(file);
+  totalBefore += before;
+  totalAfter += after;
+  optimized++;
+  const pct = (((before - after) / before) * 100).toFixed(0);
+  console.log(`  ok     ${name}  ${kb(before)} -> ${kb(after)}  (-${pct}%)`);
+}
+
+if (dryRun) {
+  console.log(`\nDry run: ${clips.length - skipped} clip(s) would be encoded.`);
+} else if (optimized > 0) {
+  console.log(
+    `\nOptimized ${optimized} clip(s): ${kb(totalBefore)} -> ${kb(totalAfter)} total.`,
+  );
+} else {
+  console.log("\nNothing to do — all clips already optimized.");
+}