@vanillaskyai/video 0.1.0

package/examples/nextjs-quickstart/src/app/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useState } from "react";
+import { VideoPlayer, useVideo } from "@vanillaskyai/video/react";
+
+export default function Page() {
+  const [input, setInput] = useState(
+    "Activation increased from 41% to 58% after guided onboarding.",
+  );
+  const video = useVideo();
+
+  return <main>
+    <h1>VanillaSky quickstart</h1>
+    <label>
+      Grounded input
+      <textarea value={input} onChange={(event) => setInput(event.target.value)} />
+    </label>
+    <button
+      disabled={!input.trim() || video.status === "streaming"}
+      onClick={() => { void video.generate({
+        input,
+        personalization: { firstName: "Maya" },
+      }); }}
+    >
+      Generate video
+    </button>
+    <output data-testid="status">{video.status}</output>
+    {video.error && <p role="alert">{video.error.message}</p>}
+    <VideoPlayer {...video.playerProps} />
+  </main>;
+}

package/examples/nextjs-quickstart/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "plugins": [{ "name": "next" }]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/package.json

@@ -0,0 +1,167 @@
+{
+  "name": "@vanillaskyai/video",
+  "version": "0.1.0",
+  "description": "Open-source video response SDK for personalized AI applications.",
+  "keywords": [
+    "generative-video",
+    "personalized-video",
+    "video-response",
+    "ai-output",
+    "contextual-ai",
+    "streaming",
+    "react",
+    "llm",
+    "video"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VanillaSkyAi/video.git"
+  },
+  "bugs": {
+    "url": "https://github.com/VanillaSkyAi/video/issues"
+  },
+  "homepage": "https://vanillasky.ai",
+  "files": [
+    "bin",
+    "dist",
+    "registry/items",
+    "examples/custom-template",
+    "examples/nextjs-quickstart/.env.example",
+    "examples/nextjs-quickstart/README.md",
+    "examples/nextjs-quickstart/next-env.d.ts",
+    "examples/nextjs-quickstart/package.json",
+    "examples/nextjs-quickstart/src",
+    "examples/nextjs-quickstart/tsconfig.json",
+    "README.md",
+    "LICENSE",
+    "SECURITY.md",
+    "SUPPORT.md",
+    "PUBLIC-API.md",
+    "docs/reference/provider-adapters.md",
+    "docs/reference/protocol.md",
+    "CHANGELOG.md",
+    "docs/*.md",
+    "docs/reference"
+  ],
+  "bin": {
+    "vanillasky": "bin/vanillasky.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js",
+      "default": "./dist/server.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "default": "./dist/react.js"
+    },
+    "./templates": {
+      "types": "./dist/templates.d.ts",
+      "import": "./dist/templates.js",
+      "default": "./dist/templates.js"
+    },
+    "./templates/catalog": {
+      "types": "./dist/template-catalog.d.ts",
+      "import": "./dist/template-catalog.js",
+      "default": "./dist/template-catalog.js"
+    },
+    "./test": {
+      "types": "./dist/test.d.ts",
+      "import": "./dist/test.js",
+      "default": "./dist/test.js"
+    }
+  },
+  "scripts": {
+    "acceptance:live": "tsx scripts/acceptance/run-live.ts",
+    "acceptance:review": "tsx scripts/acceptance/review.ts",
+    "acceptance:replay": "tsx scripts/acceptance/run-replay.ts",
+    "browser:install": "playwright install chromium firefox webkit",
+    "browser:test": "playwright test",
+    "build": "tsup",
+    "example:install": "npm run examples:install-current",
+    "example:build": "npm run build --prefix examples/react-vite",
+    "example:dev": "npm run dev --prefix examples/react-vite",
+    "example:preview": "npm run preview --prefix examples/react-vite -- --host 127.0.0.1 --port 4187 --strictPort",
+    "examples:verify-documented": "node scripts/verify-documented-examples.mjs",
+    "examples:install-current": "npm run build && node scripts/install-current-examples.mjs",
+    "server-examples:typecheck": "npm run typecheck --prefix examples/server-integrations",
+    "server-examples:compat": "npm run ai-sdk:compat --prefix examples/server-integrations",
+    "lint": "eslint .",
+    "catalog:sync": "tsx scripts/generate-builtin-catalog.ts",
+    "catalog:check": "tsx scripts/generate-builtin-catalog.ts --check",
+    "registry:sync": "npm run catalog:sync && node scripts/sync-template-registry.mjs",
+    "registry:check": "node scripts/sync-template-registry.mjs --check && npm run catalog:check",
+    "template:check": "tsx scripts/template-check.ts",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepack": "npm run build",
+    "verify:onboarding": "node scripts/verify-onboarding.mjs",
+    "verify:nextjs": "node scripts/verify-nextjs-onboarding.mjs",
+    "verify:published": "node scripts/verify-published-package.mjs",
+    "verify:package-size": "tsx scripts/verify-package-size.ts",
+    "verify:api": "npm run build && node scripts/verify-public-api-surface.mjs",
+    "verify:package": "npm run build && node scripts/verify-packed-package.mjs",
+    "release:dry-run": "node scripts/release-dry-run.mjs",
+    "release:preflight": "node scripts/release-preflight.mjs",
+    "release:check": "npm run verify:api && npm run release:dry-run"
+  },
+  "peerDependencies": {
+    "react": ">=18 <20",
+    "react-dom": ">=18 <20",
+    "tsx": ">=4.19 <5"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "tsx": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@anthropic-ai/sdk": "^0.116.0",
+    "@eslint/js": "^9.39.1",
+    "@playwright/test": "1.62.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.10.1",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "eslint": "^9.39.1",
+    "es-module-lexer": "^1.7.0",
+    "globals": "^16.5.0",
+    "jsdom": "^26.1.0",
+    "openai": "^7.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.48.1",
+    "tsx": "^4.23.12",
+    "vitest": "^3.2.4"
+  },
+  "overrides": {
+    "esbuild": "^0.28.2"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "packageManager": "npm@11.17.0",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}

