UX overhaul: motion animations, command palette, warm cinema theme

Add premium "Late Night Screening Room" experience with warm indigo/amber
palette, framer-motion spring animations, Cmd+K command palette with TMDB
search, keyboard shortcuts (G H, G S, ?, W, M, 1-5), sonner toasts with
optimistic updates, skeleton loading states, stats dashboard, search
autocomplete with filter tabs, cinematic backdrop with film grain, season
progress bars, and staggered card reveal animations throughout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-27 15:30:35 -05:00
co-authored by Claude Opus 4.6
parent 095b64ab42
commit b6aaad243f
23 changed files with 2017 additions and 339 deletions
+19 -4
View File
@@ -1,4 +1,10 @@
"use client";
import { CommandPalette } from "@/components/command-palette";
import { KeyboardHelpDialog } from "@/components/keyboard-help-dialog";
import { KeyboardProvider } from "@/components/keyboard-provider";
import { NavBar } from "@/components/nav-bar";
import { Toaster } from "@/components/ui/sonner";
export default function PagesLayout({
children,
@@ -6,9 +12,18 @@ export default function PagesLayout({
children: React.ReactNode;
}) {
return (
<div className="min-h-screen">
<NavBar />
<main className="mx-auto max-w-6xl px-4 py-6">{children}</main>
</div>
<KeyboardProvider>
<div className="min-h-screen">
<NavBar />
{/* Ambient glow */}
<div className="pointer-events-none fixed left-1/2 top-1/4 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[800px] rounded-full bg-primary/3 blur-[200px]" />
<main className="relative mx-auto max-w-6xl px-4 py-6 sm:px-6">
{children}
</main>
</div>
<CommandPalette />
<KeyboardHelpDialog />
<Toaster position="bottom-right" />
</KeyboardProvider>
);
}