diff --git a/www/src/modules/docs/components-list/autoplay/card-hover.tsx b/www/src/modules/docs/components-list/autoplay/card-hover.tsx
deleted file mode 100644
index bc0550c25..000000000
--- a/www/src/modules/docs/components-list/autoplay/card-hover.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client"
-
-import { createContext, useContext } from "react"
-
-/**
- * Whether the surrounding component card is "active" — hovered or keyboard
- * focused. The card (component-card.tsx) is the only pointer/focus target: the
- * demo it previews is `inert`, so it can never receive hover/focus itself. The
- * card tracks its own hover/focus and broadcasts it down here, and the demo's
- * autoplay hooks read it to drive their looping interaction animations.
- *
- * Nothing here ever touches real focus — the animations are purely visual state
- * (controlled props, faux focus rings, motion transforms), so simulating a
- * "focused" field or an "open" popover never steals the page's focus.
- */
-const CardHoverContext = createContext(false)
-
-export const CardHoverProvider = CardHoverContext.Provider
-
-export function useCardHover(): boolean {
-  return useContext(CardHoverContext)
-}
diff --git a/www/src/modules/docs/components-list/autoplay/demo-cursor.tsx b/www/src/modules/docs/components-list/autoplay/demo-cursor.tsx
deleted file mode 100644
index 7f89c5bad..000000000
--- a/www/src/modules/docs/components-list/autoplay/demo-cursor.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { useReducedMotion } from "motion/react"
-
-import { Pointer } from "./pointer"
-
-/**
- * A decorative macOS pointer that follows whatever control the card's autoplay is
- * currently "clicking" and dips on each click. Where the overlay cursor runs a
- * fixed choreography, this one reads the DOM: the demos already mirror real RAC
- * state onto the real elements (see interaction.tsx), so we just find the pressed
- * / selected / current element and glide the tip onto it.
- *
- * Mounted in the (unscaled) preview and measured against it, so the card's inner
- * `scale()` is absorbed by getBoundingClientRect. Purely cosmetic — aria-hidden,
- * pointer-events-none, and it never touches the real cursor.
- */
-
-// The arrow tip's offset into the SVG at the default size — subtract it so the
-// tip, not the SVG's corner, lands on the target point.
-const TIP_X = 4
-const TIP_Y = 3
-// How long a click reads as "pressed" — long enough to cover the ripple and give
-// every click (even the briefest toggle beat) a deliberate dip.
-const PRESS_MS = 240
-
-interface Point {
-  x: number
-  y: number
-}
-
-function firstMatch(root: HTMLElement, selector: string): HTMLElement | null {
-  return root.querySelector<HTMLElement>(selector)
-}
-
-export function DemoCursor({
-  containerRef,
-  active,
-}: {
-  containerRef: React.RefObject<HTMLDivElement | null>
-  active: boolean
-}) {
-  const reduce = useReducedMotion() ?? false
-  const [point, setPoint] = useState<Point | null>(null)
-  const [pressed, setPressed] = useState(false)
-  const [shown, setShown] = useState(false)
-  // Bumping this remounts the ripple so it replays on every click.
-  const [clicks, setClicks] = useState(0)
-
-  useEffect(() => {
-    if (!active || reduce) {
-      setShown(false)
-      return
-    }
-
-    // The element pressed on the previous frame (to detect a fresh press) and the
-    // one the pointer currently rests on (to detect a selection jumping).
-    let lastPressEl: Element | null = null
-    let restTarget: Element | null = null
-    let pressUntil = 0
-    let placed = false
-    let raf = 0
-
-    const tick = (now: number) => {
-      const container = containerRef.current
-      if (!container) {
-        raf = requestAnimationFrame(tick)
-        return
-      }
-
-      const pressedEl = firstMatch(container, "[data-pressed]")
-      const selectedEl =
-        firstMatch(container, "[data-selected]:not([data-disabled])") ??
-        firstMatch(container, '[aria-current="page"]')
-      const hoveredEl = firstMatch(container, "[data-hovered]")
-
-      // Where the pointer wants to be. A live press wins; otherwise a moving
-      // selection; otherwise a plain hover. A selection that merely *contains* the
-      // last press target is a fixed control (a checkbox toggling its own box) —
-      // hold position there instead of jumping out to the row.
-      let target: HTMLElement | null = null
-      if (pressedEl) {
-        target = pressedEl
-      } else if (
-        selectedEl &&
-        !(lastPressEl && selectedEl.contains(lastPressEl))
-      ) {
-        target = selectedEl
-      } else if (hoveredEl && !selectedEl) {
-        target = hoveredEl
-      }
-
-      const pressRising = pressedEl != null && lastPressEl == null
-      const targetJumped =
-        target != null && restTarget != null && target !== restTarget
-      if (pressRising || targetJumped) {
-        pressUntil = now + PRESS_MS
-        setClicks((c) => c + 1)
-      }
-      lastPressEl = pressedEl
-      if (target) restTarget = target
-
-      if (target) {
-        const c = container.getBoundingClientRect()
-        const t = target.getBoundingClientRect()
-        const x = t.left - c.left + t.width / 2
-        const y = t.top - c.top + t.height / 2
-        setPoint((prev) =>
-          prev && Math.abs(prev.x - x) < 0.5 && Math.abs(prev.y - y) < 0.5
-            ? prev
-            : { x, y },
-        )
-        // Fade in a frame after the first placement so the pointer eases in at the
-        // target rather than appearing mid-air.
-        if (placed) setShown(true)
-        placed = true
-      }
-
-      const isPressed = now < pressUntil
-      setPressed((prev) => (prev === isPressed ? prev : isPressed))
-
-      raf = requestAnimationFrame(tick)
-    }
-
-    raf = requestAnimationFrame(tick)
-    return () => cancelAnimationFrame(raf)
-  }, [active, reduce, containerRef])
-
-  if (!point) return null
-
-  return (
-    <div
-      aria-hidden="true"
-      className="pointer-events-none absolute top-0 left-0 z-30"
-      style={{
-        transform: `translate(${point.x}px, ${point.y}px)`,
-        opacity: shown ? 1 : 0,
-        transition:
-          "transform 340ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease-out",
-      }}
-    >
-      {/* Anchor the arrow tip on the target point. */}
-      <div className="absolute" style={{ left: -TIP_X, top: -TIP_Y }}>
-        {clicks > 0 && (
-          <span
-            key={clicks}
-            className="absolute size-6 [animation:cursor-click_320ms_ease-out_forwards] rounded-full bg-white/35 ring-1 ring-black/30"
-            style={{ left: TIP_X, top: TIP_Y }}
-          />
-        )}
-        <Pointer pressed={pressed} />
-      </div>
-    </div>
-  )
-}
diff --git a/www/src/modules/docs/components-list/autoplay/index.ts b/www/src/modules/docs/components-list/autoplay/index.ts
deleted file mode 100644
index f2536ee9e..000000000
--- a/www/src/modules/docs/components-list/autoplay/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export { CardHoverProvider, useCardHover } from "./card-hover"
-export {
-  useAutoplay,
-  useTypewriter,
-  useToggleAutoplay,
-  useStepAutoplay,
-  useCycle,
-  useOpenAutoplay,
-  useValueAutoplay,
-} from "./use-autoplay"
-export type {
-  AutoplayPhase,
-  AutoplayState,
-  TypewriterState,
-  ToggleAutoplayState,
-  StepAutoplayState,
-  ValueAutoplayState,
-  ScenePhase,
-} from "./use-autoplay"
-export { DemoCursor } from "./demo-cursor"
-export { Pointer } from "./pointer"
-export {
-  DemoState,
-  DemoPress,
-  DemoFocus,
-  DemoCaret,
-  applyDemoState,
-} from "./interaction"
-export type { DemoStateFlags } from "./interaction"
-export { OverlayScene } from "./overlay-scene"
-export type { SurfaceVariant } from "./overlay-scene"
diff --git a/www/src/modules/docs/components-list/autoplay/interaction.tsx b/www/src/modules/docs/components-list/autoplay/interaction.tsx
deleted file mode 100644
index c06360e35..000000000
--- a/www/src/modules/docs/components-list/autoplay/interaction.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-"use client"
-
-import { type ReactNode, useEffect, useLayoutEffect, useRef } from "react"
-
-import { cn } from "@/registry/lib/utils"
-
-/**
- * Exact-fidelity state simulation for the preview cards.
- *
- * Instead of faking interaction with our own transforms, we mirror the desired
- * state onto the REAL React Aria state attributes (`data-hovered`, `data-pressed`,
- * `data-focused`, …) of the real component. The component then renders its OWN
- * state styles — the exact look it will have under any design-system preset —
- * with no interaction and without ever touching the page's real focus.
- *
- * The attributes are (re)applied in a layout effect after every render because
- * React Aria rewrites them from its internal state (always idle here) on each
- * render; re-applying post-commit, pre-paint, keeps them set with no flicker.
- */
-
-// useLayoutEffect on the client, no-op useEffect on the server (avoids the SSR warning).
-const useIsoLayoutEffect =
-  typeof window === "undefined" ? useEffect : useLayoutEffect
-
-export interface DemoStateFlags {
-  hovered?: boolean
-  pressed?: boolean
-  /** Adds `data-focused` — drives `focus:` (input rings, etc.). */
-  focused?: boolean
-  /** Adds `data-focused` + `data-focus-visible` — drives `focus-visible:` rings. */
-  focusVisible?: boolean
-  selected?: boolean
-  open?: boolean
-  current?: boolean
-}
-
-const FLAG_ATTRS: [keyof DemoStateFlags, string][] = [
-  ["hovered", "data-hovered"],
-  ["pressed", "data-pressed"],
-  ["selected", "data-selected"],
-  ["open", "data-open"],
-  ["current", "data-current"],
-]
-
-export function applyDemoState(el: HTMLElement, flags: DemoStateFlags): void {
-  for (const [key, attr] of FLAG_ATTRS) {
-    if (flags[key]) el.setAttribute(attr, "")
-    else el.removeAttribute(attr)
-  }
-  const focused = flags.focused || flags.focusVisible
-  if (focused) el.setAttribute("data-focused", "")
-  else el.removeAttribute("data-focused")
-  if (flags.focusVisible) el.setAttribute("data-focus-visible", "")
-  else el.removeAttribute("data-focus-visible")
-}
-
-/**
- * Wraps a single child in a `display:contents` span (so it adds no box) and
- * mirrors `flags` onto the child element's real state attributes. `target`
- * selects which descendant to drive when the styled element isn't the wrapper's
- * first child.
- */
-export function DemoState({
-  flags,
-  target = "first",
-  children,
-}: {
-  flags: DemoStateFlags
-  target?: "first" | "last" | "all"
-  children: ReactNode
-}) {
-  const ref = useRef<HTMLSpanElement>(null)
-
-  useIsoLayoutEffect(() => {
-    const host = ref.current
-    if (!host) return
-    const targets =
-      target === "all"
-        ? Array.from(host.children)
-        : target === "last"
-          ? [host.lastElementChild]
-          : [host.firstElementChild]
-    for (const el of targets) {
-      if (el instanceof HTMLElement) applyDemoState(el, flags)
-    }
-  })
-
-  return (
-    <span ref={ref} style={{ display: "contents" }}>
-      {children}
-    </span>
-  )
-}
-
-/**
- * Drives the real hover / pressed states of a pressable (Button, Link,
- * ToggleButton, menu item…). Accepts either an explicit `phase`
- * (`idle | hover | press | …`) or the `hovering` / `pressing` booleans.
- */
-export function DemoPress({
-  phase,
-  pressing,
-  hovering,
-  selected,
-  target,
-  children,
-}: {
-  phase?: string
-  pressing?: boolean
-  hovering?: boolean
-  /** Mirror a selected/toggled state — needed when the pressable IS the styled
-   * element (e.g. ToggleButton), where the real `data-selected` would otherwise
-   * be stripped on re-apply. */
-  selected?: boolean
-  target?: "first" | "last" | "all"
-  children: ReactNode
-}) {
-  const isPressed = pressing || phase === "press"
-  const isHovered = isPressed || hovering || phase === "hover"
-  return (
-    <DemoState
-      flags={{ hovered: isHovered, pressed: isPressed, selected }}
-      target={target}
-    >
-      {children}
-    </DemoState>
-  )
-}
-
-/**
- * Drives the real focus state of a field so it shows its actual focus ring/border
- * — without taking real focus (the preview is `inert`; we only set the attribute).
- */
-export function DemoFocus({
-  active,
-  target,
-  children,
-}: {
-  active: boolean
-  target?: "first" | "last" | "all"
-  children: ReactNode
-}) {
-  return (
-    <DemoState flags={{ focused: active }} target={target}>
-      {children}
-    </DemoState>
-  )
-}
-
-/**
- * A blinking text caret, for fields where the typed text sits in normal flow
- * (search, command palette) rather than inside a real `<input>`.
- */
-export function DemoCaret({
-  visible = true,
-  className,
-}: {
-  visible?: boolean
-  className?: string
-}) {
-  if (!visible) return null
-  return (
-    <span
-      aria-hidden="true"
-      className={cn(
-        "inline-block h-[1.1em] w-px translate-y-[0.15em] animate-caret-blink bg-fg",
-        className,
-      )}
-    />
-  )
-}
diff --git a/www/src/modules/docs/components-list/autoplay/overlay-scene.tsx b/www/src/modules/docs/components-list/autoplay/overlay-scene.tsx
deleted file mode 100644
index 6053723b3..000000000
--- a/www/src/modules/docs/components-list/autoplay/overlay-scene.tsx
+++ /dev/null
@@ -1,331 +0,0 @@
-"use client"
-
-import {
-  type ReactNode,
-  type RefObject,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from "react"
-
-import { cn } from "@/registry/lib/utils"
-
-import type { ScenePhase } from "./use-autoplay"
-
-/**
- * The cinematic for overlay triggers. A trigger sits centered and the surface
- * unfolds beside it — at rest the overlay is OPEN so the card previews it, and on
- * hover the timeline loops it open/closed (see `useOpenAutoplay`).
- *
- * Everything is presentational: the trigger is a real component and the surface
- * uses the real token classes, but the open state is faked so nothing portals out
- * of the card or touches real focus. Animations are CSS transitions (the previews
- * are `inert`, where script-driven animation libraries don't run): surfaces stay
- * mounted and toggle their visual state, so they animate in and out, and the
- * anchored layout uses the grid-rows `0fr → 1fr` trick to reflow the column
- * height — which carries the trigger up as the surface opens.
- *
- * The open composition is measured and scaled down (`useFitScale`) so the surface
- * always fits inside the small preview — whatever the card width or the surface's
- * intrinsic size — instead of cropping against the card edge.
- */
-
-export type SurfaceVariant = "popover" | "menu" | "modal" | "drawer" | "tooltip"
-
-interface OverlaySceneProps {
-  phase: ScenePhase
-  variant: SurfaceVariant
-  /** Which side of the trigger the surface unfolds (anchored variants only). */
-  side?: "top" | "bottom"
-  /** The real trigger (a Button, icon button, input group…). */
-  trigger: React.ReactNode
-  /** The surface contents — real sub-components (DialogHeader, ListBox…). */
-  children: React.ReactNode
-  /** Upper bound on the fit scale — the surface never renders larger than this. */
-  openScale?: number
-  /** Field-style trigger: fill the width so it matches the stretched field demos
-   *  (combobox, select, date-picker) instead of sizing to content. */
-  fluid?: boolean
-  /** Extra classes for the surface frame. */
-  surfaceClassName?: string
-}
-
-const SURFACE_FRAME: Record<SurfaceVariant, string> = {
-  popover:
-    "rounded-(--popover-radius) border bg-popover p-2.5 text-xs/relaxed shadow-md",
-  menu: "rounded-(--popover-radius) border bg-popover p-1 shadow-md",
-  modal:
-    "rounded-(--modal-radius,var(--radius-lg)) border bg-bg p-4 text-sm shadow-lg",
-  drawer: "rounded-t-(--radius-xl) border-t bg-bg p-4 text-sm shadow-lg",
-  tooltip:
-    "rounded-(--tooltip-radius) bg-tooltip px-3 py-1.5 text-center text-xs text-fg-on-tooltip shadow-md",
-}
-
-// The ancestor data attribute the real Dialog* sub-components key their
-// in-context padding on (`in-data-popover:` / `in-data-modal:`).
-const SURFACE_DATA: Partial<Record<SurfaceVariant, Record<string, string>>> = {
-  popover: { "data-popover": "" },
-  menu: { "data-popover": "" },
-  modal: { "data-modal": "" },
-}
-
-const SCENE_ROOT =
-  "relative flex h-full w-full items-center justify-center overflow-hidden"
-const EASE = "cubic-bezier(0.32,0.72,0,1)"
-// How much of the card the open composition may occupy before it's scaled down.
-const FIT_MARGIN = 0.86
-
-const useIsoLayoutEffect =
-  typeof window === "undefined" ? useEffect : useLayoutEffect
-
-/**
- * Scale factor that keeps the open composition inside the preview card. Measures
- * the surface (and, when stacked, the trigger) against the scene and returns the
- * largest scale ≤ `maxScale` that still fits with a margin. `offset*` sizes are
- * layout sizes, immune to the grid clip and our own scale transform, so the
- * measurement is stable in any phase.
- */
-function useFitScale({
-  sceneRef,
-  surfaceRef,
-  triggerRef,
-  stacked,
-  gap = 0,
-  maxScale = 1,
-}: {
-  sceneRef: RefObject<HTMLDivElement | null>
-  surfaceRef: RefObject<HTMLDivElement | null>
-  triggerRef: RefObject<HTMLDivElement | null>
-  stacked: boolean
-  gap?: number
-  maxScale?: number
-}): number {
-  const [scale, setScale] = useState(maxScale)
-
-  useIsoLayoutEffect(() => {
-    const scene = sceneRef.current
-    const surface = surfaceRef.current
-    if (!scene || !surface) return
-
-    const compute = () => {
-      const availW = scene.clientWidth
-      const availH = scene.clientHeight
-      if (!availW || !availH) return
-      const trigger = stacked ? triggerRef.current : null
-      const natW = Math.max(surface.offsetWidth, trigger?.offsetWidth ?? 0)
-      const natH =
-        surface.offsetHeight + (trigger ? trigger.offsetHeight + gap : 0)
-      if (!natW || !natH) return
-      setScale(
-        Math.min(
-          maxScale,
-          (availW * FIT_MARGIN) / natW,
-          (availH * FIT_MARGIN) / natH,
-        ),
-      )
-    }
-
-    compute()
-    const ro = new ResizeObserver(compute)
-    ro.observe(scene)
-    ro.observe(surface)
-    if (triggerRef.current) ro.observe(triggerRef.current)
-    return () => ro.disconnect()
-  }, [stacked, gap, maxScale])
-
-  return scale
-}
-
-// The trigger is a real component in its default state. When an overlay opens it
-// can dim back (a depth cue for modal/drawer), but it never resizes on its own —
-// the only scaling is the scene "camera" on the anchored column.
-function Trigger({
-  triggerRef,
-  dim,
-  fluid,
-  children,
-}: {
-  triggerRef: RefObject<HTMLDivElement | null>
-  dim?: boolean
-  fluid?: boolean
-  children: ReactNode
-}) {
-  return (
-    <div
-      ref={triggerRef}
-      // `fluid` field triggers fill the column so their width matches the
-      // stretched field demos; icon-button triggers stay content-sized.
-      className={cn("relative", fluid && "w-full")}
-      style={{ opacity: dim ? 0.55 : 1, transition: "opacity 300ms ease" }}
-    >
-      {children}
-    </div>
-  )
-}
-
-/** A surface that grows in/out of the column flow (driving the trigger's ride).
- *  `fluid` stretches it to the full column width so field dropdowns (select,
- *  combobox) match their trigger instead of shrinking to their content. */
-function AnchoredSurface({
-  open,
-  side,
-  fluid,
-  children,
-}: {
-  open: boolean
-  side: "top" | "bottom"
-  fluid?: boolean
-  children: ReactNode
-}) {
-  return (
-    <div
-      className={cn("grid overflow-hidden", fluid && "w-full grid-cols-1")}
-      style={{
-        gridTemplateRows: open ? "1fr" : "0fr",
-        transition: `grid-template-rows 360ms ${EASE}`,
-      }}
-    >
-      <div className="min-h-0">
-        <div
-          className={cn(side === "bottom" ? "pt-2" : "pb-2", fluid && "w-full")}
-          style={{
-            opacity: open ? 1 : 0,
-            transform: open
-              ? "none"
-              : `translateY(${side === "bottom" ? "-4px" : "4px"}) scale(0.96)`,
-            transition: `opacity 240ms ease, transform 300ms ${EASE}`,
-          }}
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function OverlayScene({
-  phase,
-  variant,
-  side = "bottom",
-  trigger,
-  children,
-  openScale,
-  fluid = false,
-  surfaceClassName,
-}: OverlaySceneProps) {
-  const open = phase === "open"
-  const sceneRef = useRef<HTMLDivElement>(null)
-  const triggerRef = useRef<HTMLDivElement>(null)
-  const surfaceRef = useRef<HTMLDivElement>(null)
-
-  // Anchored variants stack trigger + surface and scale as one; overlay variants
-  // (modal/drawer) float the surface over the trigger.
-  const anchored = variant !== "modal" && variant !== "drawer"
-  const fitScale = useFitScale({
-    sceneRef,
-    surfaceRef,
-    triggerRef,
-    stacked: anchored,
-    gap: 8,
-    maxScale: openScale ?? 1,
-  })
-
-  const surface = (
-    <div
-      ref={surfaceRef}
-      {...SURFACE_DATA[variant]}
-      className={cn(SURFACE_FRAME[variant], surfaceClassName)}
-    >
-      {children}
-    </div>
-  )
-
-  // Modal: centered panel over a dimming backdrop; the trigger dims behind it.
-  if (variant === "modal") {
-    return (
-      <div ref={sceneRef} className={SCENE_ROOT}>
-        <Trigger triggerRef={triggerRef} dim={open}>
-          {trigger}
-        </Trigger>
-        <div
-          aria-hidden
-          className="absolute inset-0 bg-black/40 backdrop-blur-[1px]"
-          style={{ opacity: open ? 1 : 0, transition: "opacity 250ms ease" }}
-        />
-        <div className="absolute inset-0 flex items-center justify-center p-3">
-          <div
-            className="w-full max-w-[13rem]"
-            style={{
-              opacity: open ? 1 : 0,
-              transform: open
-                ? `scale(${fitScale})`
-                : "translateY(6px) scale(0.9)",
-              transformOrigin: "center",
-              transition: `opacity 250ms ease, transform 300ms ${EASE}`,
-            }}
-          >
-            {surface}
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  // Drawer: bottom sheet slides up over a dimming backdrop.
-  if (variant === "drawer") {
-    return (
-      <div ref={sceneRef} className={SCENE_ROOT}>
-        <Trigger triggerRef={triggerRef} dim={open}>
-          {trigger}
-        </Trigger>
-        <div
-          aria-hidden
-          className="absolute inset-0 bg-black/40 backdrop-blur-[1px]"
-          style={{ opacity: open ? 1 : 0, transition: "opacity 250ms ease" }}
-        />
-        <div
-          className="absolute inset-x-2 bottom-0"
-          style={{
-            transform: open ? "translateY(0)" : "translateY(100%)",
-            transition: `transform 360ms ${EASE}`,
-          }}
-        >
-          {surface}
-        </div>
-      </div>
-    )
-  }
-
-  // Anchored (popover / menu / tooltip): the trigger + surface share a column
-  // that scales down when open so both fit — the "zoom out" the trigger rides.
-  return (
-    <div ref={sceneRef} className={SCENE_ROOT}>
-      <div
-        // `fluid` makes field-style triggers (combobox, select, date-picker) fill
-        // the width + horizontal inset so they match the stretched field demos;
-        // icon-button triggers stay content-sized and centered.
-        className={cn("flex flex-col items-center", fluid && "w-full px-4")}
-        style={{
-          transform: `scale(${open ? fitScale : 1})`,
-          transformOrigin: "center",
-          transition: `transform 400ms ${EASE}`,
-        }}
-      >
-        {side === "top" && (
-          <AnchoredSurface open={open} side="top" fluid={fluid}>
-            {surface}
-          </AnchoredSurface>
-        )}
-        <Trigger triggerRef={triggerRef} fluid={fluid}>
-          {trigger}
-        </Trigger>
-        {side === "bottom" && (
-          <AnchoredSurface open={open} side="bottom" fluid={fluid}>
-            {surface}
-          </AnchoredSurface>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/www/src/modules/docs/components-list/autoplay/pointer.tsx b/www/src/modules/docs/components-list/autoplay/pointer.tsx
deleted file mode 100644
index 975ca29c2..000000000
--- a/www/src/modules/docs/components-list/autoplay/pointer.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { cn } from "@/registry/lib/utils"
-
-/**
- * The macOS-style arrow shared by the component-gallery autoplay cursors. It dips
- * (scales down toward its tip) while `pressed`, so a click reads tactilely. The
- * hotspot — the arrow tip — sits at roughly (4px, 3px) from the top-left at the
- * default size; offset the pointer by that to land the tip on a target.
- */
-export function Pointer({
-  pressed = false,
-  size = 20,
-  className,
-}: {
-  pressed?: boolean
-  size?: number
-  className?: string
-}) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      width={size}
-      height={size}
-      className={cn(
-        "relative drop-shadow-[0_1px_2px_rgba(0,0,0,0.35)]",
-        className,
-      )}
-      style={{
-        transform: pressed ? "scale(0.82)" : "scale(1)",
-        transformOrigin: "5px 4px",
-        transition: "transform 130ms cubic-bezier(0.32, 0.72, 0, 1)",
-      }}
-    >
-      <path
-        d="M5 3.5 L5 19 L9 15 L11.5 20.5 L14 19.3 L11.6 14 L17 14 Z"
-        fill="white"
-        stroke="black"
-        strokeWidth={1.4}
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
diff --git a/www/src/modules/docs/components-list/autoplay/use-autoplay.ts b/www/src/modules/docs/components-list/autoplay/use-autoplay.ts
deleted file mode 100644
index 3a139ddb5..000000000
--- a/www/src/modules/docs/components-list/autoplay/use-autoplay.ts
+++ /dev/null
@@ -1,346 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState } from "react"
-import { useReducedMotion } from "motion/react"
-
-import { useCardHover } from "./card-hover"
-
-/**
- * Looping timeline primitives that drive the component-card preview animations.
- *
- * Every hook here is gated on two things: the card being hovered/focused
- * (`useCardHover`) and `prefers-reduced-motion` being off. When either is false
- * the hook returns its resting value (phase 0 / empty text / default selection)
- * so the card looks exactly like the static preview did before — the animation
- * is strictly additive and only ever plays on hover.
- */
-
-export interface AutoplayPhase {
-  /** Phase name the demo switches on. */
-  name: string
-  /** How long to stay in this phase before advancing, in ms. */
-  duration: number
-}
-
-export interface AutoplayState {
-  /** Current phase name (resting phase when not playing). */
-  phase: string
-  /** Index of the current phase in the timeline. */
-  index: number
-  /** How many full loops have completed. */
-  cycle: number
-  /** True while the timeline is actively advancing. */
-  playing: boolean
-}
-
-interface AutoplayOptions {
-  /** Override the active signal (defaults to the card's hover/focus state). */
-  active?: boolean
-  /** Loop back to the first phase after the last (default true). */
-  loop?: boolean
-  /** Delay before the first advance, in ms. */
-  startDelay?: number
-}
-
-function usePrefersReducedMotion(): boolean {
-  return useReducedMotion() ?? false
-}
-
-/**
- * Steps through `phases` while active, then loops. Returns the resting phase
- * (index 0) whenever inactive or under reduced motion. Timers are torn down on
- * deactivation/unmount, so an un-hovered card runs nothing.
- */
-export function useAutoplay(
-  phases: AutoplayPhase[],
-  options: AutoplayOptions = {},
-): AutoplayState {
-  const hovered = useCardHover()
-  const reduce = usePrefersReducedMotion()
-  const { active = hovered, loop = true, startDelay = 0 } = options
-
-  const [index, setIndex] = useState(0)
-  const [cycle, setCycle] = useState(0)
-
-  const phasesRef = useRef(phases)
-  phasesRef.current = phases
-
-  // Restart the timeline whenever its shape changes, not just its array identity.
-  const shape = phases.map((p) => `${p.name}:${p.duration}`).join("|")
-  const enabled = active && !reduce && phases.length > 1
-
-  useEffect(() => {
-    if (!enabled) {
-      setIndex(0)
-      setCycle(0)
-      return
-    }
-
-    let i = 0
-    let c = 0
-    let cancelled = false
-    let timer: ReturnType<typeof setTimeout> | undefined
-
-    setIndex(0)
-    setCycle(0)
-
-    const advance = (delay: number) => {
-      timer = setTimeout(() => {
-        if (cancelled) return
-        const list = phasesRef.current
-        i += 1
-        if (i >= list.length) {
-          if (!loop) return
-          i = 0
-          c += 1
-        }
-        setIndex(i)
-        setCycle(c)
-        advance(list[i]?.duration ?? 600)
-      }, delay)
-    }
-
-    advance(startDelay + (phasesRef.current[0]?.duration ?? 600))
-
-    return () => {
-      cancelled = true
-      if (timer) clearTimeout(timer)
-    }
-  }, [enabled, loop, startDelay, shape])
-
-  const resolvedIndex = enabled ? index : 0
-  const phase = phases[resolvedIndex]?.name ?? phases[0]?.name ?? "idle"
-
-  return { phase, index: resolvedIndex, cycle, playing: enabled }
-}
-
-export interface TypewriterState {
-  /** Currently visible substring. */
-  value: string
-  /** True while characters are still being added. */
-  typing: boolean
-  /** True once the full string is shown. */
-  done: boolean
-  /** True while active — use to show a faux focus ring / caret. */
-  active: boolean
-}
-
-interface TypewriterOptions extends Pick<AutoplayOptions, "active" | "loop"> {
-  /** Delay before the first character, in ms. */
-  startDelay?: number
-  /** Time between characters, in ms. */
-  charInterval?: number
-  /** Hold the full string this long before clearing to loop, in ms. */
-  holdAfter?: number
-}
-
-/**
- * Reveals `text` one character at a time while active, then (looping) clears and
- * retypes. Returns an empty string when inactive so the field shows its
- * placeholder. Pair `value` with a controlled, read-only field and `active` with
- * a faux focus ring.
- */
-export function useTypewriter(
-  text: string,
-  options: TypewriterOptions = {},
-): TypewriterState {
-  const hovered = useCardHover()
-  const reduce = usePrefersReducedMotion()
-  const {
-    active = hovered,
-    loop = true,
-    startDelay = 450,
-    charInterval = 65,
-    holdAfter = 1400,
-  } = options
-
-  const [count, setCount] = useState(0)
-  const enabled = active && !reduce && text.length > 0
-
-  useEffect(() => {
-    if (!enabled) {
-      setCount(0)
-      return
-    }
-
-    let n = 0
-    let cancelled = false
-    let timer: ReturnType<typeof setTimeout> | undefined
-    setCount(0)
-
-    const tick = () => {
-      if (cancelled) return
-      if (n < text.length) {
-        n += 1
-        setCount(n)
-        timer = setTimeout(tick, charInterval)
-        return
-      }
-      if (!loop) return
-      timer = setTimeout(() => {
-        if (cancelled) return
-        n = 0
-        setCount(0)
-        timer = setTimeout(tick, charInterval)
-      }, holdAfter)
-    }
-
-    timer = setTimeout(tick, startDelay)
-
-    return () => {
-      cancelled = true
-      if (timer) clearTimeout(timer)
-    }
-  }, [enabled, text, charInterval, holdAfter, startDelay, loop])
-
-  const value = enabled ? text.slice(0, count) : ""
-  return {
-    value,
-    typing: enabled && count < text.length,
-    done: enabled && count >= text.length,
-    active: enabled,
-  }
-}
-
-export interface ToggleAutoplayState {
-  /** The simulated on/off (or selected) value. */
-  selected: boolean
-  /** True for a brief beat around each flip — drive a press dip with it. */
-  pressing: boolean
-}
-
-/**
- * Flips a boolean on/off on a loop while active, with a short "pressing" beat
- * around each flip so the control can show a click. Used by checkbox, switch,
- * single-checkbox-style toggles, etc.
- */
-export function useToggleAutoplay(
-  options: AutoplayOptions & { initial?: boolean } = {},
-): ToggleAutoplayState {
-  const { initial = false, ...rest } = options
-  const { phase } = useAutoplay(
-    [
-      { name: "rest-a", duration: 1100 },
-      { name: "press-a", duration: 170 },
-      { name: "rest-b", duration: 1100 },
-      { name: "press-b", duration: 170 },
-    ],
-    rest,
-  )
-  const pressing = phase === "press-a" || phase === "press-b"
-  // After press-a we're "on", after press-b we're "off" again.
-  const flipped = phase === "press-a" || phase === "rest-b"
-  return { selected: initial ? !flipped : flipped, pressing }
-}
-
-export interface StepAutoplayState {
-  /** Currently selected step index. */
-  index: number
-  /** True for a brief beat around each step change. */
-  pressing: boolean
-}
-
-/**
- * Cycles a selected index through `0..count-1` on a loop while active, with a
- * short press beat at each change. Used for tabs, segmented/toggle-button
- * groups, radio groups, single-select lists, pagination, etc.
- */
-export function useStepAutoplay(
-  count: number,
-  options: AutoplayOptions & {
-    /** Where the cycle rests when not playing. */
-    initial?: number
-    /** How long each step is shown, in ms. */
-    dwell?: number
-  } = {},
-): StepAutoplayState {
-  const { initial = 0, dwell = 1150, ...rest } = options
-  const safeCount = Math.max(1, count)
-
-  const phases: AutoplayPhase[] = []
-  for (let i = 0; i < safeCount; i += 1) {
-    phases.push({ name: `press-${i}`, duration: 180 })
-    phases.push({ name: `dwell-${i}`, duration: dwell })
-  }
-
-  const { index: phaseIndex, playing } = useAutoplay(phases, rest)
-  if (!playing) return { index: initial, pressing: false }
-
-  const step = Math.floor(phaseIndex / 2) % safeCount
-  const pressing = phaseIndex % 2 === 0
-  return { index: step, pressing }
-}
-
-/**
- * Cycles through `items` and returns the current ITEM (typed, never undefined)
- * — a typed convenience over `useStepAutoplay` for selection demos that map an
- * index back to a key/value (lists, tag groups, segmented controls).
- */
-export function useCycle<T>(
-  items: readonly T[],
-  options: AutoplayOptions & { initial?: number; dwell?: number } = {},
-): { item: T; index: number; pressing: boolean } {
-  const { index, pressing } = useStepAutoplay(items.length, options)
-  const len = items.length
-  const safe = len > 0 ? ((index % len) + len) % len : 0
-  return { item: items[safe] as T, index: safe, pressing }
-}
-
-export type ScenePhase = "open" | "closed"
-
-/**
- * The overlay timeline. At rest — un-hovered or under reduced motion — the
- * overlay sits OPEN (the resting phase is index 0), so the card previews the
- * surface with no interaction. On hover it loops open → closed forever, replaying
- * the open/close animation. Feed the returned `phase` straight into
- * `<OverlayScene>`.
- */
-export function useOpenAutoplay(
-  options: AutoplayOptions & {
-    /** How long the overlay stays open each loop, in ms. */
-    holdOpen?: number
-    /** How long it stays closed between loops, in ms. */
-    holdClosed?: number
-  } = {},
-): { phase: ScenePhase; cycle: number } {
-  const { holdOpen = 1500, holdClosed = 620, ...rest } = options
-  const { phase, cycle } = useAutoplay(
-    [
-      { name: "open", duration: holdOpen },
-      { name: "closed", duration: holdClosed },
-    ],
-    rest,
-  )
-  return { phase: phase as ScenePhase, cycle }
-}
-
-export interface ValueAutoplayState {
-  /** The current animated value. */
-  value: number
-  /** True while the thumb/fill is moving toward a new target. */
-  moving: boolean
-}
-
-/**
- * Oscillates a numeric value between waypoints while active (sliders), or sweeps
- * once to a target and holds (progress). Returns `from` when inactive.
- */
-export function useValueAutoplay(
-  waypoints: number[],
-  options: AutoplayOptions & { dwell?: number } = {},
-): ValueAutoplayState {
-  const { dwell = 950, ...rest } = options
-  const stops = waypoints.length > 0 ? waypoints : [0]
-
-  const phases: AutoplayPhase[] = stops.map((_, i) => ({
-    name: `stop-${i}`,
-    duration: dwell,
-  }))
-
-  const { index, playing } = useAutoplay(phases, rest)
-  const first = stops[0] ?? 0
-  return {
-    value: playing ? (stops[index] ?? first) : first,
-    moving: playing,
-  }
-}
diff --git a/www/src/modules/docs/components-list/component-card.tsx b/www/src/modules/docs/components-list/component-card.tsx
index 3d8e5be6d..3f75da2c9 100644
--- a/www/src/modules/docs/components-list/component-card.tsx
+++ b/www/src/modules/docs/components-list/component-card.tsx
@@ -5,53 +5,20 @@ import { Link } from "@tanstack/react-router"
 
 import { cn } from "@/registry/lib/utils"
 
-import { CardHoverProvider, DemoCursor } from "./autoplay"
 import { componentDemos } from "./demos"
 
-function ComponentPreview({
-  children,
-  className,
-  stageRef,
-}: {
-  children: React.ReactNode
-  className?: string
-  stageRef?: React.Ref<HTMLDivElement>
-}) {
-  return (
-    <div
-      className={cn(
-        "relative h-40 w-full overflow-hidden rounded-lg border bg-bg",
-        className,
-      )}
-    >
-      {/* Clip on this inset, not the padded box (which clips at the border), so no
-          demo — any scale, overlay, preset or density — paints past the gap. The
-          stage is also the follower cursor's positioning + measurement frame. */}
-      <div
-        ref={stageRef}
-        className="absolute inset-4 flex items-center justify-center overflow-hidden"
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-
 interface ComponentCardProps {
   name: string
   slug: string
   href: string
   scale?: number
   previewClassName?: string
-  /** Overlay-scene demos fill the stage instead of being centered and scaled —
-   *  they manage their own framing and the "zoom out" choreography. */
+  /** The demo fills the card and manages its own framing (overlay scenes that
+   *  crop at the bottom edge) instead of being centered and scaled. */
   fill?: boolean
   /** Field-like demos render full-width (not scaled), so the field is responsive
    *  to the card and consistent across the set; the demo caps itself via max-width. */
   stretch?: boolean
-  /** Show a macOS pointer that follows the demo's simulated clicks (see DemoCursor).
-   *  Opt-in per component — only the demos that press/select a control. */
-  cursor?: boolean
 }
 
 export function ComponentCard({
@@ -62,13 +29,8 @@ export function ComponentCard({
   previewClassName,
   fill = false,
   stretch = false,
-  cursor = false,
 }: ComponentCardProps) {
   const Demo = componentDemos[slug]
-  // Hover/keyboard-focus on the card drives the demo's autoplay animation. The
-  // demo itself is `inert`, so the card is the only thing that can be pointed at
-  // or focused — it broadcasts that state down through CardHoverProvider.
-  const [active, setActive] = useState(false)
   const stageRef = useRef<HTMLDivElement>(null)
   const demoRef = useRef<HTMLDivElement>(null)
 
@@ -109,50 +71,49 @@ export function ComponentCard({
       aria-label={name}
       data-component={slug}
       className="group flex flex-col items-center gap-3 rounded-lg focus-reset focus-visible:focus-ring"
-      onPointerEnter={() => setActive(true)}
-      onPointerLeave={() => setActive(false)}
-      onFocus={() => setActive(true)}
-      onBlur={() => setActive(false)}
     >
-      <ComponentPreview
-        stageRef={stageRef}
+      <div
         className={cn(
-          "w-full transition-colors group-hover:border-border-control",
+          "relative h-40 w-full overflow-hidden rounded-lg border bg-bg transition-colors group-hover:border-border-control",
           previewClassName,
         )}
       >
-        {/* The demo is a non-interactive preview: `inert` keeps its controls out of
-            the tab order and lets clicks fall through to the card link, so the whole
-            card navigates instead of an embedded demo (Modal/Menu/Popover…) hijacking
-            the click. `inert` also blocks focus, so the autoplay animations (which
-            simulate focus/press/open states) can never steal the page's real focus. */}
-        <CardHoverProvider value={active}>
-          {fill ? (
-            <div inert className="absolute inset-0">
-              {content}
-            </div>
-          ) : stretch ? (
-            <div inert className="flex w-full items-center justify-center">
-              {content}
-            </div>
-          ) : (
-            <div
-              ref={demoRef}
-              inert
-              className="flex items-center justify-center"
-              style={{ transform: `scale(${Math.min(scale, fit)})` }}
-            >
-              {content}
-            </div>
-          )}
-        </CardHoverProvider>
-        {cursor && !fill && (
-          <DemoCursor containerRef={stageRef} active={active} />
+        {/* The demo is a non-interactive preview: `inert` keeps its controls out
+            of the tab order and lets clicks fall through to the card link, so the
+            whole card navigates instead of an embedded demo hijacking the click. */}
+        {fill ? (
+          <div inert className="absolute inset-0">
+            {content}
+          </div>
+        ) : (
+          <div
+            ref={stageRef}
+            className="absolute inset-4 flex items-center justify-center overflow-hidden"
+          >
+            {stretch ? (
+              <div inert className="flex w-full items-center justify-center">
+                {content}
+              </div>
+            ) : (
+              <div
+                ref={demoRef}
+                inert
+                className="flex items-center justify-center"
+                style={{ transform: `scale(${Math.min(scale, fit)})` }}
+              >
+                {content}
+              </div>
+            )}
+          </div>
         )}
-      </ComponentPreview>
-      <span className="text-sm font-medium text-fg group-hover:underline">
-        {name}
-      </span>
+        {/* A wash over the demo on hover/focus: the card reads as a preview you
+            open, not a control you operate. */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 z-10 bg-fg/5 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-visible:opacity-100"
+        />
+      </div>
+      <span className="text-sm font-medium text-fg">{name}</span>
     </Link>
   )
 }
diff --git a/www/src/modules/docs/components-list/components-data.ts b/www/src/modules/docs/components-list/components-data.ts
index c05ef524a..d55e3084f 100644
--- a/www/src/modules/docs/components-list/components-data.ts
+++ b/www/src/modules/docs/components-list/components-data.ts
@@ -7,15 +7,12 @@ export interface ComponentInfo {
   /** Scale the preview down (default 1 — native size). Set only on demos too
    *  large for the card stage (calendars, tables, the command palette…). */
   scale?: number
-  /** Render the demo full-bleed (overlay "zoom out" scenes manage their own
-   *  framing) instead of the default centered + scaled preview. */
+  /** Render the demo full-bleed (overlay scenes manage their own framing and
+   *  crop at the card's bottom edge) instead of the default centered + scaled preview. */
   fill?: boolean
   /** Render the demo full-width (responsive, not scaled) — for field-like demos
    *  that should share one consistent, responsive width. */
   stretch?: boolean
-  /** Show a macOS pointer that follows the demo's simulated clicks. Set on demos
-   *  that press or select a control (buttons, toggles, tabs, lists…). */
-  cursor?: boolean
   status: ComponentStatus
 }
 
@@ -34,35 +31,30 @@ export const componentsData: ComponentCategory[] = [
         name: "Button",
         slug: "button",
         href: "/docs/components/button",
-        cursor: true,
         status: "done",
       },
       {
         name: "ToggleButton",
         slug: "toggle-button",
         href: "/docs/components/toggle-button",
-        cursor: true,
         status: "in review",
       },
       {
         name: "ToggleButtonGroup",
         slug: "toggle-button-group",
         href: "/docs/components/toggle-button-group",
-        cursor: true,
         status: "in review",
       },
       {
         name: "FileTrigger",
         slug: "file-trigger",
         href: "/docs/components/file-trigger",
-        cursor: true,
         status: "done",
       },
       {
         name: "Group",
         slug: "group",
         href: "/docs/components/group",
-        cursor: true,
         status: "done",
       },
     ],
@@ -129,28 +121,24 @@ export const componentsData: ComponentCategory[] = [
         name: "Checkbox",
         slug: "checkbox",
         href: "/docs/components/checkbox",
-        cursor: true,
         status: "done",
       },
       {
         name: "CheckboxGroup",
         slug: "checkbox-group",
         href: "/docs/components/checkbox-group",
-        cursor: true,
         status: "done",
       },
       {
         name: "RadioGroup",
         slug: "radio-group",
         href: "/docs/components/radio-group",
-        cursor: true,
         status: "in review",
       },
       {
         name: "Switch",
         slug: "switch",
         href: "/docs/components/switch",
-        cursor: true,
         status: "in review",
       },
       {
@@ -285,7 +273,6 @@ export const componentsData: ComponentCategory[] = [
         slug: "list-box",
         href: "/docs/components/list-box",
         scale: 0.95,
-        cursor: true,
         status: "done",
       },
       {
@@ -299,7 +286,6 @@ export const componentsData: ComponentCategory[] = [
         name: "TagGroup",
         slug: "tag-group",
         href: "/docs/components/tag-group",
-        cursor: true,
         status: "done",
       },
     ],
@@ -318,7 +304,6 @@ export const componentsData: ComponentCategory[] = [
         name: "Tabs",
         slug: "tabs",
         href: "/docs/components/tabs",
-        cursor: true,
         status: "pending",
       },
       {
@@ -338,7 +323,6 @@ export const componentsData: ComponentCategory[] = [
         name: "Pagination",
         slug: "pagination",
         href: "/docs/components/pagination",
-        cursor: true,
         status: "in review",
       },
       {
@@ -494,7 +478,6 @@ export const componentsData: ComponentCategory[] = [
         name: "ColorSwatchPicker",
         slug: "color-swatch-picker",
         href: "/docs/components/color-swatch-picker",
-        cursor: true,
         status: "pending",
       },
     ],
@@ -528,7 +511,6 @@ export const componentsData: ComponentCategory[] = [
         name: "Tooltip",
         slug: "tooltip",
         href: "/docs/components/tooltip",
-        fill: true,
         status: "pending",
       },
     ],
diff --git a/www/src/modules/docs/components-list/components-grid.tsx b/www/src/modules/docs/components-list/components-grid.tsx
index 1b4e7df9a..be6ac20b7 100644
--- a/www/src/modules/docs/components-list/components-grid.tsx
+++ b/www/src/modules/docs/components-list/components-grid.tsx
@@ -49,7 +49,6 @@ export function ComponentsGrid({ category }: { category: string }) {
             scale={component.scale}
             fill={component.fill}
             stretch={component.stretch}
-            cursor={component.cursor}
             previewClassName={CATEGORY_PREVIEW_HEIGHT[category]}
           />
         ))}
diff --git a/www/src/modules/docs/components-list/demos/accordion.tsx b/www/src/modules/docs/components-list/demos/accordion.tsx
index 6d7e0cf19..4f8c42411 100644
--- a/www/src/modules/docs/components-list/demos/accordion.tsx
+++ b/www/src/modules/docs/components-list/demos/accordion.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { Accordion } from "@/registry/ui/accordion"
 import {
   Disclosure,
@@ -7,17 +5,9 @@ import {
   DisclosureTrigger,
 } from "@/registry/ui/disclosure"
 
-import { useStepAutoplay } from "../autoplay"
-
 export function AccordionDemo() {
-  const { index } = useStepAutoplay(2, { dwell: 1600 })
-  const expandedKeys = index === 0 ? ["react"] : ["nextjs"]
   return (
-    <Accordion
-      className="w-72"
-      expandedKeys={expandedKeys}
-      onExpandedChange={() => {}}
-    >
+    <Accordion className="w-72" defaultExpandedKeys={["react"]}>
       <Disclosure id="react">
         <DisclosureTrigger>What is React?</DisclosureTrigger>
         <DisclosurePanel>
diff --git a/www/src/modules/docs/components-list/demos/button.tsx b/www/src/modules/docs/components-list/demos/button.tsx
index 8d0b7ad39..0be46053b 100644
--- a/www/src/modules/docs/components-list/demos/button.tsx
+++ b/www/src/modules/docs/components-list/demos/button.tsx
@@ -1,18 +1,13 @@
-"use client"
-
+import { PlusIcon } from "@/registry/__generated__/icons"
 import { Button } from "@/registry/ui/button"
 
-import { DemoPress, useAutoplay } from "../autoplay"
-
 export function ButtonDemo() {
-  const { phase } = useAutoplay([
-    { name: "idle", duration: 850 },
-    { name: "hover", duration: 520 },
-    { name: "press", duration: 260 },
-  ])
   return (
-    <DemoPress phase={phase}>
-      <Button>Button</Button>
-    </DemoPress>
+    <div className="flex items-center gap-3">
+      <Button variant="primary">Button</Button>
+      <Button isIconOnly aria-label="Add">
+        <PlusIcon />
+      </Button>
+    </div>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/calendar.tsx b/www/src/modules/docs/components-list/demos/calendar.tsx
index 1b4afcfe2..9d423350a 100644
--- a/www/src/modules/docs/components-list/demos/calendar.tsx
+++ b/www/src/modules/docs/components-list/demos/calendar.tsx
@@ -1,25 +1,12 @@
-"use client"
-
 import { getLocalTimeZone, today } from "@internationalized/date"
 
 import { Calendar } from "@/registry/ui/calendar"
 
-import { useStepAutoplay } from "../autoplay"
-
-// Mid-month days that exist in every month, so `.set({ day })` always lands on a
-// real cell in the currently shown month without spilling into the next one.
-const DAYS = [8, 15, 22, 18]
-const BASE = today(getLocalTimeZone())
-
-// On hover, the selected day hops across a few dates — driving the calendar's
-// controlled `value` (a CalendarDate). Rests on the first day when idle.
 export function CalendarDemo() {
-  const { index } = useStepAutoplay(DAYS.length, { dwell: 1100 })
   return (
     <Calendar
       aria-label="Select date"
-      value={BASE.set({ day: DAYS[index] })}
-      onChange={() => {}}
+      defaultValue={today(getLocalTimeZone()).set({ day: 15 })}
     />
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/checkbox-group.tsx b/www/src/modules/docs/components-list/demos/checkbox-group.tsx
index a7f9289ce..24ccbd55a 100644
--- a/www/src/modules/docs/components-list/demos/checkbox-group.tsx
+++ b/www/src/modules/docs/components-list/demos/checkbox-group.tsx
@@ -1,17 +1,10 @@
-"use client"
-
 import { Checkbox, CheckboxControl } from "@/registry/ui/checkbox"
 import { CheckboxGroup } from "@/registry/ui/checkbox-group"
 import { FieldGroup, Label } from "@/registry/ui/field"
 
-import { useCycle } from "../autoplay"
-
-const KEYS = ["nextjs", "remix", "astro"]
-
 export function CheckboxGroupDemo() {
-  const { item } = useCycle(KEYS, { dwell: 1300 })
   return (
-    <CheckboxGroup value={[item]} onChange={() => {}}>
+    <CheckboxGroup defaultValue={["nextjs", "astro"]}>
       <Label>React frameworks</Label>
       <FieldGroup>
         <Checkbox value="nextjs">
diff --git a/www/src/modules/docs/components-list/demos/checkbox.tsx b/www/src/modules/docs/components-list/demos/checkbox.tsx
index edde72b18..2743529fb 100644
--- a/www/src/modules/docs/components-list/demos/checkbox.tsx
+++ b/www/src/modules/docs/components-list/demos/checkbox.tsx
@@ -1,18 +1,17 @@
-"use client"
-
 import { Checkbox, CheckboxControl } from "@/registry/ui/checkbox"
 import { Label } from "@/registry/ui/field"
 
-import { DemoPress, useToggleAutoplay } from "../autoplay"
-
 export function CheckboxDemo() {
-  const { selected, pressing } = useToggleAutoplay({ initial: true })
   return (
-    <Checkbox isSelected={selected} onChange={() => {}}>
-      <DemoPress pressing={pressing}>
+    <div className="flex flex-col gap-3">
+      <Checkbox defaultSelected>
+        <CheckboxControl />
+        <Label>Accept terms</Label>
+      </Checkbox>
+      <Checkbox>
         <CheckboxControl />
-      </DemoPress>
-      <Label>Accept terms</Label>
-    </Checkbox>
+        <Label>Subscribe to updates</Label>
+      </Checkbox>
+    </div>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/color-area.tsx b/www/src/modules/docs/components-list/demos/color-area.tsx
index f49b0eaf3..2a13b9217 100644
--- a/www/src/modules/docs/components-list/demos/color-area.tsx
+++ b/www/src/modules/docs/components-list/demos/color-area.tsx
@@ -1,28 +1,7 @@
-"use client"
-
-import * as ColorAreaPrimitives from "react-aria-components/ColorArea"
+import { parseColor } from "react-aria-components/ColorArea"
 
 import { ColorArea } from "@/registry/ui/color-area"
 
-import { useStepAutoplay } from "../autoplay"
-
-// Cycle a handful of colors spread across the 2D area; the thumb (ColorThumb,
-// positioned via `left`/`top`) CSS-transitions between the spots so it glides
-// diagonally instead of jumping.
-const COLORS = [
-  ColorAreaPrimitives.parseColor("hsl(0, 90%, 30%)"),
-  ColorAreaPrimitives.parseColor("hsl(0, 25%, 75%)"),
-  ColorAreaPrimitives.parseColor("hsl(0, 95%, 60%)"),
-  ColorAreaPrimitives.parseColor("hsl(0, 40%, 20%)"),
-]
-
 export function ColorAreaDemo() {
-  const { index } = useStepAutoplay(COLORS.length, { dwell: 1000 })
-  return (
-    <ColorArea
-      value={COLORS[index]}
-      onChange={() => {}}
-      className="[&_[data-slot=color-thumb]]:transition-[left,top] [&_[data-slot=color-thumb]]:duration-700 [&_[data-slot=color-thumb]]:ease-out"
-    />
-  )
+  return <ColorArea defaultValue={parseColor("hsl(0, 80%, 55%)")} />
 }
diff --git a/www/src/modules/docs/components-list/demos/color-field.tsx b/www/src/modules/docs/components-list/demos/color-field.tsx
index f2f29917a..9dbfdc870 100644
--- a/www/src/modules/docs/components-list/demos/color-field.tsx
+++ b/www/src/modules/docs/components-list/demos/color-field.tsx
@@ -1,19 +1,12 @@
-"use client"
-
 import { ColorField } from "@/registry/ui/color-field"
 import { Label } from "@/registry/ui/field"
 import { Input } from "@/registry/ui/input"
 
-import { DemoFocus, useTypewriter } from "../autoplay"
-
 export function ColorFieldDemo() {
-  const { value, active } = useTypewriter("#7f00ff")
   return (
     <ColorField defaultValue="#7f007f" className="w-full max-w-[11.5rem]">
       <Label>Color</Label>
-      <DemoFocus active={active}>
-        <Input value={value} readOnly className="w-full" />
-      </DemoFocus>
+      <Input className="w-full" />
     </ColorField>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/color-picker.tsx b/www/src/modules/docs/components-list/demos/color-picker.tsx
index 2aed52a64..0bdc3616e 100644
--- a/www/src/modules/docs/components-list/demos/color-picker.tsx
+++ b/www/src/modules/docs/components-list/demos/color-picker.tsx
@@ -1,25 +1,15 @@
-"use client"
-
-import { ChevronDownIcon } from "lucide-react"
-
+import { ChevronDownIcon } from "@/registry/__generated__/icons"
 import { Button } from "@/registry/ui/button"
 import { ColorEditor } from "@/registry/ui/color-editor"
 
-import { OverlayScene, useOpenAutoplay } from "../autoplay"
+import { OverlayPreview } from "../overlay"
 
 const COLOR = "#7f007f"
 
-// Trigger → hover → click → the color editor popover unfolds and the scene zooms
-// out. The trigger is a real Button showing the current swatch + hex; the surface
-// is the real ColorEditor (area + hue slider + hex field).
 export function ColorPickerDemo() {
-  const { phase } = useOpenAutoplay()
   return (
-    <OverlayScene
-      phase={phase}
+    <OverlayPreview
       variant="popover"
-      side="bottom"
-      openScale={0.66}
       surfaceClassName="w-56 p-2"
       trigger={
         <Button className="w-40 justify-start font-normal">
@@ -36,6 +26,6 @@ export function ColorPickerDemo() {
       }
     >
       <ColorEditor defaultValue={COLOR} showFormatSelector={false} />
-    </OverlayScene>
+    </OverlayPreview>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/color-slider.tsx b/www/src/modules/docs/components-list/demos/color-slider.tsx
index a917263f1..7aea479c5 100644
--- a/www/src/modules/docs/components-list/demos/color-slider.tsx
+++ b/www/src/modules/docs/components-list/demos/color-slider.tsx
@@ -1,6 +1,4 @@
-"use client"
-
-import * as ColorAreaPrimitives from "react-aria-components/ColorArea"
+import { parseColor } from "react-aria-components/ColorArea"
 
 import {
   ColorSlider,
@@ -9,23 +7,9 @@ import {
 } from "@/registry/ui/color-slider"
 import { Description, Label } from "@/registry/ui/field"
 
-import { useValueAutoplay } from "../autoplay"
-
-// Step the hue through a few stops; the thumb (ColorThumb, positioned via
-// `left`) CSS-transitions between them. We rebuild the Color from the numeric
-// hue each render — cheaper than animating a Color object per frame, and the
-// gradient track + Output update for free.
-const HUES = [200, 310, 20, 130]
-
 export function ColorSliderDemo() {
-  const { value: hue } = useValueAutoplay(HUES, { dwell: 850 })
   return (
-    <ColorSlider
-      channel="hue"
-      value={ColorAreaPrimitives.parseColor(`hsl(${hue}, 100%, 50%)`)}
-      onChange={() => {}}
-      className="[&_[data-slot=color-thumb]]:transition-[left,inset-inline-start] [&_[data-slot=color-thumb]]:duration-700 [&_[data-slot=color-thumb]]:ease-out"
-    >
+    <ColorSlider channel="hue" defaultValue={parseColor("hsl(200, 100%, 50%)")}>
       <div className="flex items-center justify-between">
         <Label>Hue</Label>
         <ColorSliderOutput />
diff --git a/www/src/modules/docs/components-list/demos/color-swatch-picker.tsx b/www/src/modules/docs/components-list/demos/color-swatch-picker.tsx
index 8987f020c..b8f11635c 100644
--- a/www/src/modules/docs/components-list/demos/color-swatch-picker.tsx
+++ b/www/src/modules/docs/components-list/demos/color-swatch-picker.tsx
@@ -1,16 +1,8 @@
-"use client"
-
-import * as ColorAreaPrimitives from "react-aria-components/ColorArea"
-
 import {
   ColorSwatchPicker,
   ColorSwatchPickerItem,
 } from "@/registry/ui/color-swatch-picker"
 
-import { useCycle } from "../autoplay"
-
-// Selection is controlled by a Color matched against each item's `color`, so we
-// cycle `value` through the swatches — the selected one lights up its ring.
 const SWATCHES = [
   "#FF6B6B",
   "#FFA07A",
@@ -21,12 +13,8 @@ const SWATCHES = [
 ]
 
 export function ColorSwatchPickerDemo() {
-  const { item } = useCycle(SWATCHES, { dwell: 750 })
   return (
-    <ColorSwatchPicker
-      value={ColorAreaPrimitives.parseColor(item)}
-      onChange={() => {}}
-    >
+    <ColorSwatchPicker defaultValue="#4D96FF">
       {SWATCHES.map((color) => (
         <ColorSwatchPickerItem key={color} color={color} />
       ))}
diff --git a/www/src/modules/docs/components-list/demos/combobox.tsx b/www/src/modules/docs/components-list/demos/combobox.tsx
index 2d22dc333..9ea3e61f5 100644
--- a/www/src/modules/docs/components-list/demos/combobox.tsx
+++ b/www/src/modules/docs/components-list/demos/combobox.tsx
@@ -1,25 +1,18 @@
-"use client"
-
-import { ChevronDownIcon } from "lucide-react"
-
+import { ChevronDownIcon } from "@/registry/__generated__/icons"
 import { Button } from "@/registry/ui/button"
 import { Input, InputGroup, InputGroupAddon } from "@/registry/ui/input"
 import { ListBox, ListBoxItem } from "@/registry/ui/list-box"
 
-import { OverlayScene, useOpenAutoplay } from "../autoplay"
+import { OverlayPreview } from "../overlay"
 
 export function ComboboxDemo() {
-  const { phase } = useOpenAutoplay()
   return (
-    <OverlayScene
-      phase={phase}
+    <OverlayPreview
       variant="menu"
-      side="bottom"
-      fluid
       surfaceClassName="w-full max-w-[11.5rem] p-0"
       trigger={
         <InputGroup className="w-full max-w-[11.5rem]">
-          <Input placeholder="Select country..." value="France" readOnly />
+          <Input placeholder="Select country..." defaultValue="France" />
           <InputGroupAddon>
             <Button variant="quiet" isIconOnly>
               <ChevronDownIcon />
@@ -31,13 +24,13 @@ export function ComboboxDemo() {
       <ListBox
         aria-label="Country"
         selectionMode="single"
-        selectedKeys={["france"]}
+        defaultSelectedKeys={["france"]}
         className="border-0 bg-transparent shadow-none"
       >
         <ListBoxItem id="canada">Canada</ListBoxItem>
         <ListBoxItem id="france">France</ListBoxItem>
         <ListBoxItem id="germany">Germany</ListBoxItem>
       </ListBox>
-    </OverlayScene>
+    </OverlayPreview>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/command.tsx b/www/src/modules/docs/components-list/demos/command.tsx
index df05067a4..0a61b14b7 100644
--- a/www/src/modules/docs/components-list/demos/command.tsx
+++ b/www/src/modules/docs/components-list/demos/command.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import {
   Command,
   CommandContent,
@@ -7,33 +5,22 @@ import {
   CommandItem,
 } from "@/registry/ui/command"
 
-import { useTypewriter } from "../autoplay"
-
-// Command's own autocomplete filter can't be driven through props (its
-// `inputValue` doesn't reach the wrapped Autocomplete), so we type into the
-// controlled input — a `value` prop wins over the autocomplete's internal
-// state — and filter the visible items ourselves to mirror the live filtering.
-const ITEMS = ["Create new file...", "Create new folder...", "Open settings"]
-
 export function CommandDemo() {
-  const { value } = useTypewriter("settings")
-  const query = value.trim().toLowerCase()
-  const visible = ITEMS.filter((item) => item.toLowerCase().includes(query))
   return (
     <Command className="w-60">
       <CommandInput
         aria-label="Search commands"
         placeholder="Type a command..."
         className="w-full"
-        value={value}
-        onChange={() => {}}
       />
       <CommandContent className="h-30">
-        {visible.map((item) => (
-          <CommandItem key={item} textValue={item}>
-            {item}
-          </CommandItem>
-        ))}
+        <CommandItem textValue="Create new file...">
+          Create new file...
+        </CommandItem>
+        <CommandItem textValue="Create new folder...">
+          Create new folder...
+        </CommandItem>
+        <CommandItem textValue="Open settings">Open settings</CommandItem>
       </CommandContent>
     </Command>
   )
diff --git a/www/src/modules/docs/components-list/demos/date-field.tsx b/www/src/modules/docs/components-list/demos/date-field.tsx
index 0227e8818..c15bad7e4 100644
--- a/www/src/modules/docs/components-list/demos/date-field.tsx
+++ b/www/src/modules/docs/components-list/demos/date-field.tsx
@@ -1,27 +1,17 @@
-"use client"
-
 import { parseDate } from "@internationalized/date"
 
 import { DateField } from "@/registry/ui/date-field"
 import { Label } from "@/registry/ui/field"
 import { DateInput } from "@/registry/ui/input"
 
-import { DemoFocus, useCardHover } from "../autoplay"
-
-// Shows a real date and lights up its real focus ring while the card is hovered.
-// We only set `data-focused` on the field (no real `:focus`), so it never steals
-// the page's focus.
 export function DateFieldDemo() {
-  const active = useCardHover()
   return (
     <DateField
       defaultValue={parseDate("2024-06-12")}
       className="w-full max-w-[11.5rem]"
     >
       <Label>Meeting date</Label>
-      <DemoFocus active={active}>
-        <DateInput className="w-full" />
-      </DemoFocus>
+      <DateInput className="w-full" />
     </DateField>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/date-picker.tsx b/www/src/modules/docs/components-list/demos/date-picker.tsx
index f4250ecdb..055c580fd 100644
--- a/www/src/modules/docs/components-list/demos/date-picker.tsx
+++ b/www/src/modules/docs/components-list/demos/date-picker.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { parseDate } from "@internationalized/date"
 
 import { CalendarIcon } from "@/registry/__generated__/icons"
@@ -8,29 +6,20 @@ import { Calendar } from "@/registry/ui/calendar"
 import { DateField } from "@/registry/ui/date-field"
 import { DateInput, InputGroup, InputGroupAddon } from "@/registry/ui/input"
 
-import { OverlayScene, useOpenAutoplay } from "../autoplay"
+import { OverlayPreview } from "../overlay"
 
 const VALUE = parseDate("2024-06-12")
 
-// Trigger → hover → click → the calendar popover unfolds and the scene zooms out.
-// The trigger is the real closed input group; the surface is the real Calendar,
-// its selection matching the date shown in the field.
 export function DatePickerDemo() {
-  const { phase } = useOpenAutoplay()
   return (
-    <OverlayScene
-      phase={phase}
+    <OverlayPreview
       variant="popover"
-      side="bottom"
-      fluid
-      openScale={0.6}
       surfaceClassName="p-2"
       trigger={
         <DateField
           className="w-full max-w-[11.5rem]"
           aria-label="Date"
-          value={VALUE}
-          onChange={() => {}}
+          defaultValue={VALUE}
         >
           <InputGroup className="w-full">
             <DateInput />
@@ -43,12 +32,7 @@ export function DatePickerDemo() {
         </DateField>
       }
     >
-      <Calendar
-        aria-label="Date"
-        className="mx-auto"
-        value={VALUE}
-        onChange={() => {}}
-      />
-    </OverlayScene>
+      <Calendar aria-label="Date" defaultValue={VALUE} />
+    </OverlayPreview>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/drawer.tsx b/www/src/modules/docs/components-list/demos/drawer.tsx
index 0e70a137a..7662a78d5 100644
--- a/www/src/modules/docs/components-list/demos/drawer.tsx
+++ b/www/src/modules/docs/components-list/demos/drawer.tsx
@@ -1,24 +1,17 @@
-"use client"
-
 import { Button } from "@/registry/ui/button"
 import { DialogHeader, DialogTitle } from "@/registry/ui/dialog"
 
-import { OverlayScene, useOpenAutoplay } from "../autoplay"
+import { OverlayPreview } from "../overlay"
 
 export function DrawerDemo() {
-  const { phase } = useOpenAutoplay()
   return (
-    <OverlayScene
-      phase={phase}
-      variant="drawer"
-      trigger={<Button>Open Drawer</Button>}
-    >
+    <OverlayPreview variant="drawer" trigger={<Button>Open Drawer</Button>}>
       <DialogHeader>
         <DialogTitle>Settings</DialogTitle>
       </DialogHeader>
       <p className="mt-1 text-fg-muted">
         Manage your workspace preferences and notifications.
       </p>
-    </OverlayScene>
+    </OverlayPreview>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/field.tsx b/www/src/modules/docs/components-list/demos/field.tsx
index 0b8f73e8a..f29d264fa 100644
--- a/www/src/modules/docs/components-list/demos/field.tsx
+++ b/www/src/modules/docs/components-list/demos/field.tsx
@@ -1,18 +1,11 @@
-"use client"
-
 import { Description, Field, Label } from "@/registry/ui/field"
 import { Input } from "@/registry/ui/input"
 
-import { DemoFocus, useTypewriter } from "../autoplay"
-
 export function FieldDemo() {
-  const { value, active } = useTypewriter("john_doe")
   return (
     <Field className="w-full max-w-[11.5rem]">
       <Label>Username</Label>
-      <DemoFocus active={active}>
-        <Input value={value} readOnly placeholder="Enter username" />
-      </DemoFocus>
+      <Input placeholder="Enter username" />
       <Description>Choose a unique username</Description>
     </Field>
   )
diff --git a/www/src/modules/docs/components-list/demos/file-trigger.tsx b/www/src/modules/docs/components-list/demos/file-trigger.tsx
index 1cb52188a..3b69e2242 100644
--- a/www/src/modules/docs/components-list/demos/file-trigger.tsx
+++ b/www/src/modules/docs/components-list/demos/file-trigger.tsx
@@ -1,25 +1,14 @@
-"use client"
-
 import { UploadIcon } from "@/registry/__generated__/icons"
 import { Button } from "@/registry/ui/button"
 import { FileTrigger } from "@/registry/ui/file-trigger"
 
-import { DemoPress, useAutoplay } from "../autoplay"
-
 export function FileTriggerDemo() {
-  const { phase } = useAutoplay([
-    { name: "idle", duration: 850 },
-    { name: "hover", duration: 520 },
-    { name: "press", duration: 260 },
-  ])
   return (
-    <FileTrigger onSelect={(e) => console.log(e)}>
-      <DemoPress phase={phase}>
-        <Button>
-          <UploadIcon />
-          Upload
-        </Button>
-      </DemoPress>
+    <FileTrigger>
+      <Button>
+        <UploadIcon />
+        Upload
+      </Button>
     </FileTrigger>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/group.tsx b/www/src/modules/docs/components-list/demos/group.tsx
index 8b25c3fa1..ee9e3e346 100644
--- a/www/src/modules/docs/components-list/demos/group.tsx
+++ b/www/src/modules/docs/components-list/demos/group.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { EllipsisIcon } from "lucide-react"
 
 import { SearchIcon } from "@/registry/__generated__/icons"
@@ -7,31 +5,18 @@ import { Button } from "@/registry/ui/button"
 import { Group } from "@/registry/ui/group"
 import { Input } from "@/registry/ui/input"
 
-import { DemoPress, useAutoplay } from "../autoplay"
-
 export function GroupDemo() {
-  const { phase } = useAutoplay([
-    { name: "idle", duration: 900 },
-    { name: "hover", duration: 540 },
-    { name: "press", duration: 260 },
-  ])
   return (
     <div className="flex flex-col items-center gap-4">
       <Group orientation="horizontal">
         <Button>Button</Button>
-        {/* Wrapping the trailing cell in DemoPress makes the wrapper the
-            Group's last child, so the Group's positional `rounded-l-none`
-            lands on the wrapper instead of the button — re-flatten the
-            button's left edge here to keep the segmented seam. */}
-        <DemoPress phase={phase}>
-          <Button isIconOnly className="rounded-l-none">
-            <EllipsisIcon />
-          </Button>
-        </DemoPress>
+        <Button isIconOnly aria-label="More">
+          <EllipsisIcon />
+        </Button>
       </Group>
       <Group orientation="horizontal">
-        <Input className="w-32" />
-        <Button isIconOnly>
+        <Input className="w-32" placeholder="Search..." />
+        <Button isIconOnly aria-label="Search">
           <SearchIcon />
         </Button>
       </Group>
diff --git a/www/src/modules/docs/components-list/demos/input-group.tsx b/www/src/modules/docs/components-list/demos/input-group.tsx
index 7b5d99638..aec1e8e74 100644
--- a/www/src/modules/docs/components-list/demos/input-group.tsx
+++ b/www/src/modules/docs/components-list/demos/input-group.tsx
@@ -1,19 +1,10 @@
-"use client"
-
 import { Input, InputGroup, InputGroupAddon } from "@/registry/ui/input"
 
-import { DemoFocus, useTypewriter } from "../autoplay"
-
 export function InputGroupDemo() {
-  const { value, active } = useTypewriter("john_doe")
   return (
     <InputGroup className="w-full max-w-[11.5rem]">
       <InputGroupAddon>@</InputGroupAddon>
-      {/* Drive the inner control's real focus: the group lights its own ring via
-          `has-[[data-input-control][data-focused]]`. */}
-      <DemoFocus active={active}>
-        <Input value={value} readOnly placeholder="username" />
-      </DemoFocus>
+      <Input placeholder="username" />
     </InputGroup>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/input.tsx b/www/src/modules/docs/components-list/demos/input.tsx
index a5efffa80..3928db07d 100644
--- a/www/src/modules/docs/components-list/demos/input.tsx
+++ b/www/src/modules/docs/components-list/demos/input.tsx
@@ -1,19 +1,7 @@
-"use client"
-
 import { Input } from "@/registry/ui/input"
 
-import { DemoFocus, useTypewriter } from "../autoplay"
-
 export function InputDemo() {
-  const { value, active } = useTypewriter("Hello world")
   return (
-    <DemoFocus active={active}>
-      <Input
-        value={value}
-        readOnly
-        placeholder="Enter text..."
-        className="w-full max-w-[11.5rem]"
-      />
-    </DemoFocus>
+    <Input placeholder="Enter text..." className="w-full max-w-[11.5rem]" />
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/link.tsx b/www/src/modules/docs/components-list/demos/link.tsx
index d2f31e74d..a1c846d79 100644
--- a/www/src/modules/docs/components-list/demos/link.tsx
+++ b/www/src/modules/docs/components-list/demos/link.tsx
@@ -1,23 +1,17 @@
-"use client"
-
 import { useStyles as useLinkStyles } from "@/registry/ui/link/styles"
 
-import { DemoState, useAutoplay } from "../autoplay"
-
-// The card itself is an <a>, so a real <Link> (also an <a>) would nest anchors.
-// We render the real link STYLES on a span instead — exact, preset-accurate look
-// with valid markup — and drive its real focus-visible ring so it still animates.
+// The card itself is an <a>, so a real <Link> would nest anchors. Render the
+// real link styles on spans instead — same look under every preset.
 export function LinkDemo() {
   const linkStyles = useLinkStyles()
-  const { phase } = useAutoplay([
-    { name: "idle", duration: 1000 },
-    { name: "focus", duration: 900 },
-  ])
   return (
-    <DemoState flags={{ focusVisible: phase === "focus" }}>
+    <div className="flex items-center gap-4 text-sm">
       <span data-rac="" className={linkStyles()}>
-        @mehdibha
+        Documentation
+      </span>
+      <span data-rac="" className={linkStyles({ variant: "quiet" })}>
+        Changelog
       </span>
-    </DemoState>
+    </div>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/list-box.tsx b/www/src/modules/docs/components-list/demos/list-box.tsx
index d6aabf4ed..ebf55f85e 100644
--- a/www/src/modules/docs/components-list/demos/list-box.tsx
+++ b/www/src/modules/docs/components-list/demos/list-box.tsx
@@ -1,19 +1,11 @@
-"use client"
-
 import { ListBox, ListBoxItem } from "@/registry/ui/list-box"
 
-import { useCycle } from "../autoplay"
-
-const KEYS = ["nextjs", "remix", "astro", "gatsby"]
-
 export function ListBoxDemo() {
-  const { item } = useCycle(KEYS, { dwell: 1150 })
   return (
     <ListBox
       aria-label="Framework"
       selectionMode="single"
-      selectedKeys={[item]}
-      onSelectionChange={() => {}}
+      defaultSelectedKeys={["remix"]}
     >
       <ListBoxItem id="nextjs">Next.js</ListBoxItem>
       <ListBoxItem id="remix">Remix</ListBoxItem>
diff --git a/www/src/modules/docs/components-list/demos/mention.tsx b/www/src/modules/docs/components-list/demos/mention.tsx
index 57a52f455..f5353712d 100644
--- a/www/src/modules/docs/components-list/demos/mention.tsx
+++ b/www/src/modules/docs/components-list/demos/mention.tsx
@@ -1,221 +1,57 @@
-"use client"
-
 import { cn } from "@/registry/lib/utils"
 import { Avatar, AvatarFallback } from "@/registry/ui/avatar"
 
-import { DemoCaret, useAutoplay } from "../autoplay"
-
-// A faithful, looping reproduction of the Mention component: at rest the
-// suggestions popover is open on an active `@` query; on hover the scene plays —
-// pick the first suggestion, keep writing, then `@`-mention a second person.
-// Every surface uses the real design-system token classes (field, popover,
-// highlighted menu item) so it restyles under any preset.
+import { OverlayPreview } from "../overlay"
 
-interface Person {
-  id: string
-  name: string
-}
-
-const PEOPLE: Person[] = [
-  { id: "alexmiller", name: "Alex Miller" },
+const PEOPLE = [
   { id: "amandarivera", name: "Amanda Rivera" },
-  { id: "sarahjones", name: "Sarah Jones" },
-  { id: "davidkim", name: "David Kim" },
-  { id: "emmawatson", name: "Emma Watson" },
+  { id: "adamscott", name: "Adam Scott" },
+  { id: "ariachen", name: "Aria Chen" },
 ]
 
-// The people matching the active `@` query, minus anyone already mentioned.
-function suggestions(query: string | null, mentioned: string[]): Person[] {
-  if (query === null) return []
-  const q = query.toLowerCase()
-  return PEOPLE.filter((p) => {
-    if (mentioned.includes(p.id)) return false
-    if (q === "") return true
-    return (
-      p.name.toLowerCase().replace(/\s+/g, "").startsWith(q) ||
-      p.id.startsWith(q)
-    )
-  }).slice(0, 3)
-}
-
-interface Part {
-  mention: boolean
-  text: string
-}
-
-interface Frame {
-  parts: Part[]
-  query: string | null
-  pressing: boolean
-  /** How long this frame holds before advancing, in ms. */
-  d: number
-}
-
-// Author the scene once as a flat list of keyframes; feeding the durations into
-// `useAutoplay` gives looping, hover-gating and reduced-motion for free, and the
-// resting frame (index 0) is the "popover already open" default.
-function buildFrames(): Frame[] {
-  const frames: Frame[] = []
-  const parts: Part[] = [{ mention: false, text: "Great work " }]
-  let query: string | null = null
-
-  const snap = (d: number, pressing = false) =>
-    frames.push({ parts: parts.map((p) => ({ ...p })), query, pressing, d })
-
-  const typeText = (text: string, per = 90) => {
-    let tail = parts[parts.length - 1]
-    if (!tail || tail.mention) {
-      tail = { mention: false, text: "" }
-      parts.push(tail)
-    }
-    for (const ch of text) {
-      tail.text += ch
-      snap(per)
-    }
-  }
-
-  const typeQuery = (text: string, per = 105) => {
-    for (const ch of text) {
-      query = (query ?? "") + ch
-      snap(per)
-    }
-  }
-
-  const select = (id: string) => {
-    snap(220, true) // press the highlighted suggestion
-    parts.push({ mention: true, text: id })
-    parts.push({ mention: false, text: " " })
-    query = null
-  }
-
-  // First mention query is already open at rest.
-  query = "a"
-  snap(1300)
-  select("alexmiller")
-  snap(650)
-  typeText("and ")
-  snap(320)
-  // Type `@` to open the picker again, narrow it, and mention a second person.
-  query = ""
-  snap(380)
-  typeQuery("sa")
-  snap(620)
-  select("sarahjones")
-  snap(1700)
-
-  return frames
-}
-
-const FRAMES = buildFrames()
-const PHASES = FRAMES.map((f, i) => ({ name: String(i), duration: f.d }))
-const REST_FRAME: Frame = FRAMES[0] ?? {
-  parts: [],
-  query: null,
-  pressing: false,
-  d: 0,
-}
-
-const EASE = "cubic-bezier(0.32,0.72,0,1)"
-
-/** The popover unfolds out of the column flow, riding the field up as it opens. */
-function Surface({
-  open,
-  children,
-}: {
-  open: boolean
-  children: React.ReactNode
-}) {
+// The editor and suggestion rows use the real token classes (field, popover,
+// highlighted item) so the scene restyles under any preset.
+export function MentionDemo() {
   return (
-    <div
-      className="grid overflow-hidden"
-      style={{
-        gridTemplateRows: open ? "1fr" : "0fr",
-        transition: `grid-template-rows 300ms ${EASE}`,
-      }}
+    <OverlayPreview
+      variant="menu"
+      surfaceClassName="w-full max-w-[17rem]"
+      trigger={
+        <div className="w-full max-w-[17rem] rounded-(--input-radius) border border-border-focus bg-field px-3 py-2.5 text-sm/relaxed text-fg ring-2 ring-border-focus-muted">
+          Great work{" "}
+          <span className="rounded-sm bg-muted px-1 font-medium">
+            @alexmiller
+          </span>{" "}
+          and @a
+        </div>
+      }
     >
-      <div className="min-h-0">
+      {PEOPLE.map((person, i) => (
         <div
-          className="pt-2"
-          style={{
-            opacity: open ? 1 : 0,
-            transform: open ? "none" : "translateY(-4px) scale(0.96)",
-            transition: `opacity 200ms ease, transform 260ms ${EASE}`,
-          }}
+          key={person.id}
+          className={cn(
+            "flex items-center gap-2 rounded-sm px-2 py-1.5",
+            i === 0 && "bg-highlight text-fg-on-highlight",
+          )}
         >
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function MentionDemo() {
-  const { index } = useAutoplay(PHASES)
-  const frame = FRAMES[index] ?? REST_FRAME
-  const mentioned = frame.parts.filter((p) => p.mention).map((p) => p.text)
-  const items = suggestions(frame.query, mentioned)
-  const open = items.length > 0
-
-  return (
-    <div className="absolute inset-0 flex items-center justify-center px-6">
-      <div className="flex w-full max-w-[19rem] flex-col">
-        <div className="rounded-(--input-radius) border border-border-focus bg-field px-3 py-2.5 text-sm/relaxed text-fg ring-2 ring-border-focus-muted">
-          <span className="break-words whitespace-pre-wrap">
-            {frame.parts.map((p, i) =>
-              p.mention ? (
-                <span
-                  key={i}
-                  className="rounded-sm bg-muted px-1 font-medium text-fg"
-                >
-                  @{p.text}
-                </span>
-              ) : (
-                <span key={i}>{p.text}</span>
-              ),
-            )}
-            {frame.query !== null && <span>@{frame.query}</span>}
-            <DemoCaret />
-          </span>
-        </div>
-
-        <Surface open={open}>
-          <div
-            data-popover=""
-            className="rounded-(--popover-radius) border bg-popover p-1 shadow-md"
-          >
-            {items.map((person, i) => {
-              const active = i === 0
-              return (
-                <div
-                  key={person.id}
-                  className={cn(
-                    "flex items-center gap-2 rounded-sm px-2 py-1.5 transition-transform",
-                    active && "bg-highlight text-fg-on-highlight",
-                    active && frame.pressing && "scale-[0.98]",
-                  )}
-                >
-                  <Avatar size="sm">
-                    <AvatarFallback>{person.name.charAt(0)}</AvatarFallback>
-                  </Avatar>
-                  <div className="flex min-w-0 flex-col leading-tight">
-                    <span className="truncate text-[0.8rem] font-medium">
-                      {person.name}
-                    </span>
-                    <span
-                      className={cn(
-                        "truncate text-xs",
-                        active ? "text-fg-on-highlight/70" : "text-fg-muted",
-                      )}
-                    >
-                      @{person.id}
-                    </span>
-                  </div>
-                </div>
-              )
-            })}
+          <Avatar size="sm">
+            <AvatarFallback>{person.name.charAt(0)}</AvatarFallback>
+          </Avatar>
+          <div className="flex min-w-0 flex-col leading-tight">
+            <span className="truncate text-[0.8rem] font-medium">
+              {person.name}
+            </span>
+            <span
+              className={cn(
+                "truncate text-xs",
+                i === 0 ? "text-fg-on-highlight/70" : "text-fg-muted",
+              )}
+            >
+              @{person.id}
+            </span>
           </div>
-        </Surface>
-      </div>
-    </div>
+        </div>
+      ))}
+    </OverlayPreview>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/menu.tsx b/www/src/modules/docs/components-list/demos/menu.tsx
index 01643e8b3..e4fc11486 100644
--- a/www/src/modules/docs/components-list/demos/menu.tsx
+++ b/www/src/modules/docs/components-list/demos/menu.tsx
@@ -1,19 +1,13 @@
-"use client"
-
-import { MenuIcon } from "lucide-react"
-
+import { MenuIcon } from "@/registry/__generated__/icons"
 import { Button } from "@/registry/ui/button"
 import { ListBox, ListBoxItem } from "@/registry/ui/list-box"
 
-import { OverlayScene, useOpenAutoplay } from "../autoplay"
+import { OverlayPreview } from "../overlay"
 
 export function MenuDemo() {
-  const { phase } = useOpenAutoplay()
   return (
-    <OverlayScene
-      phase={phase}
+    <OverlayPreview
       variant="menu"
-      side="bottom"
       surfaceClassName="w-44 p-0"
       trigger={
         <Button aria-label="Menu" isIconOnly>
@@ -29,6 +23,6 @@ export function MenuDemo() {
         <ListBoxItem id="team">Create team</ListBoxItem>
         <ListBoxItem id="logout">Log out</ListBoxItem>
       </ListBox>
-    </OverlayScene>
+    </OverlayPreview>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/modal.tsx b/www/src/modules/docs/components-list/demos/modal.tsx
index 630d864c2..81d5db427 100644
--- a/www/src/modules/docs/components-list/demos/modal.tsx
+++ b/www/src/modules/docs/components-list/demos/modal.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { Button } from "@/registry/ui/button"
 import {
   DialogBody,
@@ -11,13 +9,11 @@ import { Label } from "@/registry/ui/field"
 import { Input } from "@/registry/ui/input"
 import { TextField } from "@/registry/ui/text-field"
 
-import { OverlayScene, useOpenAutoplay } from "../autoplay"
+import { OverlayPreview } from "../overlay"
 
 export function ModalDemo() {
-  const { phase } = useOpenAutoplay()
   return (
-    <OverlayScene
-      phase={phase}
+    <OverlayPreview
       variant="modal"
       surfaceClassName="space-y-3"
       trigger={<Button>Open Modal</Button>}
@@ -35,6 +31,6 @@ export function ModalDemo() {
         <Button variant="quiet">Cancel</Button>
         <Button variant="primary">Apply</Button>
       </DialogFooter>
-    </OverlayScene>
+    </OverlayPreview>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/number-field.tsx b/www/src/modules/docs/components-list/demos/number-field.tsx
index e90846ec8..bc3403aa8 100644
--- a/www/src/modules/docs/components-list/demos/number-field.tsx
+++ b/www/src/modules/docs/components-list/demos/number-field.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { Label } from "@/registry/ui/field"
 import { Group } from "@/registry/ui/group"
 import { Input } from "@/registry/ui/input"
@@ -9,19 +7,14 @@ import {
   NumberFieldIncrement,
 } from "@/registry/ui/number-field"
 
-import { DemoPress, useStepAutoplay } from "../autoplay"
-
 export function NumberFieldDemo() {
-  const { index, pressing } = useStepAutoplay(5, { initial: 0, dwell: 950 })
   return (
-    <NumberField value={10 + index} onChange={() => {}}>
+    <NumberField defaultValue={12}>
       <Label>Quantity</Label>
       <Group>
         <NumberFieldDecrement />
         <Input className="w-16" />
-        <DemoPress pressing={pressing}>
-          <NumberFieldIncrement />
-        </DemoPress>
+        <NumberFieldIncrement />
       </Group>
     </NumberField>
   )
diff --git a/www/src/modules/docs/components-list/demos/otp-field.tsx b/www/src/modules/docs/components-list/demos/otp-field.tsx
index ae2355d62..19a881cc2 100644
--- a/www/src/modules/docs/components-list/demos/otp-field.tsx
+++ b/www/src/modules/docs/components-list/demos/otp-field.tsx
@@ -1,44 +1,13 @@
-"use client"
-
-import { useEffect, useLayoutEffect, useRef } from "react"
-
 import { Label } from "@/registry/ui/field"
 import { Group } from "@/registry/ui/group"
 import { Input } from "@/registry/ui/input"
 import { OTPField, OTPFieldSeparator } from "@/registry/ui/otp-field"
 
-import { useTypewriter } from "../autoplay"
-
-// Layout effect on the client, no-op on the server (avoids the SSR warning).
-const useIsoLayoutEffect =
-  typeof window === "undefined" ? useEffect : useLayoutEffect
-
 export function OTPFieldDemo() {
-  const ref = useRef<HTMLDivElement>(null)
-  const { value, active } = useTypewriter("284917", {
-    startDelay: 200,
-    charInterval: 220,
-    holdAfter: 1600,
-  })
-  // Focus follows the next empty slot, like a real OTP entry.
-  const current = active ? Math.min(value.length, 5) : -1
-
-  // Focus the active input directly, not via a DemoFocus wrapper: the wrapper
-  // element would break the Group's direct-child border-collapse/radius selectors.
-  useIsoLayoutEffect(() => {
-    const inputs = ref.current?.querySelectorAll(
-      '[data-slot="otp-field-input"]',
-    )
-    inputs?.forEach((el, i) => {
-      if (i === current) el.setAttribute("data-focused", "")
-      else el.removeAttribute("data-focused")
-    })
-  })
-
   return (
-    <OTPField length={6} value={value} onChange={() => {}}>
+    <OTPField length={6} defaultValue="2849">
       <Label>Code</Label>
-      <div ref={ref} className="flex items-center">
+      <div className="flex items-center">
         <Group>
           <Input />
           <Input aria-label="Digit 2" />
diff --git a/www/src/modules/docs/components-list/demos/pagination.tsx b/www/src/modules/docs/components-list/demos/pagination.tsx
index 3499ec454..13076b74b 100644
--- a/www/src/modules/docs/components-list/demos/pagination.tsx
+++ b/www/src/modules/docs/components-list/demos/pagination.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import {
   Pagination,
   PaginationItem,
@@ -9,37 +7,26 @@ import {
   PaginationPrevious,
 } from "@/registry/ui/pagination"
 
-import { useStepAutoplay } from "../autoplay"
-
-// Kept short so the row fits the preview card without overflowing.
-const PAGES = [1, 2, 3]
-
 export function PaginationDemo() {
-  const { index } = useStepAutoplay(PAGES.length, { dwell: 1100 })
-  const page = PAGES[index] ?? PAGES[0]
-
   return (
     <Pagination>
       <PaginationList>
         <PaginationItem>
-          <PaginationPrevious isDisabled={page === 1} onPress={() => {}} />
+          <PaginationPrevious onPress={() => {}} />
         </PaginationItem>
-        {PAGES.map((p) => (
-          <PaginationItem key={p}>
+        {[1, 2, 3].map((page) => (
+          <PaginationItem key={page}>
             <PaginationLink
-              isActive={p === page}
-              aria-label={`Page ${p}`}
+              isActive={page === 2}
+              aria-label={`Page ${page}`}
               onPress={() => {}}
             >
-              {p}
+              {page}
             </PaginationLink>
           </PaginationItem>
         ))}
         <PaginationItem>
-          <PaginationNext
-            isDisabled={page === PAGES.length}
-            onPress={() => {}}
-          />
+          <PaginationNext onPress={() => {}} />
         </PaginationItem>
       </PaginationList>
     </Pagination>
diff --git a/www/src/modules/docs/components-list/demos/popover.tsx b/www/src/modules/docs/components-list/demos/popover.tsx
index 4d9f9f68c..8341a6a73 100644
--- a/www/src/modules/docs/components-list/demos/popover.tsx
+++ b/www/src/modules/docs/components-list/demos/popover.tsx
@@ -1,19 +1,13 @@
-"use client"
-
-import { InfoIcon } from "lucide-react"
-
+import { InfoIcon } from "@/registry/__generated__/icons"
 import { Button } from "@/registry/ui/button"
 import { DialogHeader, DialogTitle } from "@/registry/ui/dialog"
 
-import { OverlayScene, useOpenAutoplay } from "../autoplay"
+import { OverlayPreview } from "../overlay"
 
 export function PopoverDemo() {
-  const { phase } = useOpenAutoplay()
   return (
-    <OverlayScene
-      phase={phase}
+    <OverlayPreview
       variant="popover"
-      side="bottom"
       surfaceClassName="w-52 text-left"
       trigger={
         <Button aria-label="Help" isIconOnly>
@@ -27,6 +21,6 @@ export function PopoverDemo() {
       <p className="mt-1 text-fg-muted">
         If you&apos;re having issues, contact our customer support team.
       </p>
-    </OverlayScene>
+    </OverlayPreview>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/progress-bar.tsx b/www/src/modules/docs/components-list/demos/progress-bar.tsx
index 0f994f27e..cad89d49c 100644
--- a/www/src/modules/docs/components-list/demos/progress-bar.tsx
+++ b/www/src/modules/docs/components-list/demos/progress-bar.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import { Label } from "@/registry/ui/field"
 import {
   ProgressBar,
@@ -7,20 +5,9 @@ import {
   ProgressBarOutput,
 } from "@/registry/ui/progress-bar"
 
-import { useValueAutoplay } from "../autoplay"
-
-// The fill already ships `transition-all` + `origin-left`, so its `scaleX`
-// transform glides on its own — we just step `value` through waypoints and the
-// CSS transition (slowed/eased via the root className) animates the sweep. The
-// Output reads `value` automatically, so the % label stays in sync.
 export function ProgressBarDemo() {
-  const { value } = useValueAutoplay([0, 35, 66, 92], { dwell: 900 })
   return (
-    <ProgressBar
-      value={value}
-      valueLabel={`${value}%`}
-      className="w-full max-w-[11.5rem] [&_[data-rac]]:transition-transform [&_[data-rac]]:duration-700 [&_[data-rac]]:ease-out"
-    >
+    <ProgressBar value={66} className="w-full max-w-[11.5rem]">
       <div className="flex items-center justify-between gap-2">
         <Label>Uploading…</Label>
         <ProgressBarOutput />
diff --git a/www/src/modules/docs/components-list/demos/radio-group.tsx b/www/src/modules/docs/components-list/demos/radio-group.tsx
index c63855ae9..d851b10e5 100644
--- a/www/src/modules/docs/components-list/demos/radio-group.tsx
+++ b/www/src/modules/docs/components-list/demos/radio-group.tsx
@@ -1,16 +1,9 @@
-"use client"
-
 import { FieldGroup, Label } from "@/registry/ui/field"
 import { Radio, RadioControl, RadioGroup } from "@/registry/ui/radio-group"
 
-import { useStepAutoplay } from "../autoplay"
-
-const KEYS = ["nextjs", "remix", "gatsby"]
-
 export function RadioGroupDemo() {
-  const { index } = useStepAutoplay(KEYS.length, { dwell: 1300 })
   return (
-    <RadioGroup value={KEYS[index]} onChange={() => {}}>
+    <RadioGroup defaultValue="remix">
       <Label>React frameworks</Label>
       <FieldGroup>
         <Radio value="nextjs">
diff --git a/www/src/modules/docs/components-list/demos/search-field.tsx b/www/src/modules/docs/components-list/demos/search-field.tsx
index b7ee55b14..b68ba1d78 100644
--- a/www/src/modules/docs/components-list/demos/search-field.tsx
+++ b/www/src/modules/docs/components-list/demos/search-field.tsx
@@ -1,28 +1,20 @@
-"use client"
-
 import { SearchIcon, XIcon } from "@/registry/__generated__/icons"
 import { Button } from "@/registry/ui/button"
 import { Input, InputGroup, InputGroupAddon } from "@/registry/ui/input"
 import { SearchField } from "@/registry/ui/search-field"
 
-import { DemoFocus, useTypewriter } from "../autoplay"
-
 export function SearchFieldDemo() {
-  const { value, active } = useTypewriter("invoices")
   return (
     <SearchField
       aria-label="Search"
+      defaultValue="Invoices"
       className="w-full max-w-[11.5rem]"
-      value={value}
-      onChange={() => {}}
     >
       <InputGroup className="w-full">
         <InputGroupAddon>
           <SearchIcon />
         </InputGroupAddon>
-        <DemoFocus active={active}>
-          <Input placeholder="Search..." />
-        </DemoFocus>
+        <Input placeholder="Search..." />
         <InputGroupAddon>
           <Button variant="quiet" isIconOnly className="rounded-full">
             <XIcon />
diff --git a/www/src/modules/docs/components-list/demos/select.tsx b/www/src/modules/docs/components-list/demos/select.tsx
index 38aa86dc0..87b568735 100644
--- a/www/src/modules/docs/components-list/demos/select.tsx
+++ b/www/src/modules/docs/components-list/demos/select.tsx
@@ -1,20 +1,13 @@
-"use client"
-
-import { ChevronDownIcon } from "lucide-react"
-
+import { ChevronDownIcon } from "@/registry/__generated__/icons"
 import { Button } from "@/registry/ui/button"
 import { ListBox, ListBoxItem } from "@/registry/ui/list-box"
 
-import { OverlayScene, useOpenAutoplay } from "../autoplay"
+import { OverlayPreview } from "../overlay"
 
 export function SelectDemo() {
-  const { phase } = useOpenAutoplay()
   return (
-    <OverlayScene
-      phase={phase}
+    <OverlayPreview
       variant="menu"
-      side="bottom"
-      fluid
       surfaceClassName="w-full max-w-[11.5rem] p-0"
       trigger={
         <Button className="w-full max-w-[11.5rem] justify-between font-normal">
@@ -26,13 +19,13 @@ export function SelectDemo() {
       <ListBox
         aria-label="Provider"
         selectionMode="single"
-        selectedKeys={["perplexity"]}
+        defaultSelectedKeys={["perplexity"]}
         className="border-0 bg-transparent shadow-none"
       >
         <ListBoxItem id="perplexity">Perplexity</ListBoxItem>
         <ListBoxItem id="replicate">Replicate</ListBoxItem>
         <ListBoxItem id="together">Together AI</ListBoxItem>
       </ListBox>
-    </OverlayScene>
+    </OverlayPreview>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/slider.tsx b/www/src/modules/docs/components-list/demos/slider.tsx
index 56774602c..bd865da0f 100644
--- a/www/src/modules/docs/components-list/demos/slider.tsx
+++ b/www/src/modules/docs/components-list/demos/slider.tsx
@@ -1,21 +1,9 @@
-"use client"
-
 import { Label } from "@/registry/ui/field"
 import { Slider, SliderControl, SliderOutput } from "@/registry/ui/slider"
 
-import { useValueAutoplay } from "../autoplay"
-
-// Discrete waypoints; the CSS transitions on the thumb/fill (added via the
-// className below) glide between them — cheaper and more reliable than a
-// per-frame value tween.
 export function SliderDemo() {
-  const { value } = useValueAutoplay([50, 80, 92, 64], { dwell: 850 })
   return (
-    <Slider
-      value={value}
-      onChange={() => {}}
-      className="w-full max-w-[11.5rem] [&_[data-slider-fill]]:transition-[width,inset-inline-start] [&_[data-slider-fill]]:duration-700 [&_[data-slider-fill]]:ease-out [&_[data-slider-thumb]]:transition-[left,inset-inline-start] [&_[data-slider-thumb]]:duration-700 [&_[data-slider-thumb]]:ease-out"
-    >
+    <Slider defaultValue={64} className="w-full max-w-[11.5rem]">
       <div className="flex items-center justify-between">
         <Label>Opacity</Label>
         <SliderOutput />
diff --git a/www/src/modules/docs/components-list/demos/switch.tsx b/www/src/modules/docs/components-list/demos/switch.tsx
index 34ef3bb62..f0a6d3195 100644
--- a/www/src/modules/docs/components-list/demos/switch.tsx
+++ b/www/src/modules/docs/components-list/demos/switch.tsx
@@ -1,18 +1,17 @@
-"use client"
-
 import { Label } from "@/registry/ui/field"
 import { Switch, SwitchControl } from "@/registry/ui/switch"
 
-import { DemoPress, useToggleAutoplay } from "../autoplay"
-
 export function SwitchDemo() {
-  const { selected, pressing } = useToggleAutoplay()
   return (
-    <Switch isSelected={selected} onChange={() => {}}>
-      <DemoPress pressing={pressing}>
+    <div className="flex flex-col gap-3">
+      <Switch defaultSelected>
+        <SwitchControl />
+        <Label>Notifications</Label>
+      </Switch>
+      <Switch>
         <SwitchControl />
-      </DemoPress>
-      <Label>Focus mode</Label>
-    </Switch>
+        <Label>Focus mode</Label>
+      </Switch>
+    </div>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/tabs.tsx b/www/src/modules/docs/components-list/demos/tabs.tsx
index 38562fc26..b10cad0f6 100644
--- a/www/src/modules/docs/components-list/demos/tabs.tsx
+++ b/www/src/modules/docs/components-list/demos/tabs.tsx
@@ -1,15 +1,8 @@
-"use client"
-
 import { Tab, TabList, TabPanel, Tabs } from "@/registry/ui/tabs"
 
-import { useStepAutoplay } from "../autoplay"
-
-const KEYS = ["overview", "usage", "settings"]
-
 export function TabsDemo() {
-  const { index } = useStepAutoplay(KEYS.length, { dwell: 1300 })
   return (
-    <Tabs selectedKey={KEYS[index]} onSelectionChange={() => {}}>
+    <Tabs defaultSelectedKey="overview">
       <TabList>
         <Tab id="overview">Overview</Tab>
         <Tab id="usage">Usage</Tab>
diff --git a/www/src/modules/docs/components-list/demos/tag-group.tsx b/www/src/modules/docs/components-list/demos/tag-group.tsx
index 0280b5bc5..444f6819c 100644
--- a/www/src/modules/docs/components-list/demos/tag-group.tsx
+++ b/www/src/modules/docs/components-list/demos/tag-group.tsx
@@ -1,20 +1,9 @@
-"use client"
-
 import { Label } from "@/registry/ui/field"
 import { Tag, TagGroup, TagList } from "@/registry/ui/tag-group"
 
-import { useCycle } from "../autoplay"
-
-const KEYS = ["react", "typescript", "nextjs"]
-
 export function TagGroupDemo() {
-  const { item } = useCycle(KEYS, { dwell: 1300 })
   return (
-    <TagGroup
-      selectionMode="single"
-      selectedKeys={[item]}
-      onSelectionChange={() => {}}
-    >
+    <TagGroup selectionMode="single" defaultSelectedKeys={["react"]}>
       <Label>Tags</Label>
       <TagList>
         <Tag id="react">React</Tag>
diff --git a/www/src/modules/docs/components-list/demos/text-area.tsx b/www/src/modules/docs/components-list/demos/text-area.tsx
index 73214d90a..34d472fde 100644
--- a/www/src/modules/docs/components-list/demos/text-area.tsx
+++ b/www/src/modules/docs/components-list/demos/text-area.tsx
@@ -1,19 +1,10 @@
-"use client"
-
 import { TextArea } from "@/registry/ui/input"
 
-import { DemoFocus, useTypewriter } from "../autoplay"
-
 export function TextAreaDemo() {
-  const { value, active } = useTypewriter("Tell us a bit about yourself.")
   return (
-    <DemoFocus active={active}>
-      <TextArea
-        value={value}
-        onChange={() => {}}
-        placeholder="Enter description..."
-        className="w-full max-w-[11.5rem]"
-      />
-    </DemoFocus>
+    <TextArea
+      placeholder="Enter description..."
+      className="w-full max-w-[11.5rem]"
+    />
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/text-field.tsx b/www/src/modules/docs/components-list/demos/text-field.tsx
index 1b2b30fa0..ec1bbe81e 100644
--- a/www/src/modules/docs/components-list/demos/text-field.tsx
+++ b/www/src/modules/docs/components-list/demos/text-field.tsx
@@ -1,23 +1,15 @@
-"use client"
-
 import { Description, Label } from "@/registry/ui/field"
 import { Input } from "@/registry/ui/input"
 import { TextField } from "@/registry/ui/text-field"
 
-import { DemoFocus, useTypewriter } from "../autoplay"
-
 export function TextFieldDemo() {
-  const { value, active } = useTypewriter("hello@example.com")
   return (
     <TextField
+      defaultValue="hello@example.com"
       className="w-full max-w-[11.5rem]"
-      value={value}
-      onChange={() => {}}
     >
       <Label>Email</Label>
-      <DemoFocus active={active}>
-        <Input placeholder="hello@example.com" />
-      </DemoFocus>
+      <Input />
       <Description>Enter your email.</Description>
     </TextField>
   )
diff --git a/www/src/modules/docs/components-list/demos/time-field.tsx b/www/src/modules/docs/components-list/demos/time-field.tsx
index 232295b7d..79b874d69 100644
--- a/www/src/modules/docs/components-list/demos/time-field.tsx
+++ b/www/src/modules/docs/components-list/demos/time-field.tsx
@@ -1,27 +1,17 @@
-"use client"
-
 import { Time } from "@internationalized/date"
 
 import { Label } from "@/registry/ui/field"
 import { DateInput } from "@/registry/ui/input"
 import { TimeField } from "@/registry/ui/time-field"
 
-import { DemoFocus, useCardHover } from "../autoplay"
-
-// Shows a real time and lights up its real focus ring while the card is hovered.
-// We only set `data-focused` on the field (no real `:focus`), so it never steals
-// the page's focus.
 export function TimeFieldDemo() {
-  const active = useCardHover()
   return (
     <TimeField
       defaultValue={new Time(11, 45)}
       className="w-full max-w-[11.5rem]"
     >
       <Label>Event time</Label>
-      <DemoFocus active={active}>
-        <DateInput className="w-full" />
-      </DemoFocus>
+      <DateInput className="w-full" />
     </TimeField>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/toast.tsx b/www/src/modules/docs/components-list/demos/toast.tsx
index d5930ea4a..72c9d839e 100644
--- a/www/src/modules/docs/components-list/demos/toast.tsx
+++ b/www/src/modules/docs/components-list/demos/toast.tsx
@@ -1,29 +1,10 @@
-"use client"
+import { CircleCheckIcon } from "@/registry/__generated__/icons"
 
-import { CircleCheckIcon } from "lucide-react"
-
-import { useAutoplay } from "../autoplay"
-
-// A static, presentational stand-in for a toast — the real component is
-// triggered + portaled at runtime, which doesn't preview well in a static grid.
-// The surface + entrance mirror the real toast (bg-card, slide up from below the
-// frame, like its `data-[starting-style]` enter); at rest it just sits visible.
+// A presentational stand-in: the real toast is triggered and portaled at
+// runtime, which doesn't preview in a static grid. The surface mirrors it.
 export function ToastDemo() {
-  const { phase, playing } = useAutoplay([
-    { name: "out", duration: 450 },
-    { name: "in", duration: 1900 },
-  ])
-  const hidden = playing && phase === "out"
   return (
-    <div
-      className="flex w-64 items-center gap-3 rounded-lg border bg-card p-3 text-fg shadow-lg"
-      style={{
-        opacity: hidden ? 0 : 1,
-        transform: hidden ? "translateY(calc(100% + 1rem))" : "translateY(0)",
-        transition:
-          "opacity .3s ease, transform .45s cubic-bezier(0.22,1,0.36,1)",
-      }}
-    >
+    <div className="flex w-64 items-center gap-3 rounded-lg border bg-card p-3 text-fg shadow-lg">
       <CircleCheckIcon className="size-5 shrink-0 text-fg-success" />
       <div className="flex min-w-0 flex-col">
         <span className="text-sm font-medium text-fg">
diff --git a/www/src/modules/docs/components-list/demos/toggle-button-group.tsx b/www/src/modules/docs/components-list/demos/toggle-button-group.tsx
index 1cc5e7848..a6ae6f27b 100644
--- a/www/src/modules/docs/components-list/demos/toggle-button-group.tsx
+++ b/www/src/modules/docs/components-list/demos/toggle-button-group.tsx
@@ -1,22 +1,14 @@
-"use client"
-
 import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon } from "lucide-react"
 
 import { ToggleButton } from "@/registry/ui/toggle-button"
 import { ToggleButtonGroup } from "@/registry/ui/toggle-button-group"
 
-import { useCycle } from "../autoplay"
-
-const KEYS = ["left", "center", "right"]
-
 export function ToggleButtonGroupDemo() {
-  const { item } = useCycle(KEYS, { dwell: 1100 })
   return (
     <ToggleButtonGroup
       orientation="horizontal"
       selectionMode="single"
-      selectedKeys={[item]}
-      onSelectionChange={() => {}}
+      defaultSelectedKeys={["left"]}
     >
       <ToggleButton id="left" isIconOnly aria-label="Align left">
         <AlignLeftIcon />
diff --git a/www/src/modules/docs/components-list/demos/toggle-button.tsx b/www/src/modules/docs/components-list/demos/toggle-button.tsx
index 2be0d0f4d..249589fa7 100644
--- a/www/src/modules/docs/components-list/demos/toggle-button.tsx
+++ b/www/src/modules/docs/components-list/demos/toggle-button.tsx
@@ -1,23 +1,15 @@
-"use client"
-
-import { PinIcon } from "lucide-react"
-
+import { BookmarkIcon, PinIcon } from "@/registry/__generated__/icons"
 import { ToggleButton } from "@/registry/ui/toggle-button"
 
-import { DemoPress, useToggleAutoplay } from "../autoplay"
-
 export function ToggleButtonDemo() {
-  const { selected, pressing } = useToggleAutoplay({ initial: true })
   return (
-    <DemoPress pressing={pressing} selected={selected}>
-      <ToggleButton
-        isIconOnly
-        aria-label="Toggle pin"
-        isSelected={selected}
-        onChange={() => {}}
-      >
-        <PinIcon className="rotate-45" />
+    <div className="flex items-center gap-3">
+      <ToggleButton defaultSelected isIconOnly aria-label="Pin">
+        <PinIcon />
+      </ToggleButton>
+      <ToggleButton isIconOnly aria-label="Bookmark">
+        <BookmarkIcon />
       </ToggleButton>
-    </DemoPress>
+    </div>
   )
 }
diff --git a/www/src/modules/docs/components-list/demos/tooltip.tsx b/www/src/modules/docs/components-list/demos/tooltip.tsx
index e778d10f7..f89265ab0 100644
--- a/www/src/modules/docs/components-list/demos/tooltip.tsx
+++ b/www/src/modules/docs/components-list/demos/tooltip.tsx
@@ -1,27 +1,21 @@
-"use client"
-
-import { SquarePenIcon } from "lucide-react"
-
+import { SquarePenIcon } from "@/registry/__generated__/icons"
 import { Button } from "@/registry/ui/button"
 import { Kbd } from "@/registry/ui/kbd"
 
-import { OverlayScene, useOpenAutoplay } from "../autoplay"
+import { Surface } from "../overlay"
 
 export function TooltipDemo() {
-  const { phase } = useOpenAutoplay()
   return (
-    <OverlayScene
-      phase={phase}
-      variant="tooltip"
-      side="top"
-      surfaceClassName="inline-flex items-center gap-1.5 whitespace-nowrap"
-      trigger={
-        <Button aria-label="Create new issue" isIconOnly>
-          <SquarePenIcon />
-        </Button>
-      }
-    >
-      Create new issue <Kbd>C</Kbd>
-    </OverlayScene>
+    <div className="flex flex-col items-center gap-2">
+      <Surface
+        variant="tooltip"
+        className="inline-flex items-center gap-1.5 whitespace-nowrap"
+      >
+        Create new issue <Kbd>C</Kbd>
+      </Surface>
+      <Button aria-label="Create new issue" isIconOnly>
+        <SquarePenIcon />
+      </Button>
+    </div>
   )
 }
diff --git a/www/src/modules/docs/components-list/overlay.tsx b/www/src/modules/docs/components-list/overlay.tsx
new file mode 100644
index 000000000..461283b1d
--- /dev/null
+++ b/www/src/modules/docs/components-list/overlay.tsx
@@ -0,0 +1,110 @@
+import type { ReactNode } from "react"
+
+import { cn } from "@/registry/lib/utils"
+
+/**
+ * Frozen-open overlay compositions for the preview cards. The trigger is a real
+ * component and the surface uses the real token classes, but the open state is
+ * static so nothing portals out of the card or touches focus.
+ */
+
+export type SurfaceVariant = "popover" | "menu" | "modal" | "drawer" | "tooltip"
+
+const SURFACE_FRAME: Record<SurfaceVariant, string> = {
+  popover:
+    "rounded-(--popover-radius) border bg-popover p-2.5 text-xs/relaxed shadow-md",
+  menu: "rounded-(--popover-radius) border bg-popover p-1 shadow-md",
+  modal:
+    "rounded-(--modal-radius) border bg-(--modal-background) p-4 text-sm shadow-lg",
+  drawer: "rounded-t-(--radius-xl) border-t bg-bg p-4 text-sm shadow-lg",
+  tooltip:
+    "rounded-(--tooltip-radius) bg-tooltip px-3 py-1.5 text-center text-xs text-fg-on-tooltip shadow-md",
+}
+
+// The ancestor data attribute the real Dialog* sub-components key their
+// in-context padding on (`in-data-popover:` / `in-data-modal:`).
+const SURFACE_DATA: Partial<Record<SurfaceVariant, Record<string, string>>> = {
+  popover: { "data-popover": "" },
+  menu: { "data-popover": "" },
+  modal: { "data-modal": "" },
+}
+
+export function Surface({
+  variant,
+  className,
+  children,
+}: {
+  variant: SurfaceVariant
+  className?: string
+  children: ReactNode
+}) {
+  return (
+    <div
+      {...SURFACE_DATA[variant]}
+      className={cn(SURFACE_FRAME[variant], className)}
+    >
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Trigger + open surface, filling the card (`fill` demos). Anchored surfaces
+ * hang below a top-aligned trigger and crop at the card's bottom edge; modal
+ * and drawer float over a dimmed backdrop.
+ */
+export function OverlayPreview({
+  variant,
+  trigger,
+  surfaceClassName,
+  children,
+}: {
+  variant: SurfaceVariant
+  trigger: ReactNode
+  surfaceClassName?: string
+  children: ReactNode
+}) {
+  if (variant === "modal" || variant === "drawer") {
+    return (
+      <div className="absolute inset-0">
+        <div className="absolute inset-x-0 top-4 flex justify-center">
+          {trigger}
+        </div>
+        <div
+          aria-hidden
+          className={cn(
+            "absolute inset-0",
+            variant === "modal"
+              ? "bg-overlay/(--modal-backdrop-opacity) backdrop-blur-(--modal-backdrop-blur)"
+              : "bg-overlay/70",
+          )}
+        />
+        {variant === "modal" ? (
+          <div className="absolute inset-x-6 top-8 flex justify-center">
+            <Surface
+              variant="modal"
+              className={cn("w-full max-w-[13rem]", surfaceClassName)}
+            >
+              {children}
+            </Surface>
+          </div>
+        ) : (
+          <div className="absolute inset-x-3 bottom-0">
+            <Surface variant="drawer" className={surfaceClassName}>
+              {children}
+            </Surface>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="absolute inset-0 flex flex-col items-center gap-2 px-4 pt-4">
+      {trigger}
+      <Surface variant={variant} className={surfaceClassName}>
+        {children}
+      </Surface>
+    </div>
+  )
+}
diff --git a/www/src/styles.css b/www/src/styles.css
index f1010eb96..ea3ee9701 100644
--- a/www/src/styles.css
+++ b/www/src/styles.css
@@ -164,20 +164,6 @@
   -webkit-mask-image: linear-gradient(to top, transparent 10%, #000 60%);
 }
 
-/* Click ripple for the docs component-gallery cursor (components-list/autoplay).
-   Expands and fades from the pointer hotspot; mounts only during the press beat
-   so it replays on each loop. */
-@keyframes cursor-click {
-  0% {
-    transform: translate(-50%, -50%) scale(0.25);
-    opacity: 0.6;
-  }
-  100% {
-    transform: translate(-50%, -50%) scale(1.8);
-    opacity: 0;
-  }
-}
-
 /* preset-wash-bg — registered as a real <color> so the home cards-section
    background wash can tween the preset's --color-bg when the selected preset
    switches; browsers without @property just swap instantly. */