# How the Fixed 1920x1080 Stage Works in the web-video-presentation Skill

> Discover how the fixed 1920x1080 stage in the web-video-presentation skill scales dynamically for perfect 16:9 aspect ratio across viewports.

- Repository: [ConardLi/garden-skills](https://github.com/ConardLi/garden-skills)
- Tags: internals
- Published: 2026-08-30

---

**The web-video-presentation skill renders every slide on a fixed 1920×1080 pixel stage that dynamically scales to fit any viewport while preserving its 16:9 aspect ratio, using a generated ID like `I92OxIO8O` and theme-driven CSS variables for consistent, pixel-perfect presentations.**

The web-video-presentation skill in the ConardLi/garden-skills repository creates a cinematic presentation environment by anchoring all content to a fixed logical canvas. This fixed 1920x1080 stage ensures that slide elements maintain exact pixel coordinates regardless of the viewer's screen size, making it ideal for screen recording and video production workflows. Understanding this architecture requires examining the React scaling logic, CSS token system, and dynamic stage identification implemented in the source code.

## Fixed Stage Architecture Overview

The stage system operates on a three-layer architecture that separates the logical coordinate system from the responsive rendering layer.

### The 1920×1080 Logical Canvas

At the core of the system is a fixed logical size of **1920×1080 pixels** (16:9 aspect ratio). This canvas is defined by the `.stage-frame` class in [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css), which sets explicit dimensions using CSS custom properties:

- `--stage-w: 1920px`
- `--stage-h: 1080px`
- `--stage-ratio: calc(var(--stage-w) / var(--stage-h))`

This fixed coordinate system allows designers to position elements using pixel-perfect measurements that remain constant across all viewports.

### Dynamic Stage Identification

Each stage instance receives a unique identifier generated at runtime. In [`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx), the component creates an ID using `crypto.randomUUID().slice(0,9)` prefixed with `I` (e.g., `I92OxIO8O`), which is assigned to the root `<div id={stageId}>`. This identifier enables isolated theming and debugging for individual presentation instances.

## Responsive Scaling Implementation

While the logical canvas remains fixed, the visual presentation adapts to any screen size through a calculated scaling transformation.

### Scale Calculation Logic

The [`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx) component computes the scaling factor using the viewport dimensions:

```typescript
const scale = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);

```

This calculation ensures the entire 1920×1080 canvas fits within the available screen space while maintaining the aspect ratio. The scale value is applied to the `.stage-wrapper` element via the `--stage-scale` CSS custom property.

### Wrapper Transformation

The scaling implementation uses absolute positioning and CSS transforms to center the stage:

```css
.stage-wrapper {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: top left;
}

```

The wrapper element tracks the computed scale value and updates dynamically on window resize events, ensuring smooth transitions when the viewport changes.

## Theme-Driven Styling Architecture

The visual appearance of the stage is controlled through a token-based theming system that separates structural scaling from aesthetic presentation.

### CSS Token Definitions

The [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) file in the theme directory declares all stage-related variables:

```css
:root {
  --stage-w: 1920px;
  --stage-h: 1080px;
  --stage-pad-x: 96px;
  --stage-pad-y: 80px;
  --r-stage: 0;
  --shadow-stage: 0 6px 12px rgba(0,0,0,.2);
  --stage-border: none;
}

```

These variables define the fixed dimensions, internal padding, corner radius, and shadows while allowing themes to customize the visual presentation without modifying the scaling logic.

### Theme Configuration

Concrete values for these tokens are provided in [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) (located in `skills/web-video-presentation/themes/warm-keynote/`). The [`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx) component injects these values into `document.documentElement.style` during initialization, allowing runtime theme switching.

### Stage Frame Implementation

The `.stage-frame` class applies the fixed dimensions and theme variables to create the actual presentation surface:

```css
.stage-frame {
  width: var(--stage-w);
  height: var(--stage-h);
  padding: var(--stage-pad-y) var(--stage-pad-x);
  border-radius: var(--r-stage);
  box-shadow: var(--shadow-stage);
  border: var(--stage-border);
  background: var(--stage-bg, #fff);
}

```

## Source Code Reference

The fixed stage implementation spans several key files in the ConardLi/garden-skills repository:

- **[`templates/src/components/Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/templates/src/components/Stage.tsx)**: Implements the React component that generates the stage ID, calculates viewport scaling, and manages the resize event listeners.
- **[`themes/warm-keynote/tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/themes/warm-keynote/tokens.css)**: Defines the CSS custom properties for stage dimensions, padding, and visual styling.
- **[`themes/warm-keynote/theme.json`](https://github.com/ConardLi/garden-skills/blob/main/themes/warm-keynote/theme.json)**: Supplies the concrete values for theme variables consumed by the stage system.
- **[`manifest.json`](https://github.com/ConardLi/garden-skills/blob/main/manifest.json)**: Declares the skill's asset structure and entry points.
- **[`SKILL.md`](https://github.com/ConardLi/garden-skills/blob/main/SKILL.md)**: Documents the fixed-stage workflow and usage guidelines.

## Summary

- The **fixed 1920x1080 stage** provides a logical coordinate system that never changes, enabling pixel-perfect content positioning for video production.
- **Dynamic scaling** is handled by the [`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx) component, which calculates a scale factor based on viewport dimensions and applies it via CSS transforms to the `.stage-wrapper` element.
- **Theme-driven styling** separates visual appearance from structural logic through CSS variables defined in [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) and configured in [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json).
- Each stage instance receives a **unique generated ID** (e.g., `I92OxIO8O`) created via `crypto.randomUUID()` to enable isolated theming and debugging.

## Frequently Asked Questions

### How does the stage maintain the 16:9 aspect ratio on different screen sizes?

The stage preserves its aspect ratio by calculating a uniform scale factor using `Math.min(window.innerWidth / 1920, window.innerHeight / 1080)` in [`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx). This selects the smaller of the horizontal or vertical scaling ratios, ensuring the entire 1920×1080 canvas fits within the viewport without distortion. The scale is applied via CSS `transform: scale()` on the `.stage-wrapper` container.

### Why does the stage use a fixed 1920x1080 resolution instead of relative units?

The fixed resolution creates a **stable coordinate system** where every element can be positioned using exact pixel values. This is essential for the web-video-presentation skill's primary use case: creating presentations that will be screen-recorded or exported as video. Relative units would cause layout shifts between different screen sizes, breaking the pixel-perfect consistency required for professional video production.

### Where are the stage's visual styles (padding, shadows, borders) defined?

Visual styles are defined through CSS custom properties in [`tokens.css`](https://github.com/ConardLi/garden-skills/blob/main/tokens.css) and populated with values from [`theme.json`](https://github.com/ConardLi/garden-skills/blob/main/theme.json) in the specific theme folder (e.g., `themes/warm-keynote/`). The [`Stage.tsx`](https://github.com/ConardLi/garden-skills/blob/main/Stage.tsx) component injects these variables into the document root during initialization. Properties like `--stage-pad-x`, `--stage-pad-y`, `--shadow-stage`, and `--r-stage` control the internal spacing and visual appearance without affecting the core scaling logic.

### What is the purpose of the generated ID like `I92OxIO8O`?

The generated ID serves as a **unique stage token** that identifies individual presentation instances. Created using `crypto.randomUUID().slice(0,9)` and prefixed with `I`, this ID is attached to the root stage element as both an HTML `id` attribute and potentially for theme scoping. It enables debugging, allows for instance-specific styling hooks, and ensures that multiple stages can coexist on the same page without ID collisions.