absolute-stage

import type {CSSProperties, ReactNode} from "react";
import {Fill, useBrand, useDesignScale, useVideo} from "odori";

export type AbsoluteStageProps = {
  children?: ReactNode;
  /** Where the content sits inside the frame. */
  align?: "center" | "start" | "end";
  /** Inset from the frame edge, in design pixels. */
  padding?: number;
  /** Draw the frame edge, useful while composing. */
  showBounds?: boolean;
  style?: CSSProperties;
};

/**
 * The plainest full-frame surface: predictable clipping, one alignment
 * decision, and padding that scales with the format. Reach for this when a
 * scene needs structure without the grid and glow of the branded stage.
 */
export const AbsoluteStage = ({children, align = "center", padding = 120, showBounds = false, style}: AbsoluteStageProps) => {
  const brand = useBrand();
  const scale = useDesignScale();
  const {width, height} = useVideo();

  return (
    <Fill style={{background: brand.colors.background, overflow: "hidden", ...style}}>
      <Fill
        style={{
          alignItems: "center",
          display: "flex",
          justifyContent: align === "center" ? "center" : align === "start" ? "flex-start" : "flex-end",
          flexDirection: "column",
          padding: padding * scale,
        }}
      >
        {children}
      </Fill>
      {showBounds ? (
        <Fill
          style={{
            border: `${2 * scale}px dashed ${brand.colors.border}`,
            inset: padding * scale,
            pointerEvents: "none",
          }}
        >
          <span
            style={{
              color: brand.colors.muted,
              fontFamily: brand.typography.mono,
              fontSize: 22 * scale,
              padding: 12 * scale,
            }}
          >
            {width} x {height}
          </span>
        </Fill>
      ) : null}
    </Fill>
  );
};

import {defineComponentPreview} from "odori/preview";
import {AbsoluteStage} from "./absolute-stage";

export default defineComponentPreview({
  title: "Absolute stage",
  category: "Foundation",
  description: "Full-frame surface with stable clipping and positioning.",
  component: AbsoluteStage,
  canvas: {width: 1920, height: 1080, duration: "3s"},
  controls: {
    align: {type: "select", defaultValue: "center", options: ["center", "start", "end"]},
    padding: {type: "number", defaultValue: 120, min: 0, max: 320},
    showBounds: {type: "boolean", defaultValue: true},
  },
  examples: [
    {name: "Bounds", props: {showBounds: true, children: "Content sits here"}},
    {name: "Clean", props: {showBounds: false, children: "Content sits here"}},
  ],
});

import {Scene, Video} from "odori";
import {AbsoluteStage} from "../components/absolute-stage/absolute-stage";

<Video>
  <Scene id="absolute-stage" duration="3s">
    <AbsoluteStage
      align="center"
      padding={120}
      showBounds={true}
    />
  </Scene>
</Video>