@vibecuting/video-project-core 0.1.29 → 0.1.31

package/src/core/scene/2dscene/{default-2d-scene-Horizontal.stories.tsx → default-2d-scene/default-2d-scene-Horizontal.stories.tsx}

@@ -1,7 +1,7 @@
 import { Default2DSceneHorizontal } from './default-2d-scene-Horizontal'
 
 const meta = {
-  title: 'core/scene/2dscene/Default2DSceneHorizontal',
+  title: 'core/scene/2dscene/default-2d-scene/Default2DSceneHorizontal',
   component: Default2DSceneHorizontal,
   args: {
     title: '2D Scene',

package/src/core/scene/2dscene/{default-2d-scene-Horizontal.tsx → default-2d-scene/default-2d-scene-Horizontal.tsx}

@@ -8,7 +8,7 @@ export const componentMetadata: ScenePluginMetadata = {
   ...baseComponentMetadata,
   name: 'Default2DSceneHorizontal',
   description: "Default remotion 2D scene (Portrait 9:16 variant)",
-  sourceFile: 'src/core/scene/2dscene/default-2d-scene-Horizontal.tsx',
+  sourceFile: 'src/core/scene/2dscene/default-2d-scene/default-2d-scene-Horizontal.tsx',
   aspectRatio: '9:16',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
 }

package/src/core/scene/2dscene/{default-2d-scene-Landscape.tsx → default-2d-scene/default-2d-scene-Landscape.tsx}

@@ -8,7 +8,7 @@ export const componentMetadata: ScenePluginMetadata = {
   ...baseComponentMetadata,
   name: 'Default2DSceneLandscape',
   description: "Default remotion 2D scene (Landscape 16:9 variant)",
-  sourceFile: 'src/core/scene/2dscene/default-2d-scene-Landscape.tsx',
+  sourceFile: 'src/core/scene/2dscene/default-2d-scene/default-2d-scene-Landscape.tsx',
   aspectRatio: '16:9',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
 }

package/src/core/scene/2dscene/{default-2d-scene.stories.tsx → default-2d-scene/default-2d-scene.stories.tsx}

@@ -1,7 +1,7 @@
 import { Default2DSceneLandscape } from './default-2d-scene-Landscape'
 
 const meta = {
-  title: 'core/scene/2dscene/Default2DSceneLandscape',
+  title: 'core/scene/2dscene/default-2d-scene/Default2DSceneLandscape',
   component: Default2DSceneLandscape,
   args: {
     title: '2D Scene',

package/src/core/scene/2dscene/{default-2d-scene.tsx → default-2d-scene/default-2d-scene.tsx}

@@ -3,9 +3,9 @@ import { z } from 'zod'
 
 import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
 
-import { defineSceneComponent } from '../../../plugins/scene-component'
-import { SceneMotionStack, useRemotionSceneRuntime } from '../../../base'
-import { useSceneRootProps } from '../../../runtime/use-scene-root-props'
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionStack, useRemotionSceneRuntime } from '../../../../base'
+import { useSceneRootProps } from '../../../../runtime/use-scene-root-props'
 
 export interface Default2DSceneProps {
   sceneId?: string
@@ -18,7 +18,7 @@ export const componentMetadata = defineScenePluginMetadata({
   resourceKind: 'scene',
   name: 'Default2DScene',
   description: 'Default remotion 2D scene',
-  sourceFile: 'src/core/scene/2dscene/default-2d-scene.tsx',
+  sourceFile: 'src/core/scene/2dscene/default-2d-scene/default-2d-scene.tsx',
   pluginKey: 'core.canvas-2d',
   tags: ['scene', '2d'],
   aspectRatio: '16:9',

package/src/core/scene/2dscene/index.ts

@@ -1,3 +1,3 @@
-export { Default2DScene } from './default-2d-scene'
-export { Default2DSceneLandscape, componentMetadata as Default2DSceneLandscapeMetadata } from './default-2d-scene-Landscape'
-export { Default2DSceneHorizontal, componentMetadata as Default2DSceneHorizontalMetadata } from './default-2d-scene-Horizontal'
+export { Default2DScene } from './default-2d-scene/default-2d-scene'
+export { Default2DSceneLandscape, componentMetadata as Default2DSceneLandscapeMetadata } from './default-2d-scene/default-2d-scene-Landscape'
+export { Default2DSceneHorizontal, componentMetadata as Default2DSceneHorizontalMetadata } from './default-2d-scene/default-2d-scene-Horizontal'

package/src/core/scene/3dscene/{default-3d-scene-Horizontal.stories.tsx → default-3d-scene/default-3d-scene-Horizontal.stories.tsx}

@@ -1,7 +1,7 @@
 import { Default3DSceneHorizontal } from './default-3d-scene-Horizontal'
 
 const meta = {
-  title: 'core/scene/3dscene/Default3DSceneHorizontal',
+  title: 'core/scene/3dscene/default-3d-scene/Default3DSceneHorizontal',
   component: Default3DSceneHorizontal,
   args: {
     title: '3D Scene',

package/src/core/scene/3dscene/{default-3d-scene-Horizontal.tsx → default-3d-scene/default-3d-scene-Horizontal.tsx}

@@ -8,7 +8,7 @@ export const componentMetadata: ScenePluginMetadata = {
   ...baseComponentMetadata,
   name: 'Default3DSceneHorizontal',
   description: "Default remotion 3D scene (Portrait 9:16 variant)",
-  sourceFile: 'src/core/scene/3dscene/default-3d-scene-Horizontal.tsx',
+  sourceFile: 'src/core/scene/3dscene/default-3d-scene/default-3d-scene-Horizontal.tsx',
   aspectRatio: '9:16',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
 }

package/src/core/scene/3dscene/{default-3d-scene-Landscape.tsx → default-3d-scene/default-3d-scene-Landscape.tsx}

@@ -8,7 +8,7 @@ export const componentMetadata: ScenePluginMetadata = {
   ...baseComponentMetadata,
   name: 'Default3DSceneLandscape',
   description: "Default remotion 3D scene (Landscape 16:9 variant)",
-  sourceFile: 'src/core/scene/3dscene/default-3d-scene-Landscape.tsx',
+  sourceFile: 'src/core/scene/3dscene/default-3d-scene/default-3d-scene-Landscape.tsx',
   aspectRatio: '16:9',
   tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
 }

package/src/core/scene/3dscene/{default-3d-scene.stories.tsx → default-3d-scene/default-3d-scene.stories.tsx}

@@ -1,7 +1,7 @@
 import { Default3DSceneLandscape } from './default-3d-scene-Landscape'
 
 const meta = {
-  title: 'core/scene/3dscene/Default3DSceneLandscape',
+  title: 'core/scene/3dscene/default-3d-scene/Default3DSceneLandscape',
   component: Default3DSceneLandscape,
   args: {
     title: '3D Scene',

package/src/core/scene/3dscene/{default-3d-scene.tsx → default-3d-scene/default-3d-scene.tsx}

@@ -3,9 +3,9 @@ import { z } from 'zod'
 
 import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
 
-import { defineSceneComponent } from '../../../plugins/scene-component'
-import { SceneMotionStack, useRemotionSceneRuntime } from '../../../base'
-import { useSceneRootProps } from '../../../runtime/use-scene-root-props'
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionStack, useRemotionSceneRuntime } from '../../../../base'
+import { useSceneRootProps } from '../../../../runtime/use-scene-root-props'
 
 export interface Default3DSceneProps {
   sceneId?: string
@@ -18,7 +18,7 @@ export const componentMetadata = defineScenePluginMetadata({
   resourceKind: 'scene',
   name: 'Default3DScene',
   description: 'Default remotion 3D scene',
-  sourceFile: 'src/core/scene/3dscene/default-3d-scene.tsx',
+  sourceFile: 'src/core/scene/3dscene/default-3d-scene/default-3d-scene.tsx',
   pluginKey: 'core.three-3d',
   tags: ['scene', '3d'],
   aspectRatio: '16:9',

package/src/core/scene/3dscene/index.ts

@@ -1,3 +1,3 @@
-export { Default3DScene } from './default-3d-scene'
-export { Default3DSceneLandscape, componentMetadata as Default3DSceneLandscapeMetadata } from './default-3d-scene-Landscape'
-export { Default3DSceneHorizontal, componentMetadata as Default3DSceneHorizontalMetadata } from './default-3d-scene-Horizontal'
+export { Default3DScene } from './default-3d-scene/default-3d-scene'
+export { Default3DSceneLandscape, componentMetadata as Default3DSceneLandscapeMetadata } from './default-3d-scene/default-3d-scene-Landscape'
+export { Default3DSceneHorizontal, componentMetadata as Default3DSceneHorizontalMetadata } from './default-3d-scene/default-3d-scene-Horizontal'

package/src/core/scene/html-in-canvas/browser/default-html-in-canvas-browser-scene-Horizontal.stories.tsx

@@ -0,0 +1,35 @@
+import { DefaultHtmlInCanvasBrowserSceneHorizontal } from '../shared/default-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/browser/DefaultHtmlInCanvasBrowserSceneHorizontal',
+  component: DefaultHtmlInCanvasBrowserSceneHorizontal,
+  args: {
+    title: 'Browser in Canvas',
+    subtitle: 'Render browser-style DOM directly into a Remotion frame with HtmlInCanvas.',
+    badge: 'Browser Canvas',
+    accent: '#2563eb',
+    secondaryAccent: '#020617',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/html-in-canvas/browser/default-html-in-canvas-browser-scene-Landscape.stories.tsx

@@ -0,0 +1,80 @@
+import { DefaultHtmlInCanvasBrowserSceneLandscape } from '../shared/default-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/browser/DefaultHtmlInCanvasBrowserSceneLandscape',
+  component: DefaultHtmlInCanvasBrowserSceneLandscape,
+  args: {
+    title: 'Browser in Canvas',
+    subtitle: 'Render browser-style DOM directly into a Remotion frame with HtmlInCanvas.',
+    badge: 'Browser Canvas',
+    accent: '#2563eb',
+    secondaryAccent: '#020617',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}
+
+export const Html = {
+  args: {
+    html: `
+      <div style="width:100%;height:100%;display:grid;grid-template-columns:1.1fr 0.9fr;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);color:#020617;font-family:Inter,ui-sans-serif,system-ui,sans-serif;">
+        <section style="display:grid;align-content:space-between;padding:clamp(24px,4vw,56px);gap:24px;background:linear-gradient(180deg,rgba(15,23,42,0.96),rgba(15,23,42,0.82));color:#f8fafc;">
+          <div style="display:grid;gap:18px;max-width:560px;">
+            <div style="display:inline-flex;align-items:center;gap:10px;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:#cbd5e1;">
+              <span style="width:10px;height:10px;border-radius:9999px;background:#38bdf8;box-shadow:0 0 0 6px rgba(56,189,248,.14)"></span>
+              Html In Canvas
+            </div>
+            <h1 style="margin:0;font-size:clamp(42px,6vw,84px);line-height:.92;letter-spacing:-.07em;">
+              Full Bleed HTML
+            </h1>
+            <p style="margin:0;font-size:clamp(16px,2vw,22px);line-height:1.65;color:#cbd5e1;">
+              The HTML fragment is allowed to occupy the entire canvas and can drive its own layout without extra padding from the scene wrapper.
+            </p>
+          </div>
+          <div style="display:flex;gap:12px;flex-wrap:wrap;">
+            <div style="padding:12px 16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);">Grid</div>
+            <div style="padding:12px 16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);">Flex</div>
+            <div style="padding:12px 16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);">Media</div>
+          </div>
+        </section>
+        <section style="display:grid;grid-template-rows:1fr 1fr;gap:16px;padding:clamp(20px,3vw,40px);">
+          <div style="background:linear-gradient(135deg,#2563eb 0%,#38bdf8 100%);border:1px solid rgba(15,23,42,.08);min-height:0;display:grid;place-items:center;color:#fff;font-size:clamp(18px,2.2vw,34px);font-weight:800;letter-spacing:-.04em;">
+            Layout A
+          </div>
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:0;">
+            <div style="background:#fff;border:1px solid rgba(15,23,42,.08);min-height:0;display:grid;place-items:center;font-size:clamp(16px,1.8vw,28px);font-weight:700;">
+              B1
+            </div>
+            <div style="background:#0f172a;color:#f8fafc;border:1px solid rgba(15,23,42,.08);min-height:0;display:grid;place-items:center;font-size:clamp(16px,1.8vw,28px);font-weight:700;">
+              B2
+            </div>
+          </div>
+        </section>
+      </div>
+    `,
+  },
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/html-in-canvas/dashboard/default-html-in-canvas-dashboard-scene-Horizontal.stories.tsx

@@ -0,0 +1,35 @@
+import { DefaultHtmlInCanvasDashboardSceneHorizontal } from '../shared/default-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/dashboard/DefaultHtmlInCanvasDashboardSceneHorizontal',
+  component: DefaultHtmlInCanvasDashboardSceneHorizontal,
+  args: {
+    title: 'Dashboard in Canvas',
+    subtitle: 'Compose dashboard UI in DOM, then capture it as a canvas frame.',
+    badge: 'Dashboard Canvas',
+    accent: '#8b5cf6',
+    secondaryAccent: '#020617',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/html-in-canvas/dashboard/default-html-in-canvas-dashboard-scene-Landscape.stories.tsx

@@ -0,0 +1,35 @@
+import { DefaultHtmlInCanvasDashboardSceneLandscape } from '../shared/default-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/dashboard/DefaultHtmlInCanvasDashboardSceneLandscape',
+  component: DefaultHtmlInCanvasDashboardSceneLandscape,
+  args: {
+    title: 'Dashboard in Canvas',
+    subtitle: 'Compose dashboard UI in DOM, then capture it as a canvas frame.',
+    badge: 'Dashboard Canvas',
+    accent: '#8b5cf6',
+    secondaryAccent: '#020617',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/html-in-canvas/dashboard-shell/default-dashboard-shell-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,40 @@
+import {
+  DefaultHtmlInCanvasDashboardShellSceneLandscape,
+  dashboardShellHtml,
+} from './default-dashboard-shell-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/dashboard-shell/DefaultHtmlInCanvasDashboardShellSceneLandscape',
+  component: DefaultHtmlInCanvasDashboardShellSceneLandscape,
+  args: {
+    html: dashboardShellHtml,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}
+
+export const Vertical = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/html-in-canvas/dashboard-shell/default-dashboard-shell-html-in-canvas-scene.tsx

@@ -0,0 +1,44 @@
+import { createHtmlInCanvasScene } from '../shared/default-html-in-canvas-scene'
+
+const dashboardShellLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasDashboardShellSceneLandscape',
+  description: 'Dashboard shell HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/dashboard-shell/default-dashboard-shell-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.dashboard-shell',
+  aspectRatio: '16:9',
+  template: 'dashboard',
+})
+
+const dashboardShellHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasDashboardShellSceneHorizontal',
+  description: 'Dashboard shell HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/dashboard-shell/default-dashboard-shell-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.dashboard-shell',
+  aspectRatio: '9:16',
+  template: 'dashboard',
+})
+
+export const DefaultHtmlInCanvasDashboardShellSceneLandscape = dashboardShellLandscape.Scene
+export const DefaultHtmlInCanvasDashboardShellSceneHorizontal = dashboardShellHorizontal.Scene
+export const DefaultHtmlInCanvasDashboardShellSceneLandscapeMetadata = dashboardShellLandscape.componentMetadata
+export const DefaultHtmlInCanvasDashboardShellSceneHorizontalMetadata = dashboardShellHorizontal.componentMetadata
+
+export const dashboardShellHtml = String.raw`
+  <div style="width:100%;height:100%;display:grid;grid-template-rows:auto 1fr;background:#020617;color:#f8fafc;overflow:hidden;">
+    <header style="display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(15,23,42,.95);">
+      <div>Dashboard Shell</div>
+      <div style="display:flex;gap:10px;"><span>Search</span><span>Profile</span></div>
+    </header>
+    <main style="display:grid;grid-template-columns:minmax(240px,.28fr) minmax(0,1fr);min-height:0;">
+      <aside style="padding:24px;border-right:1px solid rgba(255,255,255,.08);background:rgba(2,6,23,.88);display:grid;gap:14px;">
+        <div>Navigation</div>
+        <div>Projects</div>
+        <div>Reports</div>
+      </aside>
+      <section style="padding:24px;display:grid;grid-template-rows:auto 1fr;gap:16px;">
+        <div style="padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);">Header block</div>
+        <div style="padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);display:grid;place-items:center;">Main dashboard content</div>
+      </section>
+    </main>
+  </div>
+`

package/src/core/scene/html-in-canvas/dashboard-shell/index.ts

@@ -0,0 +1,8 @@
+export {
+  DefaultHtmlInCanvasDashboardShellSceneLandscape,
+  DefaultHtmlInCanvasDashboardShellSceneHorizontal,
+  DefaultHtmlInCanvasDashboardShellSceneLandscapeMetadata,
+  DefaultHtmlInCanvasDashboardShellSceneHorizontalMetadata,
+  dashboardShellHtml,
+} from './default-dashboard-shell-html-in-canvas-scene'
+

package/src/core/scene/html-in-canvas/docs/default-html-in-canvas-docs-scene-Horizontal.stories.tsx

@@ -0,0 +1,35 @@
+import { DefaultHtmlInCanvasDocsSceneHorizontal } from '../shared/default-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/docs/DefaultHtmlInCanvasDocsSceneHorizontal',
+  component: DefaultHtmlInCanvasDocsSceneHorizontal,
+  args: {
+    title: 'Canvas Handbook',
+    subtitle: 'A docs-style HtmlInCanvas scene with outline, callouts and progress.',
+    badge: 'Docs Canvas',
+    accent: '#38bdf8',
+    secondaryAccent: '#020617',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/html-in-canvas/docs/default-html-in-canvas-docs-scene-Landscape.stories.tsx

@@ -0,0 +1,35 @@
+import { DefaultHtmlInCanvasDocsSceneLandscape } from '../shared/default-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/docs/DefaultHtmlInCanvasDocsSceneLandscape',
+  component: DefaultHtmlInCanvasDocsSceneLandscape,
+  args: {
+    title: 'Canvas Handbook',
+    subtitle: 'A docs-style HtmlInCanvas scene with outline, callouts and progress.',
+    badge: 'Docs Canvas',
+    accent: '#38bdf8',
+    secondaryAccent: '#020617',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/html-in-canvas/document/article/default-article-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultHtmlInCanvasArticleSceneLandscape, articleHtml } from './default-article-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/document/article/DefaultHtmlInCanvasArticleSceneLandscape',
+  component: DefaultHtmlInCanvasArticleSceneLandscape,
+  args: {
+    html: articleHtml,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}
+
+export const Vertical = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+

package/src/core/scene/html-in-canvas/document/article/default-article-html-in-canvas-scene.tsx

@@ -0,0 +1,50 @@
+import { createHtmlInCanvasScene } from '../../shared/default-html-in-canvas-scene'
+
+const articleLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasArticleSceneLandscape',
+  description: 'Article-style HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/document/article/default-article-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.document.article',
+  aspectRatio: '16:9',
+  template: 'docs',
+})
+
+const articleHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasArticleSceneHorizontal',
+  description: 'Article-style HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/document/article/default-article-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.document.article',
+  aspectRatio: '9:16',
+  template: 'docs',
+})
+
+export const DefaultHtmlInCanvasArticleSceneLandscape = articleLandscape.Scene
+export const DefaultHtmlInCanvasArticleSceneHorizontal = articleHorizontal.Scene
+export const DefaultHtmlInCanvasArticleSceneLandscapeMetadata = articleLandscape.componentMetadata
+export const DefaultHtmlInCanvasArticleSceneHorizontalMetadata = articleHorizontal.componentMetadata
+
+export const articleHtml = String.raw`
+  <article style="width:100%;height:100%;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);gap:0;background:#020617;color:#f8fafc;overflow:hidden;">
+    <section style="display:grid;align-content:start;padding:clamp(28px,4vw,72px);gap:22px;background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(15,23,42,.82));">
+      <div style="display:inline-flex;align-items:center;gap:10px;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:#cbd5e1;">
+        <span style="width:10px;height:10px;border-radius:9999px;background:#38bdf8;"></span>
+        Article
+      </div>
+      <h1 style="margin:0;max-width:12ch;font-size:clamp(44px,6vw,88px);line-height:.92;letter-spacing:-.07em;">A readable article layout</h1>
+      <p style="margin:0;max-width:720px;font-size:clamp(16px,2vw,22px);line-height:1.7;color:#cbd5e1;">
+        This variant prioritizes paragraphs, subheads, and callouts with a strong editorial column rhythm.
+      </p>
+      <div style="display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;">
+        <div style="padding:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);">Lead</div>
+        <div style="padding:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);">Body</div>
+        <div style="padding:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);">Quote</div>
+        <div style="padding:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);">Notes</div>
+      </div>
+    </section>
+    <aside style="display:grid;gap:16px;padding:clamp(20px,3vw,40px);background:#0f172a;">
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(2,6,23,.82);">Summary</div>
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(2,6,23,.82);">Sources</div>
+      <div style="padding:18px;border:1px solid rgba(255,255,255,.1);background:rgba(2,6,23,.82);">Footnotes</div>
+    </aside>
+  </article>
+`

package/src/core/scene/html-in-canvas/document/article/index.ts

@@ -0,0 +1,8 @@
+export {
+  DefaultHtmlInCanvasArticleSceneLandscape,
+  DefaultHtmlInCanvasArticleSceneHorizontal,
+  DefaultHtmlInCanvasArticleSceneLandscapeMetadata,
+  DefaultHtmlInCanvasArticleSceneHorizontalMetadata,
+  articleHtml,
+} from './default-article-html-in-canvas-scene'
+

package/src/core/scene/html-in-canvas/document/default-document-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,40 @@
+import {
+  DefaultHtmlInCanvasDocumentSceneLandscape,
+  documentHtml,
+} from './default-document-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/document/DefaultHtmlInCanvasDocumentSceneLandscape',
+  component: DefaultHtmlInCanvasDocumentSceneLandscape,
+  args: {
+    html: documentHtml,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}
+
+export const Vertical = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}