@vibecuting/video-project-core 0.1.29 → 0.1.31

package/src/core/scene/html-in-canvas/landing-page/hero/default-hero-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultHtmlInCanvasHeroSceneLandscape, heroHtml } from './default-hero-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/landing-page/hero/DefaultHtmlInCanvasHeroSceneLandscape',
+  component: DefaultHtmlInCanvasHeroSceneLandscape,
+  args: {
+    html: heroHtml,
+  },
+}
+
+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/landing-page/hero/default-hero-html-in-canvas-scene.tsx

@@ -0,0 +1,46 @@
+import { createHtmlInCanvasScene } from '../../shared/default-html-in-canvas-scene'
+
+const heroLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasHeroSceneLandscape',
+  description: 'Hero landing HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/landing-page/hero/default-hero-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.landing-page.hero',
+  aspectRatio: '16:9',
+  template: 'browser',
+})
+
+const heroHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasHeroSceneHorizontal',
+  description: 'Hero landing HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/landing-page/hero/default-hero-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.landing-page.hero',
+  aspectRatio: '9:16',
+  template: 'browser',
+})
+
+export const DefaultHtmlInCanvasHeroSceneLandscape = heroLandscape.Scene
+export const DefaultHtmlInCanvasHeroSceneHorizontal = heroHorizontal.Scene
+export const DefaultHtmlInCanvasHeroSceneLandscapeMetadata = heroLandscape.componentMetadata
+export const DefaultHtmlInCanvasHeroSceneHorizontalMetadata = heroHorizontal.componentMetadata
+
+export const heroHtml = String.raw`
+  <main style="width:100%;height:100%;display:grid;grid-template-columns:1.05fr .95fr;background:linear-gradient(135deg,#0f172a 0%,#111827 55%,#1d4ed8 100%);color:#f8fafc;overflow:hidden;">
+    <section style="display:grid;align-content:center;padding:clamp(24px,4vw,72px);gap:22px;max-width:1000px;">
+      <div style="display:inline-flex;align-items:center;gap:10px;letter-spacing:.24em;text-transform:uppercase;font-size:11px;color:#bfdbfe;">
+        <span style="width:10px;height:10px;border-radius:9999px;background:#60a5fa;"></span>
+        Hero
+      </div>
+      <h1 style="margin:0;font-size:clamp(46px,7vw,98px);line-height:.9;letter-spacing:-.08em;">A landing page hero that fills the frame</h1>
+      <p style="margin:0;max-width:680px;font-size:clamp(16px,2vw,22px);line-height:1.7;color:#dbeafe;">
+        The hero layout gives the most space to headline and primary action, while supporting media stays fully visible.
+      </p>
+      <div style="display:flex;gap:12px;flex-wrap:wrap;">
+        <button style="padding:14px 18px;border:1px solid rgba(255,255,255,.14);background:#f8fafc;color:#020617;">Get started</button>
+        <button style="padding:14px 18px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#f8fafc;">Watch demo</button>
+      </div>
+    </section>
+    <section style="display:grid;place-items:center;padding:clamp(20px,3vw,48px);">
+      <div style="width:min(100%,520px);aspect-ratio:1;border:1px solid rgba(255,255,255,.14);background:rgba(2,6,23,.38);display:grid;place-items:center;">Hero media</div>
+    </section>
+  </main>
+`

package/src/core/scene/html-in-canvas/landing-page/hero/index.ts

@@ -0,0 +1,8 @@
+export {
+  DefaultHtmlInCanvasHeroSceneLandscape,
+  DefaultHtmlInCanvasHeroSceneHorizontal,
+  DefaultHtmlInCanvasHeroSceneLandscapeMetadata,
+  DefaultHtmlInCanvasHeroSceneHorizontalMetadata,
+  heroHtml,
+} from './default-hero-html-in-canvas-scene'
+

package/src/core/scene/html-in-canvas/landing-page/index.ts

