Is Panorama Window free for commercial use?

Yes. Panorama Window is MIT licensed, so you can use it in personal and commercial projects without attribution.

Is Panorama Window accessible and usable when an image fails?

Yes. It uses one native labelled range input with keyboard and touch support, keeps the complete image alternative text available, and announces an inline image error. If the source recovers or changes, the error clears.

How do I customise the frame and starting crop?

Set frameRatio to reserve a different frame shape and defaultPosition to choose the initial horizontal position. Images that fit the frame are shown in full and receive a disabled range with an explanation. The server-rendered image remains visible before JavaScript hydrates.

Panorama Window

A free responsive panorama viewer for inspecting one wide image with a native range control.

Harbour district, north to south

Architectural panorama of a harbour town, with distinct towers and waterfront buildings across the full skyline

Horizontal image position50%

Product design review

Three screens, one continuous workspace

Keep the review frame fixed while checking each region of a wide desktop layout.

Workspace layout review

Wide product design workspace with three application screens and separate interface layouts

Horizontal image position25%

Detail study

Horizontal image position50%

This image fits the frame; horizontal panning is unavailable.

Panorama Window is a free responsive image viewer for React and Next.js, styled with Tailwind. It keeps one caller-owned photograph, map or diagram inside a stable frame while a native horizontal range control moves continuously across the source image.

The slider works with keyboard and touch, preserves the complete source alt text and shows a visible position value. The frame reserves its shape before the image loads. When the source fits the frame, horizontal movement is disabled with an explanation; an image-loading failure is announced and clears when the source recovers.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/media-panorama-window

Usage

import { MediaPanoramaWindow } from "@/components/media-panorama-window";

export function Example() {
  return (
    <MediaPanoramaWindow
      label="Harbour district, north to south"
      src="/harbour-panorama.jpg"
      alt="Harbour town skyline with waterfront buildings from west to east"
      width={2400}
      height={900}
      defaultPosition={50}
    />
  );
}

Props

Prop	Type	Default	Description
label	string	required	Visible heading and accessible name context for the image and range control.
src	string	required	Caller-provided image URL passed to a native img element.
alt	string	required	Meaningful text describing the complete image source.
width	number	required	Positive intrinsic source-image width in pixels.
height	number	required	Positive intrinsic source-image height in pixels.
frameRatio	number	16 / 9	Positive width-to-height ratio reserved for the frame.
defaultPosition	number	50	Starting horizontal crop position, clamped from 0 to 100 percent.
className	string	undefined	Additional classes merged onto the root panel.

Customisation

Use frameRatio to reserve the viewport shape and defaultPosition to select the initial crop. The range uses the browser's native keyboard and touch behaviour; semantic surface, border and focus tokens follow the consumer theme. Add a className for panel placement and surface treatment without changing the image interaction.

<MediaPanoramaWindow
  label="Floor plan, east wing"
  src="/floor-plan.jpg"
  alt="Full floor plan showing the east wing and central courtyard"
  width={2800}
  height={960}
  frameRatio={2.1}
  defaultPosition={72}
  className="rounded-2xl border border-border"
/>

Frequently asked questions

Is Panorama Window free for commercial use?: Yes. Panorama Window is MIT licensed, so you can use it in personal and commercial projects without attribution.
Is Panorama Window accessible and usable when an image fails?: Yes. It uses one native labelled range input with keyboard and touch support, keeps the complete image alternative text available, and announces an inline image error. If the source recovers or changes, the error clears.
How do I customise the frame and starting crop?: Set frameRatio to reserve a different frame shape and defaultPosition to choose the initial horizontal position. Images that fit the frame are shown in full and receive a disabled range with an explanation. The server-rendered image remains visible before JavaScript hydrates.

Related components

Build the rest of the product storyTemplate Empire templates bring responsive layouts and polished product storytelling together across complete Next.js pages.Explore Template Empire templates