The Complete Production SOP: How to Deploy and Run Theater.js Programmatic Motion Design in Autonomous AI Agents

---
name: "theaterjs-cinematic-animation"
description: "Design and orchestrate complex cinematic web animations with Theater.js visual studio."
metadata:
  author: "Theater.js"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "orchestrate animation theaterjs"
  - "use theater.js studio"
  - "animate multiple objects synchronized"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import { getProject, types } from '@theater/core';
import projectState from './state.json';

export const project = getProject('LandingCinematics', { state: projectState });
export const sheet = project.sheet('HeroScene');

if (process.env.NODE_ENV === 'development') {
  import('@theater/studio').then((studio) => {
    studio.default.initialize();
  });
}

import { sheet } from './orchestrator';
import { types } from '@theater/core';

export function setupHeroMotion(heroHeading: HTMLElement, heroBadge: HTMLElement) {
  const headingActor = sheet.object('HeadingActor', {
    opacity: types.number(0, { range: [0, 1] }),
    yOffset: types.number(50, { range: [-200, 200] }),
  });

  const badgeActor = sheet.object('BadgeActor', {
    scale: types.number(0.8, { range: [0, 2] }),
    opacity: types.number(0, { range: [0, 1] }),
  });

  headingActor.onValuesChange((values) => {
    heroHeading.style.opacity = `${values.opacity}`;
    heroHeading.style.transform = `translateY(${values.yOffset}px)`;
  });

  badgeActor.onValuesChange((values) => {
    heroBadge.style.opacity = `${values.opacity}`;
    heroBadge.style.transform = `scale(${values.scale})`;
  });

  return () => sheet.sequence.play({ iterationCount: 1, rate: 1.0 });
}

#!/usr/bin/env bash
set -euo pipefail
echo "Checking for studio leak in build output..."
if grep -rq "@theater/studio" dist/; then
  echo "ERROR: @theater/studio detected in production dist bundle!" >&2
  exit 1
fi
echo "Verification Passed: Theater.js production bundle cleanly separated."