@@ -0,0 +1,31 @@
+export {
+  DefaultHtmlInCanvasLandingPageSceneLandscape,
+  DefaultHtmlInCanvasLandingPageSceneHorizontal,
+  DefaultHtmlInCanvasLandingPageSceneLandscapeMetadata,
+  DefaultHtmlInCanvasLandingPageSceneHorizontalMetadata,
+  landingPageHtml,
+} from './default-landing-page-html-in-canvas-scene'
+
+export {
+  DefaultHtmlInCanvasHeroSceneLandscape,
+  DefaultHtmlInCanvasHeroSceneHorizontal,
+  DefaultHtmlInCanvasHeroSceneLandscapeMetadata,
+  DefaultHtmlInCanvasHeroSceneHorizontalMetadata,
+  heroHtml,
+} from './hero'
+
+export {
+  DefaultHtmlInCanvasPricingSceneLandscape,
+  DefaultHtmlInCanvasPricingSceneHorizontal,
+  DefaultHtmlInCanvasPricingSceneLandscapeMetadata,
+  DefaultHtmlInCanvasPricingSceneHorizontalMetadata,
+  pricingHtml,
+} from './pricing'
+
+export {
+  DefaultHtmlInCanvasFeatureGridSceneLandscape,
+  DefaultHtmlInCanvasFeatureGridSceneHorizontal,
+  DefaultHtmlInCanvasFeatureGridSceneLandscapeMetadata,
+  DefaultHtmlInCanvasFeatureGridSceneHorizontalMetadata,
+  featureGridHtml,
+} from './feature-grid'

package/src/core/scene/html-in-canvas/landing-page/pricing/default-pricing-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultHtmlInCanvasPricingSceneLandscape, pricingHtml } from './default-pricing-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/landing-page/pricing/DefaultHtmlInCanvasPricingSceneLandscape',
+  component: DefaultHtmlInCanvasPricingSceneLandscape,
+  args: {
+    html: pricingHtml,
+  },
+}
+
+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/landing-page/pricing/default-pricing-html-in-canvas-scene.tsx

@@ -0,0 +1,42 @@
+import { createHtmlInCanvasScene } from '../../shared/default-html-in-canvas-scene'
+
+const pricingLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasPricingSceneLandscape',
+  description: 'Pricing HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/landing-page/pricing/default-pricing-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.landing-page.pricing',
+  aspectRatio: '16:9',
+  template: 'browser',
+})
+
+const pricingHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasPricingSceneHorizontal',
+  description: 'Pricing HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/landing-page/pricing/default-pricing-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.landing-page.pricing',
+  aspectRatio: '9:16',
+  template: 'browser',
+})
+
+export const DefaultHtmlInCanvasPricingSceneLandscape = pricingLandscape.Scene
+export const DefaultHtmlInCanvasPricingSceneHorizontal = pricingHorizontal.Scene
+export const DefaultHtmlInCanvasPricingSceneLandscapeMetadata = pricingLandscape.componentMetadata
+export const DefaultHtmlInCanvasPricingSceneHorizontalMetadata = pricingHorizontal.componentMetadata
+
+export const pricingHtml = String.raw`
+  <section style="width:100%;height:100%;display:grid;grid-template-columns:.95fr 1.05fr;background:#020617;color:#f8fafc;overflow:hidden;">
+    <aside style="display:grid;align-content:center;padding:clamp(20px,3vw,48px);gap:16px;background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.94));border-right:1px solid rgba(255,255,255,.08);">
+      <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:#22c55e;"></span>
+        Pricing
+      </div>
+      <h1 style="margin:0;font-size:clamp(34px,5vw,72px);line-height:.92;letter-spacing:-.07em;">Compare plans at a glance</h1>
+      <p style="margin:0;font-size:clamp(15px,1.8vw,20px);line-height:1.6;color:#cbd5e1;">Clear pricing cards with one emphasized option.</p>
+    </aside>
+    <div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;">
+      <div style="padding:24px;border-left:1px solid rgba(255,255,255,.08);background:#0f172a;display:grid;align-content:start;gap:12px;">Starter</div>
+      <div style="padding:24px;border-left:1px solid rgba(255,255,255,.08);background:#111827;display:grid;align-content:start;gap:12px;">Pro</div>
+      <div style="padding:24px;border-left:1px solid rgba(255,255,255,.08);background:#1d4ed8;display:grid;align-content:start;gap:12px;">Enterprise</div>
+    </div>
+  </section>
+`

package/src/core/scene/html-in-canvas/landing-page/pricing/index.ts

@@ -0,0 +1,8 @@
+export {
+  DefaultHtmlInCanvasPricingSceneLandscape,
+  DefaultHtmlInCanvasPricingSceneHorizontal,
+  DefaultHtmlInCanvasPricingSceneLandscapeMetadata,
+  DefaultHtmlInCanvasPricingSceneHorizontalMetadata,
+  pricingHtml,
+} from './default-pricing-html-in-canvas-scene'
+

