@vibecuting/video-project-core 0.1.26 → 0.1.27

package/src/core/intro/default-cinematic-intro-bumper/default-cinematic-intro-bumper.tsx

@@ -0,0 +1,234 @@
+import type { ReactNode } from 'react'
+
+import { VideoComponent, defineComponentProjectComponentMetadata } from '@vibecuting/component-project-helper'
+
+import { BaseRemotionScene, type BaseRemotionSceneProps, useRemotionSceneRuntime } from '../../../base'
+import { useSceneMotion } from '../../../base'
+import { getIntroBodyMaxWidth, getIntroLineClamp, getIntroPanelMinHeight } from '../_shared/intro-layout'
+
+export interface DefaultCinematicIntroBumperProps extends BaseRemotionSceneProps {
+  title: string
+  subtitle?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultCinematicIntroBumper',
+  description: 'Film-poster intro with a title rail and framed feature panel',
+  sourceFile: 'src/core/intro/default-cinematic-intro-bumper/default-cinematic-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'cinematic', 'poster'],
+  propsTypeName: 'DefaultCinematicIntroBumperProps',
+})
+
+export function DefaultCinematicIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultCinematicIntroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+  const titleFontSize = Math.round(runtime.height * (portrait ? 0.078 : 0.072))
+  const subtitleFontSize = Math.round(runtime.height * 0.024)
+  const labelFontSize = Math.round(runtime.height * 0.016)
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? `linear-gradient(180deg, rgba(2,6,23,0.12) 0%, ${accent ?? '#020617'} 28%, #111827 100%)`
+          : `radial-gradient(circle at 18% 22%, ${secondaryAccent ?? '#1d4ed8'} 0%, ${accent ?? '#020617'} 44%, #020617 100%)`,
+        color: textColor ?? '#f8fafc',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * (portrait ? 0.065 : 0.07)),
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: 'linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(2,6,23,0.14) 42%, rgba(2,6,23,0.42) 100%)',
+          pointerEvents: 'none',
+        }}
+      />
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 1.08fr) minmax(280px, 0.92fr)',
+          gap: portrait ? 18 : 24,
+          alignItems: 'center',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div
+          style={{
+            display: 'grid',
+            gap: portrait ? 14 : 18,
+            minWidth: 0,
+            textAlign: portrait ? 'center' : 'left',
+          }}
+        >
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: portrait ? 'center' : 'flex-start' }}>
+            <span
+              style={{
+                fontSize: labelFontSize,
+                letterSpacing: '0.34em',
+                textTransform: 'uppercase',
+                opacity: 0.66,
+              }}
+            >
+              {kicker ?? 'Cinematic Opening'}
+            </span>
+            {creditLine ? (
+              <span
+                style={{
+                  fontSize: labelFontSize,
+                  letterSpacing: '0.24em',
+                  textTransform: 'uppercase',
+                  opacity: 0.58,
+                }}
+              >
+                {creditLine}
+              </span>
+            ) : null}
+          </div>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: titleFontSize,
+              lineHeight: 0.9,
+              letterSpacing: '-0.08em',
+              textTransform: 'uppercase',
+              textShadow: '0 22px 56px rgba(15,23,42,0.42)',
+              transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 10}px, 0)` : 'none',
+            }}
+          >
+            {title}
+          </h1>
+          {subtitle ? (
+            <p
+              style={{
+                margin: 0,
+                maxWidth: getIntroBodyMaxWidth(runtime.width, portrait, 0.4, 1, { min: 240, max: 680 }),
+                fontSize: subtitleFontSize,
+                lineHeight: 1.56,
+                opacity: 0.84,
+                ...getIntroLineClamp(portrait ? 4 : 3),
+              }}
+            >
+              {subtitle}
+            </p>
+          ) : null}
+          {footer ? (
+            <p
+              style={{
+                margin: 0,
+                fontSize: labelFontSize,
+                letterSpacing: '0.22em',
+                textTransform: 'uppercase',
+                opacity: 0.54,
+              }}
+            >
+              {footer}
+            </p>
+          ) : null}
+          {children ? <div>{children}</div> : null}
+        </div>
+
+        <div
+          style={{
+            display: 'grid',
+            gap: 14,
+            minWidth: 0,
+          }}
+        >
+          <div
+            style={{
+              minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.36, 0.24, { min: 220, max: 360 }),
+              border: '1px solid rgba(248,250,252,0.12)',
+              background: 'linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(15,23,42,0.16) 38%, rgba(2,6,23,0.92) 100%)',
+              padding: 18,
+              display: 'grid',
+              gap: 12,
+              overflow: 'hidden',
+            }}
+          >
+            <div style={{ fontSize: labelFontSize, letterSpacing: '0.3em', textTransform: 'uppercase', opacity: 0.56 }}>
+              Poster Frame
+            </div>
+            <div style={{ display: 'grid', gridTemplateColumns: '0.62fr 0.38fr', gap: 12, minHeight: 0 }}>
+              <div
+                style={{
+                  border: '1px solid rgba(248,250,252,0.12)',
+                  background: 'linear-gradient(180deg, rgba(248,250,252,0.08), rgba(15,23,42,0.18))',
+                  display: 'grid',
+                  placeItems: 'center',
+                  padding: 18,
+                  minHeight: 0,
+                }}
+              >
+                <div style={{ display: 'grid', gap: 8, textAlign: 'center' }}>
+                  <span style={{ fontSize: labelFontSize, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.64 }}>
+                    Motion Poster
+                  </span>
+                  <strong style={{ fontSize: Math.round(runtime.height * 0.03), letterSpacing: '-0.04em' }}>Feature reel</strong>
+                </div>
+              </div>
+              <div style={{ display: 'grid', gap: 10, minWidth: 0 }}>
+                {['Frame 01', 'Frame 02', 'Frame 03'].map((label, index) => (
+                  <div
+                    key={label}
+                    style={{
+                      minHeight: 0,
+                      flex: 1,
+                      border: '1px solid rgba(248,250,252,0.1)',
+                      background: `linear-gradient(135deg, rgba(255,255,255,0.05), rgba(2,6,23,0.22))`,
+                      padding: '12px 10px',
+                      display: 'grid',
+                      alignContent: 'center',
+                      fontSize: labelFontSize,
+                      letterSpacing: '0.22em',
+                      textTransform: 'uppercase',
+                      opacity: 0.78,
+                      transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * (index + 1) * 4}px, 0)` : 'none',
+                    }}
+                  >
+                    {label}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultCinematicIntroBumper)

