@vibecuting/video-project-core 0.1.25 → 0.1.26

package/src/core/scene/slide/closing/default-closing-slide.tsx

@@ -0,0 +1,113 @@
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultClosingSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  cta?: string
+  footer?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultClosingSlide',
+  description: 'Closing thank-you slide',
+  sourceFile: 'src/core/scene/slide/closing/default-closing-slide.tsx',
+  pluginKey: 'core.slide.closing',
+  tags: ['scene', 'slide', 'closing'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultClosingSlideProps',
+})
+
+export const DefaultClosingSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      cta: z.string().optional(),
+      footer: z.string().optional(),
+    }),
+    component: function DefaultClosingSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      cta,
+      footer,
+    }: DefaultClosingSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+
+      return (
+        <SlideFrame
+          pluginKey={componentMetadata.pluginKey}
+          sceneId={sceneId}
+          sceneName={sceneName ?? title}
+          background="linear-gradient(135deg, #020617 0%, #0f172a 60%, #1d4ed8 100%)"
+        >
+          <section
+            style={{
+              display: 'grid',
+              placeItems: 'center',
+              width: '100%',
+              height: '100%',
+              padding: isPortrait ? '44px 28px' : '72px 88px',
+              color: '#e2e8f0',
+              textAlign: 'center',
+            }}
+          >
+            <div style={{ maxWidth: isPortrait ? 620 : 980 }}>
+              <SceneMotionLayer variant="hero-copy">
+                <p style={{ margin: 0, fontSize: isPortrait ? scale.eyebrow * 0.9 : scale.eyebrow, letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.66 }}>Thank you</p>
+              </SceneMotionLayer>
+              <SceneMotionLayer variant="hero-title" delayIndex={1}>
+                <h1 style={{ margin: isPortrait ? '16px 0 0' : '24px 0 0', fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+              </SceneMotionLayer>
+              {subtitle ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                  <p style={{ margin: '20px auto 0', maxWidth: isPortrait ? 560 : 760, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.82 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+              {cta ? (
+                <SceneMotionLayer variant="panel" delayIndex={3}>
+                  <div
+                    style={{
+                      display: 'inline-flex',
+                      marginTop: isPortrait ? 22 : 30,
+                      padding: isPortrait ? '12px 22px' : '14px 26px',
+                      borderRadius: 0,
+                      background: 'rgba(37,99,235,0.22)',
+                      border: '1px solid rgba(96,165,250,0.32)',
+                      fontSize: isPortrait ? scale.body * 0.92 : scale.body,
+                      fontWeight: 600,
+                    }}
+                  >
+                    {cta}
+                  </div>
+                </SceneMotionLayer>
+              ) : null}
+              {footer ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={4}>
+                  <p style={{ margin: isPortrait ? '20px 0 0' : '28px 0 0', fontSize: scale.caption, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.64 }}>{footer}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/closing/index.ts

@@ -0,0 +1,4 @@
+export { DefaultClosingSlide } from './default-closing-slide'
+export { componentMetadata } from './default-closing-slide'
+export { DefaultClosingSlideLandscape, componentMetadata as DefaultClosingSlideLandscapeMetadata } from './default-closing-slide-Landscape'
+export { DefaultClosingSlideHorizontal, componentMetadata as DefaultClosingSlideHorizontalMetadata } from './default-closing-slide-Horizontal'

package/src/core/scene/slide/code-callout/default-code-callout-slide-Horizontal.animated.stories.tsx

@@ -0,0 +1,21 @@
+import { DefaultCodeCalloutSlideHorizontal } from './default-code-callout-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/code-callout/DefaultCodeCalloutSlideHorizontal/Animated',
+  component: DefaultCodeCalloutSlideHorizontal,
+  args: {
+    title: 'Code Callout',
+    subtitle: 'A focused code block with a short explanation.',
+    code: `const value = items.filter(Boolean).length`,
+    caption: 'Great for showing a small implementation detail.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/code-callout/default-code-callout-slide-Horizontal.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultCodeCalloutSlideHorizontal } from './default-code-callout-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/code-callout/DefaultCodeCalloutSlideHorizontal',
+  component: DefaultCodeCalloutSlideHorizontal,
+  args: {
+    title: 'Code Callout',
+    subtitle: 'A focused code block with a short explanation.',
+    code: `const value = items.filter(Boolean).length`,
+    caption: 'Great for showing a small implementation detail.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/code-callout/default-code-callout-slide-Horizontal.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultCodeCalloutSlide, componentMetadata as baseComponentMetadata } from './default-code-callout-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultCodeCalloutSlideHorizontal',
+  description: "Code callout slide (Portrait 9:16 variant)",
+  sourceFile: 'src/core/scene/slide/code-callout/default-code-callout-slide-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultCodeCalloutSlideHorizontal = VideoComponent(componentMetadata)(function DefaultCodeCalloutSlideHorizontal(
+  props: ComponentProps<typeof DefaultCodeCalloutSlide>,
+) {
+  return <DefaultCodeCalloutSlide {...props} />
+})

package/src/core/scene/slide/code-callout/default-code-callout-slide-Landscape.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultCodeCalloutSlide, componentMetadata as baseComponentMetadata } from './default-code-callout-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultCodeCalloutSlideLandscape',
+  description: "Code callout slide (Landscape 16:9 variant)",
+  sourceFile: 'src/core/scene/slide/code-callout/default-code-callout-slide-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultCodeCalloutSlideLandscape = VideoComponent(componentMetadata)(function DefaultCodeCalloutSlideLandscape(
+  props: ComponentProps<typeof DefaultCodeCalloutSlide>,
+) {
+  return <DefaultCodeCalloutSlide {...props} />
+})

package/src/core/scene/slide/code-callout/default-code-callout-slide.animated.stories.tsx

@@ -0,0 +1,21 @@
+import { DefaultCodeCalloutSlideLandscape } from './default-code-callout-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/code-callout/DefaultCodeCalloutSlideLandscape/Animated',
+  component: DefaultCodeCalloutSlideLandscape,
+  args: {
+    title: 'Code Callout',
+    subtitle: 'A focused code block with a short explanation.',
+    code: `const value = items.filter(Boolean).length`,
+    caption: 'Great for showing a small implementation detail.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/code-callout/default-code-callout-slide.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultCodeCalloutSlideLandscape } from './default-code-callout-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/code-callout/DefaultCodeCalloutSlideLandscape',
+  component: DefaultCodeCalloutSlideLandscape,
+  args: {
+    title: 'Code Callout',
+    subtitle: 'A focused code block with a short explanation.',
+    code: `const value = items.filter(Boolean).length`,
+    caption: 'Great for showing a small implementation detail.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/code-callout/default-code-callout-slide.tsx

@@ -0,0 +1,74 @@
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultCodeCalloutSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  code: string
+  caption?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultCodeCalloutSlide',
+  description: 'Code callout slide',
+  sourceFile: 'src/core/scene/slide/code-callout/default-code-callout-slide.tsx',
+  pluginKey: 'core.slide.code-callout',
+  tags: ['scene', 'slide', 'code-callout'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultCodeCalloutSlideProps',
+})
+
+export const DefaultCodeCalloutSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      code: z.string().min(1),
+      caption: z.string().optional(),
+    }),
+    component: function DefaultCodeCalloutSlide({ sceneId, sceneName, title, subtitle, code, caption }: DefaultCodeCalloutSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#020617">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#e2e8f0' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 620 : 960, fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: '18px 0 0', maxWidth: isPortrait ? 560 : 800, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.8 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <SceneMotionLayer variant="panel" delayIndex={2}>
+              <div style={{ marginTop: isPortrait ? 24 : 36, borderRadius: 0, overflow: 'hidden', border: '1px solid rgba(148,163,184,0.18)', background: '#0f172a' }}>
+                <pre style={{ margin: 0, padding: isPortrait ? 18 : 28, fontSize: isPortrait ? scale.body * 0.8 : scale.body, lineHeight: 1.55, whiteSpace: 'pre-wrap' }}>
+                  <code>{code}</code>
+                </pre>
+              </div>
+            </SceneMotionLayer>
+            {caption ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={3}>
+                <p style={{ margin: '16px 0 0', fontSize: scale.caption, opacity: 0.72 }}>{caption}</p>
+              </SceneMotionLayer>
+            ) : null}
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/code-callout/index.ts

@@ -0,0 +1,4 @@
+export { DefaultCodeCalloutSlide } from './default-code-callout-slide'
+export { componentMetadata } from './default-code-callout-slide'
+export { DefaultCodeCalloutSlideLandscape, componentMetadata as DefaultCodeCalloutSlideLandscapeMetadata } from './default-code-callout-slide-Landscape'
+export { DefaultCodeCalloutSlideHorizontal, componentMetadata as DefaultCodeCalloutSlideHorizontalMetadata } from './default-code-callout-slide-Horizontal'

package/src/core/scene/slide/code-snippet/default-code-snippet-slide-Horizontal.animated.stories.tsx

@@ -0,0 +1,23 @@
+import { DefaultCodeSnippetSlideHorizontal } from './default-code-snippet-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/code-snippet/DefaultCodeSnippetSlideHorizontal/Animated',
+  component: DefaultCodeSnippetSlideHorizontal,
+  args: {
+    title: 'Implementation Detail',
+    subtitle: 'Show a focused code sample with a short explanation.',
+    language: 'TypeScript',
+    code: `export function buildLabel(name: string) {
+  return name.trim().toUpperCase()
+}`,
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/code-snippet/default-code-snippet-slide-Horizontal.stories.tsx

@@ -0,0 +1,22 @@
+import { DefaultCodeSnippetSlideHorizontal } from './default-code-snippet-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/code-snippet/DefaultCodeSnippetSlideHorizontal',
+  component: DefaultCodeSnippetSlideHorizontal,
+  args: {
+    title: 'Implementation Detail',
+    subtitle: 'Show a focused code sample with a short explanation.',
+    language: 'TypeScript',
+    code: `export function buildLabel(name: string) {
+  return name.trim().toUpperCase()
+}`,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/code-snippet/default-code-snippet-slide-Horizontal.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultCodeSnippetSlide, componentMetadata as baseComponentMetadata } from './default-code-snippet-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultCodeSnippetSlideHorizontal',
+  description: "Code snippet slide (Portrait 9:16 variant)",
+  sourceFile: 'src/core/scene/slide/code-snippet/default-code-snippet-slide-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultCodeSnippetSlideHorizontal = VideoComponent(componentMetadata)(function DefaultCodeSnippetSlideHorizontal(
+  props: ComponentProps<typeof DefaultCodeSnippetSlide>,
+) {
+  return <DefaultCodeSnippetSlide {...props} />
+})

package/src/core/scene/slide/code-snippet/default-code-snippet-slide-Landscape.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultCodeSnippetSlide, componentMetadata as baseComponentMetadata } from './default-code-snippet-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultCodeSnippetSlideLandscape',
+  description: "Code snippet slide (Landscape 16:9 variant)",
+  sourceFile: 'src/core/scene/slide/code-snippet/default-code-snippet-slide-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultCodeSnippetSlideLandscape = VideoComponent(componentMetadata)(function DefaultCodeSnippetSlideLandscape(
+  props: ComponentProps<typeof DefaultCodeSnippetSlide>,
+) {
+  return <DefaultCodeSnippetSlide {...props} />
+})