package/src/core/scene/html-in-canvas/media-wall/collage/default-collage-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultHtmlInCanvasCollageSceneLandscape, collageHtml } from './default-collage-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/media-wall/collage/DefaultHtmlInCanvasCollageSceneLandscape',
+  component: DefaultHtmlInCanvasCollageSceneLandscape,
+  args: {
+    html: collageHtml,
+  },
+}
+
+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/media-wall/collage/default-collage-html-in-canvas-scene.tsx

@@ -0,0 +1,42 @@
+import { createHtmlInCanvasScene } from '../../shared/default-html-in-canvas-scene'
+
+const collageLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasCollageSceneLandscape',
+  description: 'Collage-style HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/media-wall/collage/default-collage-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.media-wall.collage',
+  aspectRatio: '16:9',
+  template: 'browser',
+})
+
+const collageHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasCollageSceneHorizontal',
+  description: 'Collage-style HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/media-wall/collage/default-collage-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.media-wall.collage',
+  aspectRatio: '9:16',
+  template: 'browser',
+})
+
+export const DefaultHtmlInCanvasCollageSceneLandscape = collageLandscape.Scene
+export const DefaultHtmlInCanvasCollageSceneHorizontal = collageHorizontal.Scene
+export const DefaultHtmlInCanvasCollageSceneLandscapeMetadata = collageLandscape.componentMetadata
+export const DefaultHtmlInCanvasCollageSceneHorizontalMetadata = collageHorizontal.componentMetadata
+
+export const collageHtml = String.raw`
+  <section style="width:100%;height:100%;display:grid;grid-template-columns:1fr .85fr;background:#020617;color:#f8fafc;overflow:hidden;">
+    <div style="display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr .75fr;gap:0;">
+      <div style="grid-row:1 / span 2;background:linear-gradient(135deg,#1d4ed8,#38bdf8);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Hero image</div>
+      <div style="background:linear-gradient(135deg,#0f172a,#1e293b);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Inset A</div>
+      <div style="background:linear-gradient(135deg,#111827,#312e81);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Inset B</div>
+    </div>
+    <aside style="display:grid;align-content:center;padding:clamp(20px,3vw,44px);gap:16px;background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.94));border-left:1px solid rgba(255,255,255,.08);">
+      <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:#60a5fa;"></span>
+        Collage
+      </div>
+      <h1 style="margin:0;font-size:clamp(34px,5vw,72px);line-height:.92;letter-spacing:-.07em;">Mixed media collage</h1>
+      <p style="margin:0;font-size:clamp(15px,1.8vw,20px);line-height:1.6;color:#cbd5e1;">A stronger editorial montage layout for promos and collection pages.</p>
+    </aside>
+  </section>
+`

package/src/core/scene/html-in-canvas/media-wall/collage/index.ts

@@ -0,0 +1,8 @@
+export {
+  DefaultHtmlInCanvasCollageSceneLandscape,
+  DefaultHtmlInCanvasCollageSceneHorizontal,
+  DefaultHtmlInCanvasCollageSceneLandscapeMetadata,
+  DefaultHtmlInCanvasCollageSceneHorizontalMetadata,
+  collageHtml,
+} from './default-collage-html-in-canvas-scene'
+

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

@@ -0,0 +1,40 @@
+import {
+  DefaultHtmlInCanvasMediaWallSceneLandscape,
+  mediaWallHtml,
+} from './default-media-wall-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/media-wall/DefaultHtmlInCanvasMediaWallSceneLandscape',
+  component: DefaultHtmlInCanvasMediaWallSceneLandscape,
+  args: {
+    html: mediaWallHtml,
+  },
+}
+
+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/media-wall/default-media-wall-html-in-canvas-scene.tsx