package/src/core/intro/default-cinematic-intro-bumper/index.ts

@@ -0,0 +1,11 @@
+export { DefaultCinematicIntroBumper } from './default-cinematic-intro-bumper'
+export { componentMetadata } from './default-cinematic-intro-bumper'
+export {
+  DefaultCinematicIntroBumperLandscape,
+  componentMetadata as DefaultCinematicIntroBumperLandscapeMetadata,
+} from './default-cinematic-intro-bumper-Landscape'
+export {
+  DefaultCinematicIntroBumperHorizontal,
+  componentMetadata as DefaultCinematicIntroBumperHorizontalMetadata,
+} from './default-cinematic-intro-bumper-Horizontal'
+

package/src/core/intro/default-festival-intro-bumper/default-festival-intro-bumper-Horizontal.tsx

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultFestivalIntroBumper, componentMetadata as baseComponentMetadata } from './default-festival-intro-bumper'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  resourceKind: 'scene',
+  pluginKey: 'core.intro.festival',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  name: 'DefaultFestivalIntroBumperHorizontal',
+  description: 'Festival intro bumper (Portrait 9:16 variant)',
+  sourceFile: 'src/core/intro/default-festival-intro-bumper/default-festival-intro-bumper-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultFestivalIntroBumperHorizontal = VideoComponent(componentMetadata)(function DefaultFestivalIntroBumperHorizontal(
+  props: ComponentProps<typeof DefaultFestivalIntroBumper>,
+) {
+  return <DefaultFestivalIntroBumper {...props} />
+})

package/src/core/intro/default-festival-intro-bumper/default-festival-intro-bumper-Landscape.tsx

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultFestivalIntroBumper, componentMetadata as baseComponentMetadata } from './default-festival-intro-bumper'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  resourceKind: 'scene',
+  pluginKey: 'core.intro.festival',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  name: 'DefaultFestivalIntroBumperLandscape',
+  description: 'Festival intro bumper (Landscape 16:9 variant)',
+  sourceFile: 'src/core/intro/default-festival-intro-bumper/default-festival-intro-bumper-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultFestivalIntroBumperLandscape = VideoComponent(componentMetadata)(function DefaultFestivalIntroBumperLandscape(
+  props: ComponentProps<typeof DefaultFestivalIntroBumper>,
+) {
+  return <DefaultFestivalIntroBumper {...props} />
+})

package/src/core/intro/default-festival-intro-bumper/default-festival-intro-bumper.stories.tsx

