@vibecuting/video-project-core 0.1.26 → 0.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibecuting/video-project-core",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
   "main": "src/index.ts",
@@ -16,13 +16,13 @@
     "dev": "storybook dev -p 6010 --host 0.0.0.0",
     "preview": "storybook dev -p 6010 --host 0.0.0.0",
     "build:storybook": "storybook build",
-    "lint": "node ../../../scripts/run-eslint.mjs .",
-    "lint:fix": "node ../../../scripts/run-eslint.mjs . --fix",
+    "lint": "node ../../../scripts/run-eslint.mjs src .storybook",
+    "lint:fix": "node ../../../scripts/run-eslint.mjs src .storybook --fix",
     "typecheck": "pnpm exec tsc -p tsconfig.json --noEmit",
     "test": "pnpm exec vitest run"
   },
   "dependencies": {
-    "@vibecuting/component-project-helper": "0.1.26",
+    "@vibecuting/component-project-helper": "0.1.28",
     "@remotion/transitions": "4.0.473",
     "mermaid": "^11.12.2",
     "react": "^19.0.0",

package/src/base/BaseRemotionScene.tsx

@@ -1,6 +1,5 @@
 import type { CSSProperties, ReactNode } from 'react'
 import { useId } from 'react'
-import { AbsoluteFill } from 'remotion'
 
 import { SceneMotionStack } from './use-scene-child-motion'
 import { useResolvedSceneTheme, useSceneConfig } from './use-scene-config'
@@ -27,7 +26,7 @@ export function BaseRemotionScene({
   const resolvedTheme = useResolvedSceneTheme()
 
   return (
-    <AbsoluteFill
+    <div
       id={resolvedId}
       data-scene-name={name}
       data-scene-display-mode={sceneConfig.sceneType}
@@ -37,11 +36,13 @@ export function BaseRemotionScene({
         ...(sceneConfig.sceneToken ? {} : (resolvedTheme?.variables ?? {})),
         overflow: 'hidden',
         position: 'relative',
+        width: '100%',
+        height: '100%',
         isolation: 'isolate',
         ...style,
       }}
     >
       <SceneMotionStack>{children}</SceneMotionStack>
-    </AbsoluteFill>
+    </div>
   )
 }

package/src/core/index.test.ts

@@ -3,6 +3,14 @@ import { describe, expect, it } from 'vitest'
 import {
   Default2DScene,
   Default3DScene,
+  DefaultLivePhotoScene,
+  DefaultEffectsPhotoScene,
+  Default3DVRPhotoScene,
+  DefaultPhotoStripScene,
+  DefaultPhotoWallScene,
+  DefaultVideoScene,
+  DefaultVideoSplitScene,
+  DefaultVideoWallScene,
   componentMetadata as abstractBackgroundCoverMetadata,
   componentMetadata as annotationMetadata,
   componentMetadata as beforeAfterMetadata,
@@ -17,6 +25,18 @@ import {
   componentMetadata as calloutMetadata,
   componentMetadata as heroMetadata,
   componentMetadata as imageHeroMetadata,
+  DefaultLivePhotoSceneMetadata,
+  DefaultEffectsPhotoSceneMetadata,
+  DefaultEffectsPhotoSceneLandscapeMetadata,
+  DefaultEffectsPhotoSceneHorizontalMetadata,
+  Default3DVRPhotoSceneMetadata,
+  Default3DVRPhotoSceneLandscapeMetadata,
+  Default3DVRPhotoSceneHorizontalMetadata,
+  DefaultPhotoStripSceneMetadata,
+  DefaultPhotoWallSceneMetadata,
+  DefaultVideoSceneMetadata,
+  DefaultVideoSplitSceneMetadata,
+  DefaultVideoWallSceneMetadata,
   componentMetadata as comparisonMetadata,
   DefaultComparisonSlide,
   componentMetadata as codeSnippetMetadata,
@@ -104,9 +124,29 @@ describe('video-project-core demo exports', () => {
     expect(DefaultOutroBumper).toBeTypeOf('function')
     expect(Default2DScene).toBeTypeOf('function')
     expect(Default3DScene).toBeTypeOf('function')
+    expect(DefaultLivePhotoScene).toBeTypeOf('function')
+    expect(DefaultEffectsPhotoScene).toBeTypeOf('function')
+    expect(Default3DVRPhotoScene).toBeTypeOf('function')
+    expect(DefaultEffectsPhotoSceneMetadata.sceneFamily).toBe('custom')
+    expect(DefaultEffectsPhotoSceneLandscapeMetadata.sceneFamily).toBe('custom')
+    expect(DefaultEffectsPhotoSceneHorizontalMetadata.sceneFamily).toBe('custom')
+    expect(Default3DVRPhotoSceneMetadata.sceneFamily).toBe('custom')
+    expect(Default3DVRPhotoSceneLandscapeMetadata.sceneFamily).toBe('custom')
+    expect(Default3DVRPhotoSceneHorizontalMetadata.sceneFamily).toBe('custom')
+    expect(DefaultPhotoWallScene).toBeTypeOf('function')
+    expect(DefaultPhotoStripScene).toBeTypeOf('function')
+    expect(DefaultVideoScene).toBeTypeOf('function')
+    expect(DefaultVideoSplitScene).toBeTypeOf('function')
+    expect(DefaultVideoWallScene).toBeTypeOf('function')
     expect(DefaultSlideScene).toBeTypeOf('function')
     expect(heroMetadata.sceneFamily).toBe('slide')
     expect(imageHeroMetadata.sceneFamily).toBe('slide')
+    expect(DefaultLivePhotoSceneMetadata.sceneFamily).toBe('custom')
+    expect(DefaultPhotoWallSceneMetadata.sceneFamily).toBe('custom')
+    expect(DefaultPhotoStripSceneMetadata.sceneFamily).toBe('custom')
+    expect(DefaultVideoSceneMetadata.sceneFamily).toBe('custom')
+    expect(DefaultVideoSplitSceneMetadata.sceneFamily).toBe('custom')
+    expect(DefaultVideoWallSceneMetadata.sceneFamily).toBe('custom')
     expect(splitMetadata.sceneFamily).toBe('slide')
     expect(chapterMetadata.sceneFamily).toBe('slide')
     expect(abstractBackgroundCoverMetadata.sceneFamily).toBe('slide')

package/src/core/intro/_shared/intro-layout.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+
+import { getIntroBodyMaxWidth, getIntroLineClamp, getIntroPanelMinHeight, getIntroPanelPadding } from './intro-layout'
+
+describe('intro layout helpers', () => {
+  it('keeps portrait constraints tighter than landscape ones', () => {
+    expect(getIntroBodyMaxWidth(1080, false, 0.9, 0.42, { min: 240, max: 760 })).toBeGreaterThan(
+      getIntroBodyMaxWidth(1080, true, 0.9, 0.42, { min: 240, max: 760 }),
+    )
+
+    expect(getIntroPanelMinHeight(1920, true, 0.32, 0.22, { min: 160, max: 360 })).toBeLessThanOrEqual(360)
+    expect(getIntroPanelPadding(1920, true, 0.02, 0.014, { min: 12, max: 24 })).toBeGreaterThanOrEqual(12)
+    expect(getIntroLineClamp(3)).toMatchObject({
+      display: '-webkit-box',
+      WebkitLineClamp: 3,
+    })
+  })
+})

package/src/core/intro/_shared/intro-layout.ts

@@ -0,0 +1,50 @@
+export function getIntroBodyMaxWidth(
+  width: number,
+  portrait: boolean,
+  landscapeRatio: number,
+  portraitRatio: number,
+  options?: { min?: number; max?: number },
+) {
+  const ratio = portrait ? portraitRatio : landscapeRatio
+  const minimum = options?.min ?? 240
+  const maximum = options?.max ?? 760
+
+  return Math.min(Math.max(Math.round(width * ratio), minimum), maximum)
+}
+
+export function getIntroPanelMinHeight(
+  height: number,
+  portrait: boolean,
+  landscapeRatio: number,
+  portraitRatio: number,
+  options?: { min?: number; max?: number },
+) {
+  const ratio = portrait ? portraitRatio : landscapeRatio
+  const minimum = options?.min ?? 120
+  const maximum = options?.max ?? 380
+
+  return Math.min(Math.max(Math.round(height * ratio), minimum), maximum)
+}
+
+export function getIntroPanelPadding(
+  height: number,
+  portrait: boolean,
+  landscapeRatio: number,
+  portraitRatio: number,
+  options?: { min?: number; max?: number },
+) {
+  const ratio = portrait ? portraitRatio : landscapeRatio
+  const minimum = options?.min ?? 12
+  const maximum = options?.max ?? 24
+
+  return Math.min(Math.max(Math.round(height * ratio), minimum), maximum)
+}
+
+export function getIntroLineClamp(lines: number) {
+  return {
+    display: '-webkit-box',
+    WebkitLineClamp: lines,
+    WebkitBoxOrient: 'vertical' as const,
+    overflow: 'hidden',
+  }
+}

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

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

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

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

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

@@ -0,0 +1,31 @@
+import { DefaultCyberpunkIntroBumperHoloHorizontal } from './default-cyberpunk-intro-bumper-Horizontal'
+import { DefaultCyberpunkIntroBumperHoloLandscape } from './default-cyberpunk-intro-bumper-Landscape'
+
+const args = {
+  kicker: 'Holo Signal',
+  title: 'Neon Ghost',
+  subtitle: 'A hologram opener with telemetry rails, scan rings, and a denser signal stack.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'Opening Sequence',
+  accent: '#030712',
+  secondaryAccent: '#67e8f9',
+}
+
+const meta = {
+  title: 'core/intro/cyberpunk-intro-holo/DefaultCyberpunkIntroBumperHoloLandscape',
+  component: DefaultCyberpunkIntroBumperHoloLandscape,
+  args,
+}
+
+export default meta
+
+export const Default = {}
+export const Animated = { parameters: { scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultCyberpunkIntroBumperHoloHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultCyberpunkIntroBumperHoloHorizontal {...storyArgs} />,
+  parameters: { scenePreviewMode: 'animation', scenePreviewAspectRatio: '9:16' },
+}

package/src/core/intro/cyberpunk-intro-holo/default-cyberpunk-intro-bumper.tsx

@@ -0,0 +1,118 @@
+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, getIntroPanelPadding } from '../_shared/intro-layout'
+
+export interface DefaultCyberpunkIntroBumperHoloProps 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: 'DefaultCyberpunkIntroBumperHolo',
+  description: 'Cyberpunk hologram intro with scan ring and telemetry stack, optimized for landscape and portrait previews',
+  sourceFile: 'src/core/intro/cyberpunk-intro-holo/default-cyberpunk-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'cyberpunk', 'hologram', 'future'],
+  propsTypeName: 'DefaultCyberpunkIntroBumperHoloProps',
+})
+
+export function DefaultCyberpunkIntroBumperHolo({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultCyberpunkIntroBumperHoloProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? `linear-gradient(180deg, ${accent ?? '#020617'} 0%, #030712 42%, #000000 100%)`
+          : `radial-gradient(circle at 18% 20%, ${secondaryAccent ?? '#67e8f9'} 0%, ${accent ?? '#030712'} 40%, #000000 100%)`,
+        color: textColor ?? '#ecfeff',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.07),
+      }}
+    >
+      <section style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.84fr) minmax(300px, 1.16fr)', gap: portrait ? 18 : 24, alignItems: 'stretch', minWidth: 0, minHeight: 0, overflow: 'hidden' }}>
+        <div style={{ display: 'grid', gap: 12, textAlign: portrait ? 'center' : 'left', minWidth: 0, alignContent: 'center' }}>
+          <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.68 }}>
+            {kicker ?? 'Holographic Signal'}
+          </p>
+          <h1 style={{ margin: 0, fontSize: portrait ? Math.round(runtime.height * 0.078) : Math.round(runtime.height * 0.072), lineHeight: 0.9, letterSpacing: '-0.08em', textTransform: 'uppercase', textShadow: '0 0 24px rgba(103,232,249,0.28)', 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.42, 1, { min: 240, max: 680 }), fontSize: Math.round(runtime.height * 0.023), lineHeight: 1.56, 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: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.72 }}>{creditLine}</span> : null}
+            {footer ? <span style={{ fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.52 }}>{footer}</span> : null}
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', gap: 12, alignContent: 'center', minWidth: 0 }}>
+          <div style={{ width: '100%', minWidth: 0, border: '1px solid rgba(236,254,255,0.14)', background: 'linear-gradient(160deg, rgba(103,232,249,0.14) 0%, rgba(168,85,247,0.16) 34%, rgba(2,6,23,0.96) 100%)', padding: getIntroPanelPadding(runtime.height, portrait, 0.008, 0.007, { min: 12, max: 18 }), display: 'grid', gap: 12, overflow: 'hidden', minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.3, 0.24, { min: 220, max: 340 }) }}>
+            <div style={{ display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.88fr) minmax(0, 1.12fr)', gap: 12, minWidth: 0 }}>
+              <div style={{ border: '1px solid rgba(236,254,255,0.08)', background: 'rgba(0,0,0,0.16)', padding: 14, display: 'grid', placeItems: 'center', minHeight: portrait ? 120 : 220 }}>
+                <div style={{ display: 'grid', gap: 8, textAlign: 'center' }}>
+                  <div style={{ fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Neon Grid</div>
+                  <div style={{ fontSize: Math.round(runtime.height * 0.029), fontWeight: 800, letterSpacing: '-0.06em' }}>Boot sequence online</div>
+                </div>
+              </div>
+              <div style={{ display: 'grid', gap: 10, alignContent: 'center', minWidth: 0 }}>
+                {['Scan', 'Link', 'Pulse', 'Node'].map((label, index) => (
+                  <div
+                    key={label}
+                    style={{
+                      border: '1px solid rgba(236,254,255,0.1)',
+                      background: index === 2 ? 'rgba(103,232,249,0.12)' : 'rgba(0,0,0,0.16)',
+                      padding: '12px 14px',
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      gap: 12,
+                      textTransform: 'uppercase',
+                      letterSpacing: '0.2em',
+                      fontSize: Math.round(runtime.height * 0.014),
+                      opacity: 0.8,
+                      minWidth: 0,
+                    }}
+                  >
+                    <span style={{ minWidth: 0 }}>{label}</span>
+                    <span style={{ minWidth: 0 }}>{index === 0 ? 'active' : index === 1 ? 'sync' : index === 2 ? 'hot' : 'ready'}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {children ? <div style={{ position: 'absolute', inset: 'auto 0 8%', display: 'grid', placeItems: 'center' }}>{children}</div> : null}
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultCyberpunkIntroBumperHolo)

package/src/core/intro/cyberpunk-intro-holo/index.ts

@@ -0,0 +1,11 @@
+export { DefaultCyberpunkIntroBumperHolo } from './default-cyberpunk-intro-bumper'
+export { componentMetadata } from './default-cyberpunk-intro-bumper'
+export {
+  DefaultCyberpunkIntroBumperHoloLandscape,
+  componentMetadata as DefaultCyberpunkIntroBumperHoloLandscapeMetadata,
+} from './default-cyberpunk-intro-bumper-Landscape'
+export {
+  DefaultCyberpunkIntroBumperHoloHorizontal,
+  componentMetadata as DefaultCyberpunkIntroBumperHoloHorizontalMetadata,
+} from './default-cyberpunk-intro-bumper-Horizontal'
+

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { DefaultCyberpunkIntroBumperNeonHorizontal } from './default-cyberpunk-intro-bumper-Horizontal'
+import { DefaultCyberpunkIntroBumperNeonLandscape } from './default-cyberpunk-intro-bumper-Landscape'
+
+const args = {
+  kicker: 'Cyberpunk Neon',
+  title: 'Night Circuit',
+  subtitle: 'A neon signal wall with status rails, node cards, and future-noir console energy.',
+  creditLine: 'A Vibecuting Original',
+  footer: 'Opening Sequence',
+  accent: '#030712',
+  secondaryAccent: '#22d3ee',
+}
+
+const meta = {
+  title: 'core/intro/cyberpunk-intro-neon/DefaultCyberpunkIntroBumperNeon',
+  component: DefaultCyberpunkIntroBumperNeonLandscape,
+  args,
+}
+
+export default meta
+export const Landscape = { parameters: { scenePreviewAspectRatio: '16:9' } }
+export const LandscapeAnimated = { parameters: { scenePreviewAspectRatio: '16:9', scenePreviewMode: 'animation' } }
+export const Horizontal = {
+  render: (storyArgs: typeof args) => <DefaultCyberpunkIntroBumperNeonHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16' },
+}
+export const HorizontalAnimated = {
+  render: (storyArgs: typeof args) => <DefaultCyberpunkIntroBumperNeonHorizontal {...storyArgs} />,
+  parameters: { scenePreviewAspectRatio: '9:16', scenePreviewMode: 'animation' },
+}

package/src/core/intro/cyberpunk-intro-neon/default-cyberpunk-intro-bumper.tsx

@@ -0,0 +1,108 @@
+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 DefaultCyberpunkIntroBumperNeonProps 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: 'DefaultCyberpunkIntroBumperNeon',
+  description: 'Cyberpunk neon intro with a signal wall and status rails',
+  sourceFile: 'src/core/intro/cyberpunk-intro-neon/default-cyberpunk-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper', 'cyberpunk', 'neon', 'future'],
+  propsTypeName: 'DefaultCyberpunkIntroBumperNeonProps',
+})
+
+export function DefaultCyberpunkIntroBumperNeon({
+  id,
+  name,
+  title,
+  subtitle,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultCyberpunkIntroBumperNeonProps) {
+  const runtime = useRemotionSceneRuntime()
+  const motion = useSceneMotion()
+  const portrait = runtime.height > runtime.width
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: portrait
+          ? `linear-gradient(180deg, ${accent ?? '#0f172a'} 0%, #030712 42%, #000000 100%)`
+          : `radial-gradient(circle at 20% 20%, ${secondaryAccent ?? '#22d3ee'} 0%, ${accent ?? '#030712'} 40%, #000000 100%)`,
+        color: textColor ?? '#ecfeff',
+        display: 'grid',
+        placeItems: 'center',
+        padding: Math.round(runtime.height * 0.07),
+      }}
+    >
+      <section style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%', display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 0.92fr) minmax(300px, 1.08fr)', gap: portrait ? 18 : 24, alignItems: 'stretch', minWidth: 0, minHeight: 0 }}>
+        <div style={{ display: 'grid', gap: 12, textAlign: portrait ? 'center' : 'left', minWidth: 0, alignContent: 'center' }}>
+          <p style={{ margin: 0, fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.68 }}>
+            {kicker ?? 'Neon Night'}
+          </p>
+          <h1 style={{ margin: 0, fontSize: portrait ? Math.round(runtime.height * 0.078) : Math.round(runtime.height * 0.072), lineHeight: 0.9, letterSpacing: '-0.08em', textTransform: 'uppercase', textShadow: '0 0 24px rgba(34,211,238,0.26)', 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.42, 1, { min: 240, max: 680 }), fontSize: Math.round(runtime.height * 0.023), lineHeight: 1.56, 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: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.72 }}>{creditLine}</span> : null}
+            {footer ? <span style={{ fontSize: Math.round(runtime.height * 0.015), letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.52 }}>{footer}</span> : null}
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', gap: 12, alignContent: 'center', minWidth: 0 }}>
+          <div style={{ width: '100%', minWidth: 0, border: '1px solid rgba(236,254,255,0.14)', background: 'linear-gradient(160deg, rgba(34,211,238,0.14) 0%, rgba(168,85,247,0.18) 34%, rgba(2,6,23,0.96) 100%)', padding: 16, display: 'grid', gap: 12, overflow: 'hidden', minHeight: getIntroPanelMinHeight(runtime.height, portrait, 0.3, 0.24, { min: 220, max: 340 }) }}>
+            <div style={{ display: 'grid', gridTemplateColumns: portrait ? '1fr' : 'minmax(0, 1.1fr) minmax(0, 0.9fr)', gap: 12, minWidth: 0 }}>
+              <div style={{ display: 'grid', gap: 10 }}>
+                <div style={{ fontSize: Math.round(runtime.height * 0.017), letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.58 }}>Signal Spikes</div>
+                <div style={{ fontSize: Math.round(runtime.height * 0.029), fontWeight: 800, letterSpacing: '-0.06em' }}>Hack the skyline</div>
+                <div style={{ border: '1px solid rgba(236,254,255,0.1)', padding: '12px 14px', background: 'rgba(0,0,0,0.18)', display: 'grid', gap: 8 }}>
+                  {['Ping', 'Firewall', 'Cipher'].map((label, index) => (
+                    <div key={label} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: Math.round(runtime.height * 0.017), opacity: 0.82 }}>
+                      <span style={{ letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.56 }}>{label}</span>
+                      <span>{index === 0 ? 'Live' : index === 1 ? 'Active' : 'Locked'}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+              <div style={{ display: 'grid', gap: 10, minWidth: 0 }}>
+                {['Node A', 'Node B', 'Node C'].map((label, index) => (
+                  <div key={label} style={{ minHeight: portrait ? 56 : 70, border: '1px solid rgba(236,254,255,0.1)', background: index === 1 ? 'rgba(34,211,238,0.12)' : 'rgba(0,0,0,0.16)', display: 'grid', placeItems: 'center', textTransform: 'uppercase', letterSpacing: '0.22em', fontSize: Math.round(runtime.height * 0.015), opacity: 0.76 }}>
+                    {label}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      {children ? <div style={{ position: 'absolute', inset: 'auto 0 8%', display: 'grid', placeItems: 'center' }}>{children}</div> : null}
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultCyberpunkIntroBumperNeon)

package/src/core/intro/cyberpunk-intro-neon/index.ts

@@ -0,0 +1,10 @@
+export { DefaultCyberpunkIntroBumperNeon } from './default-cyberpunk-intro-bumper'
+export { componentMetadata } from './default-cyberpunk-intro-bumper'
+export {
+  DefaultCyberpunkIntroBumperNeonLandscape,
+  componentMetadata as DefaultCyberpunkIntroBumperNeonLandscapeMetadata,
+} from './default-cyberpunk-intro-bumper-Landscape'
+export {
+  DefaultCyberpunkIntroBumperNeonHorizontal,
+  componentMetadata as DefaultCyberpunkIntroBumperNeonHorizontalMetadata,
+} from './default-cyberpunk-intro-bumper-Horizontal'

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

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