@@ -0,0 +1,35 @@
+import { createHtmlInCanvasScene } from '../shared/default-html-in-canvas-scene'
+
+const mediaWallLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasMediaWallSceneLandscape',
+  description: 'Media wall HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/media-wall/default-media-wall-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.media-wall',
+  aspectRatio: '16:9',
+  template: 'browser',
+})
+
+const mediaWallHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasMediaWallSceneHorizontal',
+  description: 'Media wall HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/media-wall/default-media-wall-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.media-wall',
+  aspectRatio: '9:16',
+  template: 'browser',
+})
+
+export const DefaultHtmlInCanvasMediaWallSceneLandscape = mediaWallLandscape.Scene
+export const DefaultHtmlInCanvasMediaWallSceneHorizontal = mediaWallHorizontal.Scene
+export const DefaultHtmlInCanvasMediaWallSceneLandscapeMetadata = mediaWallLandscape.componentMetadata
+export const DefaultHtmlInCanvasMediaWallSceneHorizontalMetadata = mediaWallHorizontal.componentMetadata
+
+export const mediaWallHtml = String.raw`
+  <section style="width:100%;height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:0;background:#020617;color:#f8fafc;overflow:hidden;">
+    <div style="background:linear-gradient(135deg,#1e293b,#0f172a);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Media 1</div>
+    <div style="background:linear-gradient(135deg,#0f172a,#1e3a8a);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Media 2</div>
+    <div style="background:linear-gradient(135deg,#1d4ed8,#38bdf8);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Media 3</div>
+    <div style="background:linear-gradient(135deg,#111827,#0f172a);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Media 4</div>
+    <div style="background:linear-gradient(135deg,#0f172a,#312e81);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Media 5</div>
+    <div style="background:linear-gradient(135deg,#2563eb,#0f172a);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Media 6</div>
+  </section>
+`

package/src/core/scene/html-in-canvas/media-wall/gallery/default-gallery-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultHtmlInCanvasGallerySceneLandscape, galleryHtml } from './default-gallery-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/media-wall/gallery/DefaultHtmlInCanvasGallerySceneLandscape',
+  component: DefaultHtmlInCanvasGallerySceneLandscape,
+  args: {
+    html: galleryHtml,
+  },
+}
+
+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/media-wall/gallery/default-gallery-html-in-canvas-scene.tsx

@@ -0,0 +1,43 @@
+import { createHtmlInCanvasScene } from '../../shared/default-html-in-canvas-scene'
+
+const galleryLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasGallerySceneLandscape',
+  description: 'Gallery-style HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/media-wall/gallery/default-gallery-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.media-wall.gallery',
+  aspectRatio: '16:9',
+  template: 'browser',
+})
+
+const galleryHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasGallerySceneHorizontal',
+  description: 'Gallery-style HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/media-wall/gallery/default-gallery-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.media-wall.gallery',
+  aspectRatio: '9:16',
+  template: 'browser',
+})
+
+export const DefaultHtmlInCanvasGallerySceneLandscape = galleryLandscape.Scene
+export const DefaultHtmlInCanvasGallerySceneHorizontal = galleryHorizontal.Scene
+export const DefaultHtmlInCanvasGallerySceneLandscapeMetadata = galleryLandscape.componentMetadata
+export const DefaultHtmlInCanvasGallerySceneHorizontalMetadata = galleryHorizontal.componentMetadata
+
+export const galleryHtml = String.raw`
+  <section style="width:100%;height:100%;display:grid;grid-template-columns:1.2fr .8fr;gap:0;background:#020617;color:#f8fafc;overflow:hidden;">
+    <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:0;">
+      <div style="background:linear-gradient(135deg,#1e293b,#0f172a);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Photo A</div>
+      <div style="background:linear-gradient(135deg,#0f172a,#1d4ed8);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Photo B</div>
+      <div style="background:linear-gradient(135deg,#1d4ed8,#38bdf8);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Photo C</div>
+      <div style="background:linear-gradient(135deg,#0f172a,#312e81);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Photo D</div>
+    </div>
+    <aside style="display:grid;align-content:center;padding:clamp(20px,3vw,44px);gap:16px;background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.94));border-left:1px solid rgba(255,255,255,.08);">
+      <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>
+        Gallery
+      </div>
+      <h1 style="margin:0;font-size:clamp(34px,5vw,72px);line-height:.92;letter-spacing:-.07em;">A simple image wall</h1>
+      <p style="margin:0;font-size:clamp(15px,1.8vw,20px);line-height:1.6;color:#cbd5e1;">Balanced grid composition for collection previews and gallery intros.</p>
+    </aside>
+  </section>
+`

package/src/core/scene/html-in-canvas/media-wall/gallery/index.ts

@@ -0,0 +1,8 @@
+export {
+  DefaultHtmlInCanvasGallerySceneLandscape,
+  DefaultHtmlInCanvasGallerySceneHorizontal,
+  DefaultHtmlInCanvasGallerySceneLandscapeMetadata,
+  DefaultHtmlInCanvasGallerySceneHorizontalMetadata,
+  galleryHtml,
+} from './default-gallery-html-in-canvas-scene'
+