@@ -0,0 +1,29 @@
+import { DefaultFestivalIntroBumperHorizontal } from './default-festival-intro-bumper-Horizontal'
+import { DefaultFestivalIntroBumperLandscape } from './default-festival-intro-bumper-Landscape'
+
+const meta = {
+  title: 'core/intro/default-festival-intro-bumper/DefaultFestivalIntroBumperLandscape',
+  component: DefaultFestivalIntroBumperLandscape,
+  args: {
+    kicker: 'Festival Cut',
+    title: 'Midnight Bloom',
+    subtitle: 'A premiere slate with stacked ribbons, spotlight energy, and a festival badge card.',
+    creditLine: 'Official Selection',
+    footer: 'Opening Sequence',
+    accent: '#22c55e',
+    secondaryAccent: '#f59e0b',
+  },
+}
+
+export default meta
+
+export const Default = {}
+export const Animated = { parameters: { scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof meta.args) => <DefaultFestivalIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof meta.args) => <DefaultFestivalIntroBumperHorizontal {...storyArgs} />,
+  parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '9:16' },
+}

package/src/core/intro/default-festival-intro-bumper/default-festival-intro-bumper.tsx

@@ -0,0 +1,187 @@
+import type { ReactNode } from 'react'
+
+import { VideoComponent, defineComponentProjectComponentMetadata } from '@vibecuting/component-project-helper'
+
+import { BaseRemotionScene, type BaseRemotionSceneProps, useRemotionSceneRuntime } from '../../../base'
+import { useSceneMotion } from '../../../base'
+import { getIntroBodyMaxWidth, getIntroLineClamp, getIntroPanelMinHeight } from '../_shared/intro-layout'
+
+export interface DefaultFestivalIntroBumperProps extends BaseRemotionSceneProps {
+  title: string
+  subtitle?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultFestivalIntroBumper',
+  description: 'Festival premiere slate with stacked ribbons and spotlight styling',
+  sourceFile: 'src/core/intro/default-festival-intro-bumper/default-festival-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'festival', 'premiere'],
+  propsTypeName: 'DefaultFestivalIntroBumperProps',
+})
+
+export function DefaultFestivalIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+}: DefaultFestivalIntroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+  const titleFontSize = Math.round(runtime.height * (portrait ? 0.076 : 0.07))
+  const labelFontSize = Math.round(runtime.height * 0.017)
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? 'linear-gradient(180deg, #1e1b4b 0%, #0f172a 48%, #020617 100%)'
+          : `radial-gradient(circle at 50% 26%, ${secondaryAccent ?? '#f59e0b'} 0%, ${accent ?? '#16a34a'} 42%, #020617 100%)`,
+        color: textColor ?? '#f8fafc',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.07),
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        aria-hidden="true"
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background:
+            'radial-gradient(circle at center, rgba(255,255,255,0.05) 0%, rgba(2,6,23,0.12) 42%, rgba(2,6,23,0.48) 100%)',
+          pointerEvents: 'none',
+        }}
+      />
+      <section
+        style={{
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 1.12fr) minmax(250px, 0.88fr)',
+          gap: portrait ? 18 : 24,
+          alignItems: 'center',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div
+          style={{
+            display: 'grid',
+            gap: 14,
+            minWidth: 0,
+            textAlign: portrait ? 'center' : 'left',
+          }}
+        >
+          <p
+            style={{
+              margin: 0,
+              fontSize: labelFontSize,
+              letterSpacing: '0.34em',
+              textTransform: 'uppercase',
+              opacity: 0.68,
+            }}
+          >
+            {kicker ?? 'Festival Opening'}
+          </p>
+          <h1
+            style={{
+              margin: 0,
+              fontSize: titleFontSize,
+              lineHeight: 0.9,
+              letterSpacing: '-0.08em',
+              textTransform: 'uppercase',
+              textShadow: '0 20px 52px rgba(15,23,42,0.44)',
+              transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 8}px, 0)` : 'none',
+            }}
+          >
+            {title}
+          </h1>
+          {subtitle ? (
+            <p style={{ margin: 0, maxWidth: getIntroBodyMaxWidth(runtime.width, portrait, 0.4, 1, { min: 240, max: 680 }), fontSize: Math.round(runtime.height * 0.024), lineHeight: 1.55, opacity: 0.82, ...getIntroLineClamp(portrait ? 4 : 3) }}>
+              {subtitle}
+            </p>
+          ) : null}
+          <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: portrait ? 'center' : 'flex-start', gap: 10 }}>
+            {creditLine ? (
+              <span style={{ fontSize: labelFontSize, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.72 }}>
+                {creditLine}
+              </span>
+            ) : null}
+            {footer ? (
+              <span style={{ fontSize: labelFontSize, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.54 }}>
+                {footer}
+              </span>
+            ) : null}
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: 'grid',
+            gap: 12,
+            alignContent: 'center',
+            justifyItems: 'stretch',
+            minWidth: 0,
+          }}
+        >
+          {['Opening Night', 'Audience Cut', 'Final Reveal'].map((label, index) => (
+            <div
+              key={label}
+              style={{
+                padding: portrait ? '14px 16px' : '16px 18px',
+                border: '1px solid rgba(248,250,252,0.14)',
+                background: `linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(15,23,42,0.18) 100%)`,
+                letterSpacing: '0.2em',
+                textTransform: 'uppercase',
+                opacity: 0.86,
+                transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * (index + 1) * 4}px, 0)` : 'none',
+              }}
+            >
+              {label}
+            </div>
+          ))}
+          <div
+            style={{
+              border: '1px solid rgba(248,250,252,0.12)',
+              background: 'linear-gradient(180deg, rgba(245,158,11,0.18), rgba(15,23,42,0.18))',
+              padding: 18,
+              display: 'grid',
+              gap: 10,
+              minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.22, 0.18, { min: 140, max: 220 }),
+            }}
+          >
+            <div style={{ fontSize: labelFontSize, letterSpacing: '0.28em', textTransform: 'uppercase', opacity: 0.58 }}>
+              Premiere Badge
+            </div>
+            <div style={{ fontSize: Math.round(runtime.height * 0.03), fontWeight: 800, letterSpacing: '-0.06em' }}>
+              Spotlight on the story
+            </div>
+          </div>
+        </div>
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultFestivalIntroBumper)