package/src/core/scene/slide/code-snippet/default-code-snippet-slide.animated.stories.tsx

@@ -0,0 +1,23 @@
+import { DefaultCodeSnippetSlideLandscape } from './default-code-snippet-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/code-snippet/DefaultCodeSnippetSlideLandscape/Animated',
+  component: DefaultCodeSnippetSlideLandscape,
+  args: {
+    title: 'Implementation Detail',
+    subtitle: 'Show a focused code sample with a short explanation.',
+    language: 'TypeScript',
+    code: `export function buildLabel(name: string) {
+  return name.trim().toUpperCase()
+}`,
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/code-snippet/default-code-snippet-slide.stories.tsx

@@ -0,0 +1,22 @@
+import { DefaultCodeSnippetSlideLandscape } from './default-code-snippet-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/code-snippet/DefaultCodeSnippetSlideLandscape',
+  component: DefaultCodeSnippetSlideLandscape,
+  args: {
+    title: 'Implementation Detail',
+    subtitle: 'Show a focused code sample with a short explanation.',
+    language: 'TypeScript',
+    code: `export function buildLabel(name: string) {
+  return name.trim().toUpperCase()
+}`,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/code-snippet/default-code-snippet-slide.tsx

@@ -0,0 +1,81 @@
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultCodeSnippetSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  language?: string
+  code: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultCodeSnippetSlide',
+  description: 'Code snippet slide',
+  sourceFile: 'src/core/scene/slide/code-snippet/default-code-snippet-slide.tsx',
+  pluginKey: 'core.slide.code-snippet',
+  tags: ['scene', 'slide', 'code-snippet'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultCodeSnippetSlideProps',
+})
+
+export const DefaultCodeSnippetSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      language: z.string().optional(),
+      code: z.string().min(1),
+    }),
+    component: function DefaultCodeSnippetSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      language,
+      code,
+    }: DefaultCodeSnippetSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#0f172a">
+          <section style={{ width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#e2e8f0' }}>
+            <SceneMotionLayer variant="hero-title">
+              <h1 style={{ margin: 0, maxWidth: isPortrait ? 620 : 980, fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+            </SceneMotionLayer>
+            {subtitle ? (
+              <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                <p style={{ margin: '18px 0 0', maxWidth: isPortrait ? 560 : 820, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.78 }}>{subtitle}</p>
+              </SceneMotionLayer>
+            ) : null}
+            <SceneMotionLayer variant="panel" delayIndex={2}>
+              <div style={{ marginTop: isPortrait ? 24 : 36, borderRadius: 0, overflow: 'hidden', border: '1px solid rgba(148,163,184,0.18)', background: '#020617' }}>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: isPortrait ? '12px 16px' : '14px 20px', background: 'rgba(15,23,42,0.92)', borderBottom: '1px solid rgba(148,163,184,0.12)' }}>
+                  <span style={{ fontSize: isPortrait ? scale.caption * 0.9 : scale.caption, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.68 }}>{language ?? 'code'}</span>
+                  <span style={{ fontSize: isPortrait ? scale.caption * 0.82 : scale.caption, opacity: 0.5 }}>read-only snippet</span>
+                </div>
+                <pre style={{ margin: 0, padding: isPortrait ? 18 : 28, fontSize: isPortrait ? scale.body * 0.8 : scale.body, lineHeight: 1.55, overflow: 'auto', whiteSpace: 'pre-wrap', maxWidth: '100%' }}>
+                  <code>{code}</code>
+                </pre>
+              </div>
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/code-snippet/index.ts

@@ -0,0 +1,4 @@
+export { DefaultCodeSnippetSlide } from './default-code-snippet-slide'
+export { componentMetadata } from './default-code-snippet-slide'
+export { DefaultCodeSnippetSlideLandscape, componentMetadata as DefaultCodeSnippetSlideLandscapeMetadata } from './default-code-snippet-slide-Landscape'
+export { DefaultCodeSnippetSlideHorizontal, componentMetadata as DefaultCodeSnippetSlideHorizontalMetadata } from './default-code-snippet-slide-Horizontal'

package/src/core/scene/slide/compact-hero/default-compact-hero-slide-Horizontal.animated.stories.tsx

@@ -0,0 +1,19 @@
+import { DefaultCompactHeroSlideHorizontal } from './default-compact-hero-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/compact-hero/DefaultCompactHeroSlideHorizontal/Animated',
+  component: DefaultCompactHeroSlideHorizontal,
+  args: {
+    title: 'Compact Hero',
+    subtitle: 'A lighter opener when you want less vertical space.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/compact-hero/default-compact-hero-slide-Horizontal.stories.tsx

@@ -0,0 +1,18 @@
+import { DefaultCompactHeroSlideHorizontal } from './default-compact-hero-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/compact-hero/DefaultCompactHeroSlideHorizontal',
+  component: DefaultCompactHeroSlideHorizontal,
+  args: {
+    title: 'Compact Hero',
+    subtitle: 'A lighter opener when you want less vertical space.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/compact-hero/default-compact-hero-slide-Horizontal.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultCompactHeroSlide, componentMetadata as baseComponentMetadata } from './default-compact-hero-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultCompactHeroSlideHorizontal',
+  description: "Compact hero slide (Portrait 9:16 variant)",
+  sourceFile: 'src/core/scene/slide/compact-hero/default-compact-hero-slide-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultCompactHeroSlideHorizontal = VideoComponent(componentMetadata)(function DefaultCompactHeroSlideHorizontal(
+  props: ComponentProps<typeof DefaultCompactHeroSlide>,
+) {
+  return <DefaultCompactHeroSlide {...props} />
+})

package/src/core/scene/slide/compact-hero/default-compact-hero-slide-Landscape.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultCompactHeroSlide, componentMetadata as baseComponentMetadata } from './default-compact-hero-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultCompactHeroSlideLandscape',
+  description: "Compact hero slide (Landscape 16:9 variant)",
+  sourceFile: 'src/core/scene/slide/compact-hero/default-compact-hero-slide-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultCompactHeroSlideLandscape = VideoComponent(componentMetadata)(function DefaultCompactHeroSlideLandscape(
+  props: ComponentProps<typeof DefaultCompactHeroSlide>,
+) {
+  return <DefaultCompactHeroSlide {...props} />
+})

package/src/core/scene/slide/compact-hero/default-compact-hero-slide.animated.stories.tsx

@@ -0,0 +1,19 @@
+import { DefaultCompactHeroSlideLandscape } from './default-compact-hero-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/compact-hero/DefaultCompactHeroSlideLandscape/Animated',
+  component: DefaultCompactHeroSlideLandscape,
+  args: {
+    title: 'Compact Hero',
+    subtitle: 'A lighter opener when you want less vertical space.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}