package/src/core/scene/html-in-canvas/media-wall/grid/default-grid-html-in-canvas-scene.stories.tsx

@@ -0,0 +1,38 @@
+import { DefaultHtmlInCanvasGridSceneLandscape, gridHtml } from './default-grid-html-in-canvas-scene'
+
+const meta = {
+  title: 'core/scene/html-in-canvas/media-wall/grid/DefaultHtmlInCanvasGridSceneLandscape',
+  component: DefaultHtmlInCanvasGridSceneLandscape,
+  args: {
+    html: gridHtml,
+  },
+}
+
+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/media-wall/grid/default-grid-html-in-canvas-scene.tsx

@@ -0,0 +1,35 @@
+import { createHtmlInCanvasScene } from '../../shared/default-html-in-canvas-scene'
+
+const gridLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasGridSceneLandscape',
+  description: 'Grid-style HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/media-wall/grid/default-grid-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.media-wall.grid',
+  aspectRatio: '16:9',
+  template: 'browser',
+})
+
+const gridHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasGridSceneHorizontal',
+  description: 'Grid-style HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/media-wall/grid/default-grid-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.media-wall.grid',
+  aspectRatio: '9:16',
+  template: 'browser',
+})
+
+export const DefaultHtmlInCanvasGridSceneLandscape = gridLandscape.Scene
+export const DefaultHtmlInCanvasGridSceneHorizontal = gridHorizontal.Scene
+export const DefaultHtmlInCanvasGridSceneLandscapeMetadata = gridLandscape.componentMetadata
+export const DefaultHtmlInCanvasGridSceneHorizontalMetadata = gridHorizontal.componentMetadata
+
+export const gridHtml = String.raw`
+  <section style="width:100%;height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:0;background:#020617;color:#f8fafc;overflow:hidden;">
+    <div style="background:#0f172a;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Grid 1</div>
+    <div style="background:#111827;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Grid 2</div>
+    <div style="background:#1d4ed8;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Grid 3</div>
+    <div style="background:#1e293b;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Grid 4</div>
+    <div style="background:#0f172a;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Grid 5</div>
+    <div style="background:#2563eb;border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;">Grid 6</div>
+  </section>
+`

package/src/core/scene/html-in-canvas/media-wall/grid/index.ts

@@ -0,0 +1,8 @@
+export {
+  DefaultHtmlInCanvasGridSceneLandscape,
+  DefaultHtmlInCanvasGridSceneHorizontal,
+  DefaultHtmlInCanvasGridSceneLandscapeMetadata,
+  DefaultHtmlInCanvasGridSceneHorizontalMetadata,
+  gridHtml,
+} from './default-grid-html-in-canvas-scene'
+

package/src/core/scene/html-in-canvas/media-wall/index.ts

@@ -0,0 +1,31 @@
+export {
+  DefaultHtmlInCanvasMediaWallSceneLandscape,
+  DefaultHtmlInCanvasMediaWallSceneHorizontal,
+  DefaultHtmlInCanvasMediaWallSceneLandscapeMetadata,
+  DefaultHtmlInCanvasMediaWallSceneHorizontalMetadata,
+  mediaWallHtml,
+} from './default-media-wall-html-in-canvas-scene'
+
+export {
+  DefaultHtmlInCanvasGallerySceneLandscape,
+  DefaultHtmlInCanvasGallerySceneHorizontal,
+  DefaultHtmlInCanvasGallerySceneLandscapeMetadata,
+  DefaultHtmlInCanvasGallerySceneHorizontalMetadata,
+  galleryHtml,
+} from './gallery'
+
+export {
+  DefaultHtmlInCanvasGridSceneLandscape,
+  DefaultHtmlInCanvasGridSceneHorizontal,
+  DefaultHtmlInCanvasGridSceneLandscapeMetadata,
+  DefaultHtmlInCanvasGridSceneHorizontalMetadata,
+  gridHtml,
+} from './grid'
+
+export {
+  DefaultHtmlInCanvasCollageSceneLandscape,
+  DefaultHtmlInCanvasCollageSceneHorizontal,
+  DefaultHtmlInCanvasCollageSceneLandscapeMetadata,
+  DefaultHtmlInCanvasCollageSceneHorizontalMetadata,
+  collageHtml,
+} from './collage'