Retro TV

A vertical video presented in a detailed television cabinet, with an accessible player, channel label, scanlines and an animated off-state.

Web · ✓Mobile · n/aDesktop · ✓BetaMedia

import { RetroTv } from "@krizaka/ui/retro-tv";

CH 3 · Plateau

Web only — React, from @krizaka/ui/retro-tv. Beta: its API may still change in a minor version.

Mobile · n/a. The CSS cabinet and SVG static belong to the web presentation; use the native video player for mobile playback. → Video player

Why it is here. Akinaza's shop pages: a vertical reel or behind-the-scenes story displayed in the shop's television cabinet.

When to use

To give a shop's latest reel or story a place on its wall, while keeping the video itself the focus.
For a vertical clip whose presentation should feel like a television, in either cabinet or portable style.

When not to use

For video without a decorative television frame: use the accessible video player.Use instead: Video player
For a feed of creator clips with an action rail and caption: use vertical video.Use instead: Vertical video

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { RetroTv } from "@krizaka/ui/retro-tv";

Examples

Wood cabinet

A vertical shop story in the cabinet television, with its channel label and player controls.

CH 3 · Plateau

Portable set

The same vertical story in a compact cream television cabinet.

CH 3 · Plateau

A platform's reel behind a facade

children: an EmbedFacade on the screen, nothing loaded until the click.

CH 3 · Plateau

Props

A vertical video presented in an old-school television; the existing player remains fully accessible.

Prop	Type	Default	Description
`title`required	`string`	—	The accessible name of the player ("Video: Sunset over Montréal"), passed translated.
`autoPlay`	`boolean`	`true`	Starts muted and plays only while on screen; reduced motion waits for a gesture. Default `true`.
`channel`	`string`	—	A short channel label shown on the cabinet, for example `"CH 3 · Plateau"`.
`children`	`ReactNode`	—	What the screen shows instead of the video player: an `EmbedFacade` for a platform's short video.
`className`	`string`	—	Additional classes on the television frame.
`controls`	`boolean`	—	Shows the controls (default). `false`: a bare video (a background loop) — give it no sound.
`labels`	`Partial<VideoPlayerLabels>`	—	The words, passed translated; English by default.
`loadHls`	`(() => Promise<HlsModule>)`	—	Loads hls.js when the browser cannot play HLS itself: `() => import("hls.js")`. Without it, HLS needs Safari.
`loop`	`boolean`	`true`	Plays the video again from the start when it ends. Default `true`.
`muted`	`boolean`	`true`	Starts the player muted. Default `true`.
`off`	`boolean`	`false`	Shows animated static instead of loading or playing the video.
`onEnded`	`(() => void)`	—	Called at the end.
`onError`	`((error: unknown) => void)`	—	Called when the video cannot play (a network failure, an expired address).
`onPause`	`(() => void)`	—	Called when playback pauses.
`onPlay`	`(() => void)`	—	Called when playback starts.
`onTimeUpdate`	`((time: number) => void)`	—	Called as the time moves, in seconds (a few times a second).
`overlay`	`ReactNode`	—	Covers the video and hides the controls: a gate (sign in, unlock, age check) drawn by the app.
`pauseWhenHidden`	`boolean`	—	Pauses when less than a quarter of the player is on screen. Default `true`.
`playbackRates`	`readonly number[]`	—	The speeds offered by the speed button. Default `[0.5, 1, 1.25, 1.5, 2]`.
`poster`	`string`	—	The picture shown before playback.
`preload`	`"metadata" \| "none" \| "auto"`	`none`	How much to fetch before playback. Default `none` for lazy loading.
`src`	`string \| (() => Promise<string>)`	—	The video's address. Optional when the screen shows `children`.
`tracks`	`readonly VideoTrack[]`	—	Subtitles or captions (WebVTT): the C key and a button cycle through them.
`type`	`"auto" \| "file" \| "hls"`	—	`auto` (default): HLS when the address ends in `.m3u8`.
`variant`	`"cabinet" \| "portable"`	`cabinet`	The cabinet style.

Accessibility

The cabinet, scanlines and static are decorative; the embedded video player keeps its named region and keyboard-accessible controls.
The focus ring remains visible around the screen, and the channel name is visible text.
Under reduced motion the power-on and static effects stop, and autoplay waits for a gesture.

Keyboard

Keys	Action
`Space / K`	Play or pause the focused video.
`Tab`	Move through the player's named controls.

Best practices

Give the player a title, poster and translated labels; pass WebVTT captions as tracks.
Keep autoplay muted; it starts only while the player is on screen and waits under reduced motion.
Use off for the static screen; the video is not loaded or played in this state.
A platform's short video (TikTok, YouTube Shorts, Instagram) goes in as children, an EmbedFacade: the television's screen shows the facade, and nothing is requested from the platform before the visitor's click.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub

Retro TV

When to use

When not to use

Installation

Examples

Wood cabinet

Portable set

A platform's reel behind a facade

Props

Accessibility

Keyboard

Best practices

Related components

On this page