webdevpuneet.com

Related Snippets

83 in Layouts category
49–54 of 60

Smart TV Mockup

Smartwatch Mockup

Laptop Mockup

Browser Window Mockup

Tablet Mockup

Phone Mockup

Smart TV Mockup — Free CSS TV Screen UI Snippet

Smart TV Mockup · Layouts · Plain HTML, CSS & JS · Live preview

CategoryLayouts
TagsKeyboard Navigation

Copy & paste

Source Code

<div class="tv-stage">
  <div class="tv-set">
    <div class="tv-screen">
      <div class="tv-ui" id="tvUi" tabindex="0">
        <div class="tv-hero">
          <span class="tv-tag">SERIES</span>
          <h2>Nightfall</h2>
          <p>A detective unravels a city-wide conspiracy across one endless night.</p>
          <div class="tv-actions"><span class="tv-play" data-f>▶ Play</span><span class="tv-more" data-f>+ My List</span></div>
        </div>
        <div class="tv-row">
          <h3>Trending now</h3>
          <div class="tv-tiles">
            <span class="t1" data-f></span><span class="t2" data-f></span><span class="t3" data-f></span><span class="t4" data-f></span><span class="t5" data-f></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="tv-stand"></div><div class="tv-foot"></div>
  <p class="tv-hint">Click the screen, then use arrow keys to move focus</p>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Pure-CSS TV
Bezel, stand, and foot from CSS shapes — no image.
16:9 screen
aspect-ratio keeps TV proportions responsively.
D-pad navigation
Arrow keys move a focus highlight, not a cursor.
Spatial groups
Down/Up jump between the hero and tile rows.
Bold focus ring
A scale and white outline for 10-foot legibility.
Clamped focus
Focus never falls off the ends.
data-f tagging
Add focusable items and the nav adapts.
No dependency
Pure HTML/CSS/JS for TV interfaces.

About this UI Snippet

Smart TV Mockup — CSS TV Frame with D-Pad Focus

Screenshot of the Smart TV Mockup snippet rendered live

A smart TV mockup frames a streaming or app interface inside a television, complete with the focus-based navigation that remote-driven TV UIs rely on. This snippet builds a flat-screen TV in pure HTML and CSS — bezel, stand, foot — with a sample streaming home screen and real D-pad arrow-key navigation, in vanilla JavaScript with no dependency. It's a strong reference for the "10-foot UI" focus model that web TV apps (and devices like Apple TV or Android TV) use.

The TV body and stand

The set is a near-black rounded box with a thin inset bezel and a soft shadow, wrapping a 16/9 aspect-ratio screen so it keeps TV proportions at any width. Below it, a clip-path trapezoid forms the angled neck of the stand and a rounded bar is the foot — a recognizable TV silhouette built entirely from CSS shapes.

Focus-driven navigation, not a cursor

TV interfaces don't have a pointer; users move a *focus highlight* with a remote's directional pad. This mockup implements exactly that: every focusable element is tagged [data-f], and a setFocus(i) function moves a .focus class that scales the element and draws a white ring. Arrow keys drive it — Left/Right move within a group, Down jumps from the hero buttons into the tile row, Up returns — with the index clamped so focus never falls off the ends.

Spatial groups

The handler models two rows: the hero actions (indices 0–1) and the content tiles (2–6). Down from the hero lands on the first tile; Up from any tile returns to the first action. This is a simplified version of the spatial-navigation logic TV frameworks implement, and it shows the core idea — mapping directional input to the nearest focusable item — without a library.

Visible focus and Enter

The focus ring is deliberately bold (a white outline plus a lift), because on a TV viewed from across the room the focused item must be unmistakable. Pressing Enter gives a quick press animation, standing in for selecting a title. scrollIntoView({ block: 'nearest' }) keeps the focused tile in view if the row scrolls.

Reusing it

Replace the rows with your real content and tag focusable items with data-f; the navigation adapts to however many you add. Use it to prototype a streaming app, a kiosk, or any carousel-driven TV interface, and pair it with a laptop mockup to show a cross-device product.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA CSS smart TV renders a streaming home screen.
  2. 2
    Click the screenFocus the UI so it can receive key input.
  3. 3
    Press arrow keysA focus ring moves between the hero buttons and tiles.
  4. 4
    Go down then acrossDown enters the tile row; Left/Right move along it.
  5. 5
    Press EnterThe focused item gives a quick select animation.
  6. 6
    Add your contentTag focusable items with data-f and the nav adapts.

Real-world uses

Common Use Cases

Streaming app prototypes
Mock a TV home screen of poster tiles inside a 16:9 flat panel with bezel, stand and foot drawn from CSS shapes alone.
Cross-device showcases
Pair with a laptop mockup and phone mockup to present a media app across screens, as part of a carousel of device shots.
Kiosk and signage prototypes
Prototype focus-driven interfaces beside a sidebar nav, with D-pad arrow keys moving a focus highlight rather than a cursor.
Marketing shots
Frame a media app in a bento grid, with spatial groups letting Down and Up jump between a hero row and tile rows.
Game and console interfaces
Reuse the focus model for a leaderboard podium or menu screens, and study D-pad navigation as a spatial focus reference.

Got questions?

Frequently Asked Questions

Every focusable element is tagged with a data-f attribute and collected into an array. A setFocus(index) function toggles a focus class — scaling the item and drawing a white ring — and arrow keys change the index: Left/Right move within a row, Down jumps from the hero buttons into the tiles, and Up returns. The index is clamped so focus stays on a valid item.

TV interfaces are driven by a remote's directional pad, not a pointer, so navigation moves a visible focus highlight between elements. This mockup models that "10-foot UI" pattern, which is how Apple TV, Android TV, and web TV apps work. The bold focus ring exists because the focused item must be obvious from across a room.

No. The set is a rounded near-black box with an inset bezel, the screen uses a 16/9 aspect-ratio, and the stand is a clip-path trapezoid with a rounded foot bar. Everything is CSS, so it scales crisply and you can recolor or resize the frame freely.

Put your rows and tiles in the screen and add the data-f attribute to anything that should be focusable. The script collects all data-f elements automatically, so the navigation works with however many you add. You can extend the keydown handler to model more rows for richer spatial movement.

Render the rows from data and keep the focused index in state, applying the focus class conditionally. Handle arrow keys in a keydown listener on the container ref and update the index. For production TV apps, consider a spatial-navigation library, but this shows the core mapping of directional input to the nearest focusable item. Tailwind styles the frame and tiles with utilities.