TVScene

TVScene — Prism component.

Signature

Density

Viewport

Theme follows the navbar ☀/☾ toggle

Live demo

Open ↗

When to use

TVScene — Prism component.

Accessibility

Designed for the ten-foot / remote experience: large focus targets, a single bright focus highlight, D-pad navigation, and high-contrast type. Honours data-scale="cinema".

Import

const { TVScene } = window.PrismDesignSystem_39d121;

Props

Prop	Type	Required	Description
scale	"tv" | "cinema" | "desktop"	—	Device tier; drives the cinema scale. Default "tv".
theme	"dark" | "light"	—	Color theme. TV surfaces are dark by default.
backdrop	boolean	—	Render the crossfading cinematic backdrop layers. Default true.
showHint	boolean	—	Show the corner remote hint. Default true.
hint	React.ReactNode	—	Custom hint content (replaces the default ↑↓←→ / ⏎ legend).
idleMs	number	—	Idle timeout in ms; after this with no input the scene shows its idle slot.
panAnchor	number	—	Where the focused row sits vertically when panning (0–1). Default 0.4.
topBar	React.ReactNode	—	Pinned top bar (e.g. <TVTopBar>); stays fixed while the body pans.
idle	React.ReactNode	—	Idle/screensaver slot (e.g. <TVIdleScreen>); shown when idle.
overlay	React.ReactNode	—	Overlay slot rendered above everything (e.g. <TVModal>, <TVEmergencyScreen>).
toasts	React.ReactNode	—	Toast slot (e.g. <TVToast>).
onBack	() =&gt; void	—	Called when Back/Esc is pressed.
onHome	() =&gt; void	—	Called when Home is pressed.
onMenu	() =&gt; void	—	Called when the Menu/context key is pressed.
onIdle	(asleep: boolean) =&gt; void	—	Called when the scene sleeps (true) or wakes (false).
children	React.ReactNode	—