package/registry/items/backgrounds.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "backgrounds",
+  "type": "registry:lib",
+  "title": "Backgrounds",
+  "description": "Paint deterministic brand backdrops and keep their visual layer moving.",
+  "dependencies": [
+    "react"
+  ],
+  "registryDependencies": [
+    "@vanillasky/motion",
+    "@vanillasky/theme"
+  ],
+  "files": [
+    {
+      "path": "src/visual-system/backgrounds/index.ts",
+      "type": "registry:lib",
+      "target": "vanillasky/backgrounds/index.ts",
+      "content": "/** Brand-safe scene backgrounds and continuous background motion. */\nexport {\n  TOP_TEXT_AREA_RATIO,\n  gradientBackground,\n  BrandGradientOverlay,\n} from \"../scene-templates/color-utils\";\nexport * from \"../scene-templates/background-effect\";\n"
+    },
+    {
+      "path": "src/visual-system/scene-templates/background-effect.ts",
+      "type": "registry:lib",
+      "target": "vanillasky/scene-templates/background-effect.ts",
+      "content": "/**\n * Background motion effects for templates.\n *\n * Applied to the background layer (media, gradient) throughout the entire scene.\n * Continuous motion — not tied to text timing.\n *\n * Templates with usesGlobalBackgroundEffect: true consume the video-level default.\n *\n * 9 effects, each with a distinct mood:\n * - static:        No motion — intentional stillness\n * - slow-zoom-in:  Draw attention inward, build focus\n * - slow-zoom-out: Reveal, establish, pull back\n * - ken-burns:     Classic cinematic photo motion (zoom + pan, direction alternates per scene)\n * - drift:         Gentle lateral pan (direction alternates per scene)\n * - pulse:         Beat-synced energy\n * - breathe:       Ambient dreamy float\n * - slow-tilt:     Tension, Dutch angle drift\n * - camera-shake:  Intensity, handheld drama\n */\n\nimport { interpolate } from \"../motion\";\n\nexport interface BackgroundTransform {\n  transform: string;\n  transformOrigin: string;\n}\n\nexport const BACKGROUND_EFFECTS = [\n  \"static\",\n  \"slow-zoom-in\",\n  \"slow-zoom-out\",\n  \"ken-burns\",\n  \"drift\",\n  \"pulse\",\n  \"breathe\",\n  \"slow-tilt\",\n  \"camera-shake\",\n] as const;\n\n// ─── Directional variant helpers ────────────────────────────────\n// Ken Burns and Drift have internal direction variants that alternate\n// by scene index to create visual variety across a video.\n\ntype Direction = \"right\" | \"left\" | \"up\" | \"down\";\nconst DIRECTIONS: Direction[] = [\"right\", \"left\", \"up\", \"down\"];\n\nfunction getKenBurnsTransform(progress: number, direction: Direction): BackgroundTransform {\n  const scale = interpolate(progress, [0, 1], [1.05, 1.15]);\n  const mainAxis = direction === \"right\" || direction === \"left\";\n  const sign = direction === \"right\" || direction === \"down\" ? 1 : -1;\n  const primary = interpolate(progress, [0, 1], [-2 * sign, 2 * sign]);\n  const secondary = interpolate(progress, [0, 1], [-0.5, 0.5]);\n\n  const x = mainAxis ? primary : secondary;\n  const y = mainAxis ? secondary : primary;\n\n  return {\n    transform: `scale(${scale}) translate(${x}%, ${y}%)`,\n    transformOrigin: \"center\",\n  };\n}\n\nfunction getDriftTransform(progress: number, direction: Direction): BackgroundTransform {\n  const horizontal = direction === \"right\" || direction === \"left\";\n  const sign = direction === \"right\" || direction === \"down\" ? 1 : -1;\n  const offset = interpolate(progress, [0, 1], [-2 * sign, 2 * sign]);\n\n  return {\n    transform: horizontal\n      ? `scale(1.1) translateX(${offset}%)`\n      : `scale(1.1) translateY(${offset}%)`,\n    transformOrigin: \"center\",\n  };\n}\n\n// ─── Public API ─────────────────────────────────────────────────\n\n/**\n * Get background transform for the current progress.\n *\n * @param effect — background effect name\n * @param progress — scene progress 0→1\n * @param beatIntensity — 0→1 for beat-reactive effects\n * @param sceneIndex — used to alternate direction for ken-burns/drift\n */\nexport function getBackgroundTransform(\n  effect: string | undefined,\n  progress: number,\n  beatIntensity = 0,\n  sceneIndex = 0,\n): BackgroundTransform {\n  const dir = DIRECTIONS[sceneIndex % DIRECTIONS.length];\n\n  // Undefined falls through to slow-zoom-in. Previously the missing\n  // case landed in the `default:` branch alongside `\"static\"`, returning\n  // `transform: \"none\"` — so every video where the AI didn't set\n  // backgroundEffect (i.e. nearly all of them) rendered with zero\n  // motion while the editor UI displayed \"Slow zoom in\" as default.\n  // Now renderer and UI agree: `undefined` means motion, `\"static\"`\n  // is the explicit opt-out. Slow zoom in (scale 1.00 → 1.12, no\n  // translate) is the safest default for 2-4 s scenes — visible\n  // enough to register, gentle enough not to pull focus from text.\n  // Ken Burns adds translate that's too fast on short clips; reserve\n  // for longer photo scenes via an explicit opt-in.\n  const resolved = effect ?? \"slow-zoom-in\";\n\n  switch (resolved) {\n    case \"slow-zoom-in\":\n      return {\n        transform: `scale(${interpolate(progress, [0, 1], [1, 1.12])})`,\n        transformOrigin: \"center\",\n      };\n\n    case \"slow-zoom-out\":\n      return {\n        transform: `scale(${interpolate(progress, [0, 1], [1.12, 1])})`,\n        transformOrigin: \"center\",\n      };\n\n    case \"ken-burns\":\n      return getKenBurnsTransform(progress, dir);\n\n    case \"drift\":\n      return getDriftTransform(progress, dir);\n\n    case \"pulse\": {\n      // Subtle scale pulse synced to beat\n      const base = 1 + beatIntensity * 0.04;\n      const breathe = 1 + Math.sin(progress * Math.PI * 2) * 0.02;\n      return {\n        transform: `scale(${base * breathe})`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"breathe\": {\n      // Slow ambient float — gentle scale + vertical drift, not beat-synced\n      const s = 1 + Math.sin(progress * Math.PI) * 0.03;\n      const y = Math.sin(progress * Math.PI) * 0.5;\n      return {\n        transform: `scale(${s}) translateY(${y}%)`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"slow-tilt\": {\n      // Subtle Dutch angle drift\n      const angle = interpolate(progress, [0, 1], [0, 2.5]);\n      return {\n        transform: `scale(1.08) rotate(${angle}deg)`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"camera-shake\": {\n      // Rapid small offsets for handheld/dramatic feel\n      // Deterministic noise based on progress for reproducibility\n      const t = progress * 40;\n      const sx = Math.sin(t * 2.3) * 0.4 + Math.sin(t * 5.7) * 0.2;\n      const sy = Math.cos(t * 3.1) * 0.3 + Math.cos(t * 4.9) * 0.15;\n      const sr = Math.sin(t * 1.7) * 0.3;\n      return {\n        transform: `scale(1.05) translate(${sx}%, ${sy}%) rotate(${sr}deg)`,\n        transformOrigin: \"center\",\n      };\n    }\n\n    case \"static\":\n    default:\n      return {\n        transform: \"none\",\n        transformOrigin: \"center\",\n      };\n  }\n}\n"
+    },
+    {
+      "path": "src/visual-system/scene-templates/color-utils.ts",
+      "type": "registry:lib",
+      "target": "vanillasky/scene-templates/color-utils.ts",
+      "content": "/**\n * Color utilities for scene templates.\n *\n * Provides safe color manipulation that works with hex colors\n * and graceful fallbacks for non-hex inputs.\n */\nimport React from \"react\";\nimport { resolveTokens, darken, orderDarkToLight, type BackgroundFamily } from \"../theme\";\n\n// ─── Layout constants ───────────────────────────────────────\n//\n// Shared vertical layout for templates that place a TextOverlay at the top of\n// the scene (showcase-*, chart-*, infographic-*). Using a single constant\n// guarantees the headline sits in the same place across every template, so\n// scene-to-scene cuts don't visually jump.\n//\n// TextOverlay vertically centers itself inside its container, so the visual\n// midline of the headline = TOP_TEXT_AREA_RATIO / 2 of the scene height.\nexport const TOP_TEXT_AREA_RATIO = 0.32;\n\n/**\n * Gradient background — clean 2-color linear gradient with a subtle\n * animated breathing overlay. Matches the look of a plain CSS\n * `linear-gradient(90deg, colorA, colorB)` so palette chips preview\n * exactly what templates render.\n *\n * The animation is deliberately minimal: two low-opacity radial blobs\n * of the same two colors drift slowly, adding just enough motion for\n * video without introducing a third \"midtone\" color that muddies\n * the gradient (a common source of unwanted purple/brown tints).\n */\nexport function gradientBackground({\n  colorA,\n  colorB,\n  solidBg,\n  progress,\n  sceneDuration,\n  seed,\n  family,\n}: {\n  colorA: string;\n  colorB: string;\n  /**\n   * When set, the function returns this color as a solid background\n   * (no gradient, no animated radial overlays). Used when the user has\n   * a scraped brand whose darkest color reads as a real surface — the\n   * accent stays on text/CTAs, but the bg goes flat instead of pairing\n   * with an unrelated brand color and producing a noisy gradient.\n   */\n  solidBg?: string;\n  progress: number;\n  sceneDuration?: number;\n  seed: number;\n  /**\n   * Background family from the style preset. Omitted = \"mesh\", the original\n   * look — so existing configs are untouched. All families are pure CSS\n   * background strings (no `filter`, which the SVG export can't rasterize)\n   * and stay deterministic in `progress`.\n   */\n  family?: BackgroundFamily;\n}): string {\n  if (solidBg) return solidBg;\n  // Every scene owns its foreground motion clock, but consecutive scenes that\n  // use the same brand backdrop must not visibly reset that backdrop. Run one\n  // eased closed loop per scene: the gradient has zero velocity and the exact\n  // same pixels at progress 0 and 1, regardless of scene duration or content\n  // seed. Seeded variation is strongest mid-scene and converges to zero at\n  // both handoff edges.\n  const normalizedProgress = Math.max(0, Math.min(1, progress));\n  const atBoundary = normalizedProgress === 0 || normalizedProgress === 1;\n  const easedLoop = normalizedProgress * normalizedProgress * (3 - 2 * normalizedProgress);\n  const seedEnvelope = atBoundary ? 0 : Math.sin(normalizedProgress * Math.PI) ** 2;\n  void sceneDuration;\n\n  const seededRandom = (s: number): number => {\n    const x = Math.sin(s * 12.9898 + s * 78.233) * 43758.5453;\n    return x - Math.floor(x);\n  };\n  const phase = seededRandom(seed) * Math.PI * 2 * seedEnvelope;\n  const t = (atBoundary ? 0 : easedLoop * Math.PI * 2) + phase;\n\n  // Darker of the two colors anchors the top of the frame so text and logos\n  // sit over the stronger value. 180deg = top→bottom.\n  const [topColor, bottomColor] = orderDarkToLight(colorA, colorB);\n\n  if (family === \"wash\") {\n    // No radials: one calm vertical ramp that drifts a few percent over the\n    // scene. Reads considered rather than energetic.\n    const shift = Math.sin(t) * 6;\n    return `linear-gradient(${175 + shift}deg, ${topColor} 0%, ${bottomColor} 100%)`;\n  }\n\n  if (family === \"spotlight\") {\n    // A single hard pool of accent high in the frame over a near-black\n    // surround — high contrast, very little colour area.\n    const x = 50 + Math.sin(t) * 8;\n    const y = 28 + Math.cos(t + 1) * 5;\n    return `\n      radial-gradient(ellipse 70% 55% at ${x}% ${y}%, ${colorA}66 0%, ${colorA}1a 45%, transparent 72%),\n      linear-gradient(180deg, ${darken(topColor, 0.55)} 0%, ${darken(bottomColor, 0.7)} 100%)\n    `;\n  }\n\n  const x1 = 25 + Math.sin(t) * 25;\n  const y1 = 30 + Math.cos(t + 1.0) * 25;\n  const x2 = 75 + Math.sin(t + 2.0) * 25;\n  const y2 = 70 + Math.cos(t + 3.5) * 25;\n\n  return `\n    radial-gradient(ellipse 60% 60% at ${x1}% ${y1}%, ${colorA}4d 0%, transparent 65%),\n    radial-gradient(ellipse 60% 60% at ${x2}% ${y2}%, ${colorB}4d 0%, transparent 65%),\n    linear-gradient(180deg, ${topColor} 0%, ${bottomColor} 100%)\n  `;\n}\n\n/**\n * Animated brand-background overlay. Foreground semantic colours never alter\n * this visual background.\n */\nexport const BrandGradientOverlay: React.FC<{\n  style: Parameters<typeof resolveTokens>[0];\n  progress: number;\n  sceneDuration?: number;\n  seed: number;\n}> = ({ style: globalStyle, progress, sceneDuration, seed }) => {\n  const tokens = resolveTokens(globalStyle);\n  const [first, second] = tokens.background.type === \"gradient\"\n    ? tokens.background.colors\n    : [tokens.background.color, tokens.background.color];\n  const solidBg = tokens.background.type === \"solid\" ? tokens.background.color : undefined;\n\n  return React.createElement(\"div\", {\n    style: {\n      position: \"absolute\" as const,\n      inset: 0,\n      background: gradientBackground({ colorA: first, colorB: second, solidBg, progress, sceneDuration, seed, family: tokens.preset.background }),\n      pointerEvents: \"none\" as const,\n    },\n  });\n};\n"
+    }
+  ],
+  "meta": {
+    "vanillasky": {
+      "layer": "lib",
+      "tier": "free",
+      "domain": "appearance",
+      "level": "composed",
+      "audiences": [
+        "custom-scenes",
+        "react-developers"
+      ],
+      "dependencies": [
+        "theme",
+        "motion"
+      ],
+      "useWhen": "Use gradientBackground to paint the scene layer and getBackgroundTransform to add deterministic camera movement across the full scene duration.",
+      "avoidWhen": "Do not apply these transforms to text or interactive chrome, and do not use CSS filter effects in the export path."
+    }
+  }
+}