package/src/core/intro/default-festival-intro-bumper/index.ts

@@ -0,0 +1,11 @@
+export { DefaultFestivalIntroBumper } from './default-festival-intro-bumper'
+export { componentMetadata } from './default-festival-intro-bumper'
+export {
+  DefaultFestivalIntroBumperLandscape,
+  componentMetadata as DefaultFestivalIntroBumperLandscapeMetadata,
+} from './default-festival-intro-bumper-Landscape'
+export {
+  DefaultFestivalIntroBumperHorizontal,
+  componentMetadata as DefaultFestivalIntroBumperHorizontalMetadata,
+} from './default-festival-intro-bumper-Horizontal'
+

package/src/core/intro/default-intro-bumper/default-intro-bumper-Horizontal.tsx

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultIntroBumper, componentMetadata as baseComponentMetadata } from './default-intro-bumper'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  resourceKind: 'scene',
+  pluginKey: 'core.intro.default',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  name: 'DefaultIntroBumperHorizontal',
+  description: 'Cinematic intro bumper (Portrait 9:16 variant)',
+  sourceFile: 'src/core/intro/default-intro-bumper/default-intro-bumper-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultIntroBumperHorizontal = VideoComponent(componentMetadata)(function DefaultIntroBumperHorizontal(
+  props: ComponentProps<typeof DefaultIntroBumper>,
+) {
+  return <DefaultIntroBumper {...props} />
+})

package/src/core/intro/default-intro-bumper/default-intro-bumper-Landscape.tsx

@@ -0,0 +1,24 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultIntroBumper, componentMetadata as baseComponentMetadata } from './default-intro-bumper'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  resourceKind: 'scene',
+  pluginKey: 'core.intro.default',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  name: 'DefaultIntroBumperLandscape',
+  description: 'Cinematic intro bumper (Landscape 16:9 variant)',
+  sourceFile: 'src/core/intro/default-intro-bumper/default-intro-bumper-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultIntroBumperLandscape = VideoComponent(componentMetadata)(function DefaultIntroBumperLandscape(
+  props: ComponentProps<typeof DefaultIntroBumper>,
+) {
+  return <DefaultIntroBumper {...props} />
+})

package/src/core/intro/default-intro-bumper/default-intro-bumper.stories.tsx

@@ -0,0 +1,41 @@
+import { DefaultIntroBumperHorizontal } from './default-intro-bumper-Horizontal'
+import { DefaultIntroBumperLandscape } from './default-intro-bumper-Landscape'
+
+const meta = {
+  title: 'core/intro/default-intro-bumper/DefaultIntroBumperLandscape',
+  component: DefaultIntroBumperLandscape,
+  args: {
+    kicker: 'A Vibecuting Original',
+    title: 'Video Project Core',
+    subtitle: 'An editorial opener with a production rail, title block, and chapter-card feel.',
+    creditLine: 'Directed by Vibecuting Studio',
+    footer: 'Opening Sequence',
+    accent: '#020617',
+    secondaryAccent: '#1d4ed8',
+  },
+}
+
+export default meta
+
+export const Default = {}
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Horizontal = {
+  render: (storyArgs: typeof meta.args) => <DefaultIntroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}
+
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof meta.args) => <DefaultIntroBumperHorizontal {...storyArgs} />,
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}