diff --git a/apps/www/components/blocks/preview-pane.tsx b/apps/www/components/blocks/preview-pane.tsx
index df31b81..ab268ea 100644
--- a/apps/www/components/blocks/preview-pane.tsx
+++ b/apps/www/components/blocks/preview-pane.tsx
@@ -2,7 +2,7 @@
 
 import { domAnimation, LazyMotion, m } from "motion/react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import React, { useCallback, useLayoutEffect, useState } from "react"
+import React, { useCallback, useLayoutEffect, useRef, useState } from "react"
 
 import { StreamPanelProvider } from "@/components/stream-panel"
 import { useThemeToggle } from "@/components/theme-toggle"
@@ -25,6 +25,7 @@ export function BlockPreviewWithToolbar({
   const [expanded, setExpanded] = useState(() => {
     return searchParams.get(EXPANDED_QUERY_PARAM) === "true"
   })
+  const expandedRef = useRef(expanded)
   const { isDark, toggleTheme } = useThemeToggle({
     blur: false,
     start: "top-right",
@@ -51,11 +52,10 @@ export function BlockPreviewWithToolbar({
   )
 
   const handleExpandToggle = useCallback(() => {
-    setExpanded((previousExpanded) => {
-      const nextExpanded = !previousExpanded
-      updateExpandedQuery(nextExpanded)
-      return nextExpanded
-    })
+    const nextExpanded = !expandedRef.current
+    expandedRef.current = nextExpanded
+    setExpanded(nextExpanded)
+    updateExpandedQuery(nextExpanded)
   }, [updateExpandedQuery])
 
   const handleReload = useCallback(() => {
@@ -63,7 +63,9 @@ export function BlockPreviewWithToolbar({
   }, [])
 
   useLayoutEffect(() => {
-    setExpanded(searchParams.get(EXPANDED_QUERY_PARAM) === "true")
+    const nextExpanded = searchParams.get(EXPANDED_QUERY_PARAM) === "true"
+    expandedRef.current = nextExpanded
+    setExpanded(nextExpanded)
   }, [pathname, searchParams])
 
   // DEV: This controls the left doc section to be hidden when preview is expanded
diff --git a/apps/www/components/players/video-player/player-container.tsx b/apps/www/components/players/video-player/player-container.tsx
index 9d4af1d..cada5d2 100644
--- a/apps/www/components/players/video-player/player-container.tsx
+++ b/apps/www/components/players/video-player/player-container.tsx
@@ -3,7 +3,7 @@
 import type { RefObject } from "react"
 
 import { ChevronDownIcon, MonitorPlayIcon, RotateCwIcon } from "lucide-react"
-import { useRef } from "react"
+import { useMemo, useRef } from "react"
 import { useFullscreen, useToggle } from "react-use"
 
 import {
@@ -27,6 +27,10 @@ export function VideoPlayerContainer() {
   const { isPortrait } = useOrientation()
   const isMobilePortrait = isMobile && isPortrait
   const playerRef = useRef<HTMLDivElement>(null)
+  const controlsVisibility = useVideoPlayerControlsVisibility({
+    disabled: isMobilePortrait,
+    isMobile,
+  })
 
   return (
     <StreamPanelProvider>
@@ -50,6 +54,7 @@ export function VideoPlayerContainer() {
             muted: true,
           }}
           ref={playerRef}
+          {...controlsVisibility}
         >
           <HomeVideoStreamSelector />
         </VideoPlayer>
@@ -165,6 +170,22 @@ function useSelectedStreamName() {
 
   return (
     getPresetsForType("video").find((preset) => preset.id === selection.id)
-      ?.name ?? "Custom Stream"
+      ?.title ?? "Custom Stream"
+  )
+}
+
+function useVideoPlayerControlsVisibility({
+  disabled,
+  isMobile,
+}: {
+  disabled: boolean
+  isMobile: boolean
+}) {
+  return useMemo(
+    () => ({
+      controlsHideDelay: disabled ? 0 : 1800,
+      hideCursorOnIdle: !disabled && !isMobile,
+    }),
+    [disabled, isMobile]
   )
 }
diff --git a/apps/www/components/stream-panel/content-catalog.ts b/apps/www/components/stream-panel/content-catalog.ts
index 4ebdf97..f528046 100644
--- a/apps/www/components/stream-panel/content-catalog.ts
+++ b/apps/www/components/stream-panel/content-catalog.ts
@@ -42,6 +42,7 @@ export interface BlenderOpenFilmImages {
   backdrop?: string
   logo?: string
   poster?: string
+  thumbnail?: string
 }
 
 export interface BlenderStreamResponse extends BlenderPlaylistItem {
@@ -141,6 +142,7 @@ const BlenderOpenFilmImagesSchema = z.object({
   backdrop: z.string().optional(),
   logo: z.string().optional(),
   poster: z.string().optional(),
+  thumbnail: z.string().optional(),
 })
 
 const BlenderStreamCaptionSchema = z.object({
@@ -421,7 +423,7 @@ function toBlenderOpenFilmAsset(
     duration: item.duration,
     id: item.id,
     images: item.images,
-    poster: item.images?.backdrop ?? item.images?.poster,
+    poster: item.images?.thumbnail ?? item.images?.poster,
     source: "blender-open-film",
     subtitle: item.subtitle,
     title: item.title,
diff --git a/apps/www/components/stream-panel/panel-popover.tsx b/apps/www/components/stream-panel/panel-popover.tsx
index 9113a7e..ed5bfc1 100644
--- a/apps/www/components/stream-panel/panel-popover.tsx
+++ b/apps/www/components/stream-panel/panel-popover.tsx
@@ -98,7 +98,7 @@ export function StreamPanel({
     }
 
     return (
-      presets.find((preset) => preset.id === contentSelection.id)?.name ??
+      presets.find((preset) => preset.id === contentSelection.id)?.title ??
       STREAM_PANEL_EMPTY_CONTENT_LABEL
     )
   }, [contentSelection, playlistPresets, presets])
diff --git a/apps/www/components/stream-panel/presets-overlay.tsx b/apps/www/components/stream-panel/presets-overlay.tsx
index ee49846..3de506b 100644
--- a/apps/www/components/stream-panel/presets-overlay.tsx
+++ b/apps/www/components/stream-panel/presets-overlay.tsx
@@ -138,7 +138,7 @@ export function PresetsOverlay({
                       >
                         <div className="min-w-0 flex-1">
                           <div className="flex items-center gap-2 pr-5">
-                            <span className="truncate">{preset.name}</span>
+                            <span className="truncate">{preset.title}</span>
                           </div>
                           {preset.description ? (
                             <span className="mt-1 block truncate text-[11px] text-muted-foreground">
diff --git a/apps/www/components/stream-panel/use-stream-panel-sync.ts b/apps/www/components/stream-panel/use-stream-panel-sync.ts
index eab7e86..1ce490f 100644
--- a/apps/www/components/stream-panel/use-stream-panel-sync.ts
+++ b/apps/www/components/stream-panel/use-stream-panel-sync.ts
@@ -278,8 +278,8 @@ export function useStreamPanelSync({
         format: "progressive",
         group: "Special",
         id,
-        name: "Custom Stream",
         src,
+        title: "Custom Stream",
         type: playerType,
       }
       loadSource(asset as unknown as Asset, { loading: assetOptions })
diff --git a/apps/www/lib/stream-presets.ts b/apps/www/lib/stream-presets.ts
index 1b550d2..7dbfb88 100644
--- a/apps/www/lib/stream-presets.ts
+++ b/apps/www/lib/stream-presets.ts
@@ -36,11 +36,10 @@ export interface StreamPreset {
   format: "dash" | "hls" | "progressive"
   group: StreamGroup
   id: string
-  name: string
   poster?: string
   src: string
   thumbnail?: string
-  title?: string
+  title: string
   type: "audio" | "video"
 }
 
@@ -53,9 +52,9 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "hls",
     group: "HLS",
     id: "mux-big-buck-bunny",
-    name: "Big Buck Bunny",
     poster: "https://files.vidstack.io/sprite-fight/poster.webp",
     src: "https://stream.mux.com/VZtzUzGRv02OhRnZCxcNg49OilvolTqdnFLEqBsTwaxU.m3u8",
+    title: "Big Buck Bunny",
     type: "video",
   },
   {
@@ -72,8 +71,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "hls",
     group: "HLS",
     id: "apple-advanced-hls",
-    name: "Apple Advanced Stream",
     src: "https://devstreaming-cdn.apple.com/videos/streaming/examples/adv_dv_atmos/main.m3u8",
+    title: "Apple Advanced Stream",
     type: "video",
   },
   {
@@ -82,8 +81,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "hls",
     group: "HLS",
     id: "apple-bipbop-hls",
-    name: "Apple Bipbop",
     src: "https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8",
+    title: "Apple Bipbop",
     type: "video",
   },
   {
@@ -92,8 +91,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "hls",
     group: "HLS",
     id: "shaka-bbb-dark-truths-hls",
-    name: "Dark Truths",
     src: "https://storage.googleapis.com/shaka-demo-assets/bbb-dark-truths-hls/hls.m3u8",
+    title: "Dark Truths",
     type: "video",
   },
 
@@ -105,8 +104,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "DASH",
     id: "shaka-angel-one-dash",
-    name: "Angel One",
     src: "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd",
+    title: "Angel One",
     type: "video",
   },
   {
@@ -115,8 +114,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "DASH",
     id: "shaka-sintel-4k",
-    name: "Sintel 4K",
     src: "https://storage.googleapis.com/shaka-demo-assets/sintel/dash.mpd",
+    title: "Sintel 4K",
     type: "video",
   },
   {
@@ -125,10 +124,10 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "DASH",
     id: "bitmovin-dash",
-    name: "Art of Motion",
     src: "https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd",
     thumbnail:
       "https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.vtt",
+    title: "Art of Motion",
     type: "video",
   },
   {
@@ -137,8 +136,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "DASH",
     id: "shaka-tears-surround",
-    name: "Tears of Steel",
     src: "https://storage.googleapis.com/shaka-demo-assets/tos-surround/dash.mpd",
+    title: "Tears of Steel",
     type: "video",
   },
 
@@ -150,8 +149,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "Live",
     id: "dash-if-live",
-    name: "DASH-IF Live Sim",
     src: "https://livesim2.dashif.org/livesim2/utc_head/testpic_2s/Manifest.mpd",
+    title: "DASH-IF Live Sim",
     type: "video",
   },
   {
@@ -160,8 +159,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "Live",
     id: "shaka-live-dash",
-    name: "Shaka Player History",
     src: "https://storage.googleapis.com/shaka-live-assets/player-source.mpd",
+    title: "Shaka Player History",
     type: "video",
   },
   {
@@ -170,8 +169,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "hls",
     group: "Live",
     id: "shaka-live-hls",
-    name: "Shaka Player History (HLS)",
     src: "https://storage.googleapis.com/shaka-live-assets/player-source.m3u8",
+    title: "Shaka Player History (HLS)",
     type: "video",
   },
   {
@@ -180,8 +179,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "Live",
     id: "dash-if-ll-live",
-    name: "Low Latency DASH",
     src: "https://livesim2.dashif.org/livesim2/chunkdur_1/ato_7/testpic4_8s/Manifest300.mpd",
+    title: "Low Latency DASH",
     type: "video",
   },
 
@@ -200,8 +199,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "DRM",
     id: "shaka-angel-widevine",
-    name: "Angel One",
     src: "https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine/dash.mpd",
+    title: "Angel One",
     type: "video",
   },
   {
@@ -218,8 +217,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "DRM",
     id: "shaka-angel-clearkey",
-    name: "Angel One",
     src: "https://storage.googleapis.com/shaka-demo-assets/angel-one-clearkey/dash.mpd",
+    title: "Angel One",
     type: "video",
   },
   {
@@ -235,8 +234,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "hls",
     group: "DRM",
     id: "shaka-angel-hls-widevine",
-    name: "Angel One (HLS)",
     src: "https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine-hls/hls.m3u8",
+    title: "Angel One (HLS)",
     type: "video",
   },
   {
@@ -258,8 +257,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "DRM",
     id: "shaka-sintel-widevine",
-    name: "Sintel 4K",
     src: "https://storage.googleapis.com/shaka-demo-assets/sintel-widevine/dash.mpd",
+    title: "Sintel 4K",
     type: "video",
   },
   {
@@ -268,8 +267,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "hls",
     group: "DRM",
     id: "bitmovin-hls-aes128",
-    name: "Art of Motion",
     src: "https://cdn.bitmovin.com/content/assets/art-of-motion_drm/m3u8s/11331.m3u8",
+    title: "Art of Motion",
     type: "video",
   },
 
@@ -281,8 +280,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "Audio",
     id: "shaka-dig-uke",
-    name: "Dig the Uke",
     src: "https://storage.googleapis.com/shaka-demo-assets/dig-the-uke-clear/dash.mpd",
+    title: "Dig the Uke",
     type: "audio",
   },
   {
@@ -291,8 +290,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "hls",
     group: "Audio",
     id: "apple-hls-audio-aac",
-    name: "HLS Audio (AAC)",
     src: "https://storage.googleapis.com/shaka-demo-assets/raw-hls-audio-only/manifest.m3u8",
+    title: "HLS Audio (AAC)",
     type: "audio",
   },
 
@@ -304,8 +303,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "progressive",
     group: "Progressive",
     id: "mp4-bunny-progressive",
-    name: "Big Buck Bunny",
     src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+    title: "Big Buck Bunny",
     type: "video",
   },
   {
@@ -314,8 +313,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "progressive",
     group: "Progressive",
     id: "mp4-elephants-dream",
-    name: "Elephants Dream",
     src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+    title: "Elephants Dream",
     type: "video",
   },
 
@@ -327,8 +326,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "Special",
     id: "shaka-sintel-trick",
-    name: "Sintel",
     src: "https://storage.googleapis.com/shaka-demo-assets/sintel-trickplay/dash.mpd",
+    title: "Sintel",
     type: "video",
   },
   {
@@ -337,8 +336,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "Special",
     id: "dash-if-thumbnails",
-    name: "Big Buck Bunny",
     src: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_with_tiled_thumbnails.mpd",
+    title: "Big Buck Bunny",
     type: "video",
   },
   {
@@ -347,8 +346,8 @@ export const STREAM_PRESETS: StreamPreset[] = [
     format: "dash",
     group: "Special",
     id: "bitmovin-vr",
-    name: "VR Playhouse",
     src: "https://cdn.bitmovin.com/content/assets/playhouse-vr/mpds/105560.mpd",
+    title: "VR Playhouse",
     type: "video",
   },
 ]
diff --git a/apps/www/next-env.d.ts b/apps/www/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/apps/www/next-env.d.ts
+++ b/apps/www/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/www/registry/collection/registry-blocks.ts b/apps/www/registry/collection/registry-blocks.ts
index c2d9650..6db69ff 100644
--- a/apps/www/registry/collection/registry-blocks.ts
+++ b/apps/www/registry/collection/registry-blocks.ts
@@ -24,6 +24,10 @@ export const blocks: Registry["items"] = [
         path: `${VIDEO_PLAYER_SRC_URL}/components/media-player.tsx`,
         type: "registry:component",
       },
+      {
+        path: `${VIDEO_PLAYER_SRC_URL}/components/asset-metadata-overlay.tsx`,
+        type: "registry:component",
+      },
       {
         path: `${VIDEO_PLAYER_SRC_URL}/components/volume-state-control.tsx`,
         type: "registry:component",
diff --git a/apps/www/registry/default/blocks/video-player/components/asset-metadata-overlay.tsx b/apps/www/registry/default/blocks/video-player/components/asset-metadata-overlay.tsx
new file mode 100644
index 0000000..364a626
--- /dev/null
+++ b/apps/www/registry/default/blocks/video-player/components/asset-metadata-overlay.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import type { VideoPlayerAsset } from "@/registry/default/blocks/video-player/components/media-player"
+
+import { useAsset } from "@/registry/default/hooks/use-asset"
+import { ControlsTopContainer } from "@/registry/default/ui/player-layout"
+
+export function AssetMetadataOverlay() {
+  const { currentItem } = useAsset<VideoPlayerAsset>()
+  const asset = currentItem?.properties
+  const description = asset?.description?.trim()
+  const title = asset?.title?.trim()
+
+  if (!title && !description) return null
+
+  return (
+    <>
+      <div
+        className={`
+          pointer-events-none absolute inset-0 bg-[linear-gradient(180deg,rgba(0,0,0,.84),transparent_84%)] transition-opacity duration-300 ease-out
+          group-data-[idle=true]/root:opacity-0
+          group-data-[status=buffering]/root:opacity-100
+          group-data-[status=paused]/root:opacity-100
+        `}
+        data-layout-type="asset-metadata-gradient-focus"
+      />
+      <ControlsTopContainer
+        className="pointer-events-none text-white"
+        data-layout-type="asset-metadata-overlay"
+      >
+        <div className="max-w-md">
+          {title && (
+            <h2 className="line-clamp-2 text-lg/tight font-semibold tracking-normal text-balance drop-shadow-[0_3px_18px_rgba(0,0,0,0.86)]">
+              {title}
+            </h2>
+          )}
+          {description && (
+            <p className="mt-1 line-clamp-2 max-w-sm text-sm/relaxed text-pretty text-white/80 drop-shadow-[0_2px_14px_rgba(0,0,0,0.78)]">
+              {description}
+            </p>
+          )}
+        </div>
+      </ControlsTopContainer>
+    </>
+  )
+}
diff --git a/apps/www/registry/default/blocks/video-player/components/media-player.tsx b/apps/www/registry/default/blocks/video-player/components/media-player.tsx
index a935762..10b21df 100644
--- a/apps/www/registry/default/blocks/video-player/components/media-player.tsx
+++ b/apps/www/registry/default/blocks/video-player/components/media-player.tsx
@@ -10,6 +10,7 @@ import type {
 } from "@/registry/default/hooks/use-asset"
 
 import { cn } from "@/lib/utils"
+import { AssetMetadataOverlay } from "@/registry/default/blocks/video-player/components/asset-metadata-overlay"
 import { BottomControls } from "@/registry/default/blocks/video-player/components/bottom-controls"
 import { Button } from "@/registry/default/blocks/video-player/components/button"
 import { MediaProvider } from "@/registry/default/blocks/video-player/lib/media-kit"
@@ -28,13 +29,16 @@ export interface VideoPlayerAsset extends Asset {
   description?: string
   poster?: string
   title?: string
+  year?: string
 }
 
 export interface VideoPlayerProps {
   autoLoad?: boolean
   children?: React.ReactNode
   className?: string
+  controlsHideDelay?: number
   debug?: boolean
+  hideCursorOnIdle?: boolean
   initialIndex?: number
   loading?: UseAssetOptions<VideoPlayerAsset>
   /**
@@ -51,7 +55,9 @@ export const VideoPlayer = React.forwardRef<HTMLDivElement, VideoPlayerProps>(
       autoLoad,
       children,
       className,
+      controlsHideDelay,
       debug,
+      hideCursorOnIdle,
       initialIndex,
       loading,
       mediaProps,
@@ -71,7 +77,12 @@ export const VideoPlayer = React.forwardRef<HTMLDivElement, VideoPlayerProps>(
           source={source}
           sourceKey={sourceKey}
         />
-        <RootContainer className={cn("m-auto w-full", className)} ref={ref}>
+        <RootContainer
+          className={cn("m-auto w-full", className)}
+          controlsHideDelay={controlsHideDelay}
+          hideCursorOnIdle={hideCursorOnIdle}
+          ref={ref}
+        >
           <Layout.PlayerContainer>
             <PlayerErrorScreen />
             <FallbackPoster>
@@ -87,6 +98,7 @@ export const VideoPlayer = React.forwardRef<HTMLDivElement, VideoPlayerProps>(
             {children}
             <Layout.ControlsOverlayContainer />
             <Layout.ControlsContainer className="pb-6">
+              <AssetMetadataOverlay />
               <CaptionsContainer />
               <BottomControls />
             </Layout.ControlsContainer>
diff --git a/apps/www/registry/default/blocks/video-player/components/playlist.tsx b/apps/www/registry/default/blocks/video-player/components/playlist.tsx
index 81f9e62..e116d23 100644
--- a/apps/www/registry/default/blocks/video-player/components/playlist.tsx
+++ b/apps/www/registry/default/blocks/video-player/components/playlist.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { CardsThreeIcon, PlayIcon } from "@phosphor-icons/react"
-import { useMemo } from "react"
+import { useEffect, useMemo } from "react"
 
 import type { VideoPlayerAsset } from "@/registry/default/blocks/video-player/components/media-player"
 
@@ -15,7 +15,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Button } from "@/registry/default/blocks/video-player/components/button"
-import { useAssetStore } from "@/registry/default/hooks/use-asset"
+import { useMediaStore } from "@/registry/default/hooks/use-media"
 import { usePlayerStore } from "@/registry/default/hooks/use-player"
 import { usePlaylistStore } from "@/registry/default/hooks/use-playlist"
 
@@ -24,10 +24,8 @@ export function Playlist() {
     (state) =>
       state.currentItem as null | { id: string; properties: VideoPlayerAsset }
   )
-  const preloadAsset = useAssetStore((state) => state.preloadAsset) as (
-    asset: VideoPlayerAsset
-  ) => Promise<void>
-  const preloadManagers = usePlayerStore((state) => state.preloadManagers)
+  const containerRef = usePlayerStore((state) => state.containerRef)
+  const setForceIdle = useMediaStore((state) => state.setForceIdle)
   const queue = usePlaylistStore(
     (state) => state.queue as { id: string; properties: VideoPlayerAsset }[]
   )
@@ -45,20 +43,28 @@ export function Playlist() {
       )
   }, [queue, shuffle, shuffleOrder])
 
+  useEffect(() => {
+    return () => {
+      setForceIdle(false)
+    }
+  }, [setForceIdle])
+
   if (orderedItems.length < 2) return null
 
   const handleAssetSelect = async (assetId: string) => {
     await skipToId(assetId)
   }
 
-  const handleAssetHover = async (assetId: string, asset: VideoPlayerAsset) => {
-    if (!preloadManagers.has(assetId) && currentItem?.id !== assetId) {
-      await preloadAsset(asset)
-    }
+  const dropdownCollisionProps: {
+    collisionBoundary?: Element
+    collisionPadding?: number
+  } = {
+    collisionBoundary: containerRef ?? undefined,
+    collisionPadding: 12,
   }
 
   return (
-    <DropdownMenu>
+    <DropdownMenu onOpenChange={setForceIdle}>
       <Button aria-label="Open Playlist" asChild size="icon" variant="glass">
         <DropdownMenuTrigger>
           <CardsThreeIcon weight="fill" />
@@ -70,20 +76,21 @@ export function Playlist() {
         className="dark w-sm border border-border p-2"
         side="top"
         sideOffset={24}
+        {...dropdownCollisionProps}
       >
         <DropdownMenuGroup>
           <DropdownMenuLabel>Playlist</DropdownMenuLabel>
           <DropdownMenuSeparator />
-          <div className="space-y-2">
+          <div className="space-y-1">
             {orderedItems.map((item) => {
               const asset = item.properties
               const isCurrentAsset = currentItem?.id === item.id
-              const isAssetPreloaded = preloadManagers.has(item.id)
 
               return (
                 <DropdownMenuItem
                   className={`
-                    dark p-0 transition-colors
+                    dark cursor-pointer rounded-md p-0 transition-colors
+                    focus:bg-accent/50 focus:outline-none
                     ${
                       isCurrentAsset
                         ? "border-primary/20 bg-primary/10"
@@ -92,13 +99,13 @@ export function Playlist() {
                   `}
                   key={item.id}
                   onClick={() => handleAssetSelect(item.id)}
-                  onMouseEnter={() => handleAssetHover(item.id, asset)}
                 >
                   <div className="flex w-full items-center gap-3 p-2">
                     <div className="relative aspect-video w-20 shrink-0 overflow-hidden rounded-sm">
                       <img
                         alt={asset.title ?? "Playlist item poster"}
                         className="object-cover"
+                        loading="lazy"
                         sizes="80px"
                         src={asset.poster}
                       />
@@ -110,21 +117,24 @@ export function Playlist() {
                           />
                         </div>
                       )}
-                      {isAssetPreloaded && !isCurrentAsset && (
-                        <div className="absolute top-1 right-1 size-2 rounded-full bg-green-500" />
-                      )}
                     </div>
                     <div className="min-w-0 flex-1">
-                      <div className="flex items-center gap-2">
-                        <div className="truncate text-sm font-medium">
+                      <div className="flex w-full items-center gap-2">
+                        <div className="min-w-0 flex-1 truncate text-sm font-medium">
                           {asset.title}
                         </div>
                         {isCurrentAsset && (
-                          <div className="flex size-2 rounded-full bg-primary" />
+                          <div className="size-2 shrink-0 rounded-full bg-primary" />
                         )}
+                        <span
+                          className="ml-auto shrink-0 text-[11px] text-muted-foreground tabular-nums"
+                          title={asset.year}
+                        >
+                          {asset.year}
+                        </span>
                       </div>
                       {asset.description && (
-                        <div className="line-clamp-2 text-xs text-muted-foreground">
+                        <div className="line-clamp-2 text-[11px] text-muted-foreground">
                           {asset.description}
                         </div>
                       )}
diff --git a/apps/www/registry/default/ui/player-layout.tsx b/apps/www/registry/default/ui/player-layout.tsx
index 278dc9d..1aedd6a 100644
--- a/apps/www/registry/default/ui/player-layout.tsx
+++ b/apps/www/registry/default/ui/player-layout.tsx
@@ -15,7 +15,7 @@ export const PlayerContainer = React.forwardRef<
   return (
     <div
       className={cn(
-        "relative z-20 aspect-(--aspect-ratio) w-full overflow-hidden text-primary",
+        "@container relative z-20 aspect-(--aspect-ratio) w-full overflow-hidden text-primary",
         className
       )}
       data-layout-type="player-container"
diff --git a/apps/www/registry/default/ui/root-container.tsx b/apps/www/registry/default/ui/root-container.tsx
index b77b464..8a97e2c 100644
--- a/apps/www/registry/default/ui/root-container.tsx
+++ b/apps/www/registry/default/ui/root-container.tsx
@@ -16,11 +16,20 @@ export interface RootContainerProps extends React.ComponentPropsWithoutRef<"div"
    * from their content, such as compact audio controls.
    */
   aspectRatio?: false | number | string
+  /**
+   * Time in milliseconds before controls become idle after pointer activity.
+   * Pass 0 to keep the immediate default behavior.
+   */
+  controlsHideDelay?: number
   /**
    * Height in pixels for aspect ratio calculation.
    * Used only if aspectRatio prop is not provided.
    */
   height?: number
+  /**
+   * Hide the cursor when controls are hidden.
+   */
+  hideCursorOnIdle?: boolean
   /**
    * Width in pixels for aspect ratio calculation.
    * Used only if aspectRatio prop is not provided.
@@ -30,7 +39,12 @@ export interface RootContainerProps extends React.ComponentPropsWithoutRef<"div"
 
 export type RootContainerPropsDocs = Pick<
   RootContainerProps,
-  "asChild" | "aspectRatio" | "height" | "width"
+  | "asChild"
+  | "aspectRatio"
+  | "controlsHideDelay"
+  | "height"
+  | "hideCursorOnIdle"
+  | "width"
 >
 
 export const RootContainer = React.forwardRef<
@@ -42,7 +56,9 @@ export const RootContainer = React.forwardRef<
     aspectRatio: aspectRatioProp,
     children,
     className,
+    controlsHideDelay = 0,
     height = 1080,
+    hideCursorOnIdle = false,
     onBlur,
     onFocus,
     onPointerEnter,
@@ -60,11 +76,63 @@ export const RootContainer = React.forwardRef<
   const debug = useMediaStore((state) => state.debug)
 
   const setPlayerContainerRef = usePlayerStore((state) => state.setContainerRef)
+  const hideTimerRef = React.useRef<null | number>(null)
   const aspectRatio = React.useMemo(
     () => resolveAspectRatio(aspectRatioProp, width, height),
     [aspectRatioProp, height, width]
   )
   const Component = asChild ? Slot : "div"
+  const controlsHidden =
+    !debug &&
+    !forceIdle &&
+    idle &&
+    status !== "buffering" &&
+    status !== "paused"
+
+  const clearHideTimer = React.useCallback(() => {
+    if (hideTimerRef.current === null) return
+
+    window.clearTimeout(hideTimerRef.current)
+    hideTimerRef.current = null
+  }, [])
+
+  const hideControls = React.useCallback(() => {
+    if (forceIdle) return
+
+    clearHideTimer()
+
+    if (controlsHideDelay > 0) {
+      hideTimerRef.current = window.setTimeout(() => {
+        setIdle(true)
+        hideTimerRef.current = null
+      }, controlsHideDelay)
+      return
+    }
+
+    setIdle(true)
+  }, [clearHideTimer, controlsHideDelay, forceIdle, setIdle])
+
+  const showControls = React.useCallback(
+    (options?: { autoHide?: boolean }) => {
+      if (forceIdle) return
+
+      clearHideTimer()
+      setIdle(false)
+
+      if (options?.autoHide) {
+        hideControls()
+      }
+    },
+    [clearHideTimer, forceIdle, hideControls, setIdle]
+  )
+
+  React.useEffect(() => clearHideTimer, [clearHideTimer])
+
+  React.useEffect(() => {
+    if (forceIdle) {
+      clearHideTimer()
+    }
+  }, [clearHideTimer, forceIdle])
 
   return (
     <Component
@@ -75,40 +143,37 @@ export const RootContainer = React.forwardRef<
           focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary/50
         `,
         aspectRatio ? "aspect-(--aspect-ratio)" : "",
+        hideCursorOnIdle && controlsHidden ? "cursor-none" : "",
         className
       )}
       data-idle={debug || forceIdle ? "false" : idle}
       data-layout-type="root-container"
       data-status={status}
-      onBlur={composeEventHandlers(onBlur, () => {
-        if (!forceIdle) {
-          setIdle(true)
+      onBlur={composeEventHandlers(onBlur, (event) => {
+        const relatedTarget = event.relatedTarget
+        if (
+          relatedTarget instanceof Node &&
+          event.currentTarget.contains(relatedTarget)
+        ) {
+          return
         }
+
+        hideControls()
       })}
       onFocus={composeEventHandlers(onFocus, () => {
-        if (!forceIdle) {
-          setIdle(false)
-        }
+        showControls()
       })}
       onPointerEnter={composeEventHandlers(onPointerEnter, () => {
-        if (!forceIdle) {
-          setIdle(false)
-        }
+        showControls({ autoHide: controlsHideDelay > 0 })
       })}
       onPointerLeave={composeEventHandlers(onPointerLeave, () => {
-        if (!forceIdle) {
-          setIdle(true)
-        }
+        hideControls()
       })}
       onPointerMove={composeEventHandlers(onPointerMove, () => {
-        if (!forceIdle) {
-          setIdle(false)
-        }
+        showControls({ autoHide: controlsHideDelay > 0 })
       })}
       onPointerUp={composeEventHandlers(onPointerUp, () => {
-        if (!forceIdle) {
-          setIdle(false)
-        }
+        showControls({ autoHide: controlsHideDelay > 0 })
       })}
       ref={composeRefs(forwardedRef, setPlayerContainerRef)}
       role="region"
@@ -144,8 +209,10 @@ function composeEventHandlers<E extends React.SyntheticEvent>(
   internalHandler: (event: E) => void
 ) {
   return (event: E) => {
-    internalHandler(event)
     consumerHandler?.(event)
+    if (!event.defaultPrevented) {
+      internalHandler(event)
+    }
   }
 }