@vibecuting/video-project-core 0.1.26 → 0.1.28

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

@@ -1,218 +0,0 @@
-import type { ReactNode } from 'react'
-
-import {
-  BaseRemotionScene,
-  type BaseRemotionSceneProps,
-  useRemotionSceneRuntime,
-} from '../../base'
-import { useSceneMotion } from '../../base'
-import {
-  VideoComponent,
-  defineComponentProjectComponentMetadata,
-} from '@vibecuting/component-project-helper'
-
-export interface DefaultIntroBumperProps 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: 'DefaultIntroBumper',
-  description: 'Default remotion intro bumper',
-  sourceFile: 'src/core/intro/default-intro-bumper.tsx',
-  aspectRatio: '16:9',
-  sceneType: 'intro',
-  tags: ['intro', 'bumper'],
-  propsTypeName: 'DefaultIntroBumperProps',
-})
-
-export function DefaultIntroBumper({
-  id,
-  name,
-  title,
-  subtitle,
-  kicker,
-  creditLine,
-  footer,
-  accent,
-  secondaryAccent,
-  textColor,
-  children,
-}: DefaultIntroBumperProps) {
-  const runtime = useRemotionSceneRuntime()
-  const motion = useSceneMotion()
-  const titleFontSize = Math.round(runtime.height * 0.068)
-  const subtitleFontSize = Math.round(runtime.height * 0.024)
-  const kickerFontSize = Math.round(runtime.height * 0.018)
-  const footerFontSize = Math.round(runtime.height * 0.016)
-  const mainColor = textColor ?? '#f8fafc'
-  const primaryBackground = accent ?? '#050816'
-  const highlightBackground = secondaryAccent ?? '#1f2937'
-
-  return (
-      <BaseRemotionScene
-      id={id}
-      name={name}
-      style={{
-        background: `radial-gradient(circle at top, ${highlightBackground} 0%, ${primaryBackground} 42%, #020617 100%)`,
-          color: mainColor,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: Math.round(runtime.height * 0.07),
-        }}
-      >
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          inset: 0,
-          background:
-            'radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, rgba(2,6,23,0.12) 48%, rgba(2,6,23,0.38) 100%)',
-          pointerEvents: 'none',
-        }}
-      />
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          height: Math.round(runtime.height * 0.085),
-          background: 'linear-gradient(180deg, rgba(2,6,23,0.96) 0%, rgba(2,6,23,0.22) 100%)',
-          pointerEvents: 'none',
-        }}
-      />
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          height: Math.round(runtime.height * 0.085),
-          background: 'linear-gradient(0deg, rgba(2,6,23,0.96) 0%, rgba(2,6,23,0.22) 100%)',
-          pointerEvents: 'none',
-        }}
-      />
-      <section
-        style={{
-          position: 'relative',
-          zIndex: 1,
-          width: '100%',
-          maxWidth: Math.round(runtime.width * 0.78),
-          textAlign: 'center',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: Math.round(runtime.height * 0.02),
-        }}
-      >
-        <p
-          style={{
-            margin: 0,
-            padding: `${Math.round(runtime.height * 0.008)}px ${Math.round(runtime.width * 0.02)}px`,
-            border: '1px solid rgba(248,250,252,0.16)',
-            borderRadius: 999,
-            fontSize: kickerFontSize,
-            letterSpacing: '0.28em',
-            textTransform: 'uppercase',
-            opacity: 0.68,
-            backdropFilter: 'blur(8px)',
-            background: 'rgba(15, 23, 42, 0.12)',
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 8}px, 0)` : 'none',
-          }}
-        >
-          Intro Sequence
-        </p>
-        {kicker ? (
-          <p
-            style={{
-              margin: 0,
-              fontSize: kickerFontSize,
-              letterSpacing: '0.32em',
-              textTransform: 'uppercase',
-              opacity: 0.74,
-            }}
-          >
-            {kicker}
-          </p>
-        ) : null}
-        <div
-          style={{
-            width: Math.round(runtime.width * 0.18),
-            height: 1,
-            background:
-              'linear-gradient(90deg, transparent 0%, rgba(248,250,252,0.9) 50%, transparent 100%)',
-          }}
-        />
-        <h1
-          style={{
-            margin: 0,
-            fontSize: titleFontSize,
-            lineHeight: 0.96,
-            letterSpacing: '-0.05em',
-            textTransform: 'uppercase',
-            textShadow: '0 18px 48px rgba(15, 23, 42, 0.55)',
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 10}px, 0)` : 'none',
-          }}
-        >
-          {title}
-        </h1>
-        {subtitle ? (
-          <p
-          style={{
-            margin: 0,
-            maxWidth: Math.round(runtime.width * 0.56),
-            fontSize: subtitleFontSize,
-            lineHeight: 1.6,
-            opacity: 0.84,
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 6}px, 0)` : 'none',
-          }}
-        >
-            {subtitle}
-          </p>
-        ) : null}
-        {creditLine ? (
-          <p
-            style={{
-              margin: 0,
-              fontSize: footerFontSize,
-            letterSpacing: '0.22em',
-            textTransform: 'uppercase',
-            opacity: 0.72,
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 4}px, 0)` : 'none',
-          }}
-        >
-            {creditLine}
-          </p>
-        ) : null}
-        {footer ? (
-          <p
-            style={{
-              margin: 0,
-              fontSize: footerFontSize,
-            letterSpacing: '0.2em',
-            textTransform: 'uppercase',
-            opacity: 0.54,
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 4}px, 0)` : 'none',
-          }}
-        >
-            {footer}
-          </p>
-        ) : null}
-        {children ? <div style={{ marginTop: Math.round(runtime.height * 0.01) }}>{children}</div> : null}
-      </section>
-    </BaseRemotionScene>
-  )
-}
-
-VideoComponent(componentMetadata)(DefaultIntroBumper)

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

@@ -1,19 +0,0 @@
-import { DefaultOutroBumper } from './default-outro-bumper'
-
-const meta = {
-  title: 'core/outro/DefaultOutroBumper',
-  component: DefaultOutroBumper,
-  args: {
-    kicker: 'The End',
-    title: 'Thanks for Watching',
-    note: 'A centered closing card that feels like a real film end slate instead of a plain footer.',
-    creditLine: 'Written and produced for Vibecuting',
-    footer: 'End Credits',
-    accent: '#0f172a',
-    secondaryAccent: '#475569',
-  },
-}
-
-export default meta
-
-export const Default = {}

package/src/core/outro/default-outro-bumper.tsx

@@ -1,218 +0,0 @@
-import type { ReactNode } from 'react'
-
-import {
-  BaseRemotionScene,
-  type BaseRemotionSceneProps,
-  useRemotionSceneRuntime,
-} from '../../base'
-import { useSceneMotion } from '../../base'
-import {
-  VideoComponent,
-  defineComponentProjectComponentMetadata,
-} from '@vibecuting/component-project-helper'
-
-export interface DefaultOutroBumperProps extends BaseRemotionSceneProps {
-  title: string
-  note?: string
-  kicker?: string
-  creditLine?: string
-  footer?: string
-  accent?: string
-  secondaryAccent?: string
-  textColor?: string
-  children?: ReactNode
-}
-
-export const componentMetadata = defineComponentProjectComponentMetadata({
-  name: 'DefaultOutroBumper',
-  description: 'Default remotion outro bumper',
-  sourceFile: 'src/core/outro/default-outro-bumper.tsx',
-  aspectRatio: '16:9',
-  sceneType: 'outro',
-  tags: ['outro', 'bumper'],
-  propsTypeName: 'DefaultOutroBumperProps',
-})
-
-export function DefaultOutroBumper({
-  id,
-  name,
-  title,
-  note,
-  kicker,
-  creditLine,
-  footer,
-  accent,
-  secondaryAccent,
-  textColor,
-  children,
-}: DefaultOutroBumperProps) {
-  const runtime = useRemotionSceneRuntime()
-  const motion = useSceneMotion()
-  const titleFontSize = Math.round(runtime.height * 0.066)
-  const noteFontSize = Math.round(runtime.height * 0.024)
-  const kickerFontSize = Math.round(runtime.height * 0.018)
-  const footerFontSize = Math.round(runtime.height * 0.016)
-  const mainColor = textColor ?? '#f8fafc'
-  const primaryBackground = accent ?? '#0f172a'
-  const highlightBackground = secondaryAccent ?? '#334155'
-
-  return (
-      <BaseRemotionScene
-      id={id}
-      name={name}
-      style={{
-        background: `radial-gradient(circle at bottom, ${highlightBackground} 0%, ${primaryBackground} 45%, #020617 100%)`,
-          color: mainColor,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: Math.round(runtime.height * 0.07),
-        }}
-      >
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          inset: 0,
-          background:
-            'radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, rgba(2,6,23,0.12) 48%, rgba(2,6,23,0.38) 100%)',
-          pointerEvents: 'none',
-        }}
-      />
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          height: Math.round(runtime.height * 0.085),
-          background: 'linear-gradient(180deg, rgba(2,6,23,0.96) 0%, rgba(2,6,23,0.22) 100%)',
-          pointerEvents: 'none',
-        }}
-      />
-      <div
-        aria-hidden="true"
-        style={{
-          position: 'absolute',
-          left: 0,
-          right: 0,
-          bottom: 0,
-          height: Math.round(runtime.height * 0.085),
-          background: 'linear-gradient(0deg, rgba(2,6,23,0.96) 0%, rgba(2,6,23,0.22) 100%)',
-          pointerEvents: 'none',
-        }}
-      />
-      <footer
-        style={{
-          position: 'relative',
-          zIndex: 1,
-          width: '100%',
-          maxWidth: Math.round(runtime.width * 0.78),
-          textAlign: 'center',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: Math.round(runtime.height * 0.02),
-        }}
-      >
-        <p
-          style={{
-            margin: 0,
-            padding: `${Math.round(runtime.height * 0.008)}px ${Math.round(runtime.width * 0.02)}px`,
-            border: '1px solid rgba(248,250,252,0.16)',
-            borderRadius: 999,
-            fontSize: kickerFontSize,
-            letterSpacing: '0.28em',
-            textTransform: 'uppercase',
-            opacity: 0.68,
-            backdropFilter: 'blur(8px)',
-            background: 'rgba(15, 23, 42, 0.12)',
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 8}px, 0)` : 'none',
-          }}
-        >
-          End Credits
-        </p>
-        {kicker ? (
-          <p
-            style={{
-              margin: 0,
-              fontSize: kickerFontSize,
-              letterSpacing: '0.32em',
-              textTransform: 'uppercase',
-              opacity: 0.72,
-            }}
-          >
-            {kicker}
-          </p>
-        ) : null}
-        <div
-          style={{
-            width: Math.round(runtime.width * 0.18),
-            height: 1,
-            background:
-              'linear-gradient(90deg, transparent 0%, rgba(248,250,252,0.9) 50%, transparent 100%)',
-          }}
-        />
-        <h1
-          style={{
-            margin: 0,
-            fontSize: titleFontSize,
-            lineHeight: 0.96,
-            letterSpacing: '-0.05em',
-            textTransform: 'uppercase',
-            textShadow: '0 18px 48px rgba(15, 23, 42, 0.55)',
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 10}px, 0)` : 'none',
-          }}
-        >
-          {title}
-        </h1>
-        {note ? (
-          <p
-            style={{
-              margin: 0,
-              maxWidth: Math.round(runtime.width * 0.56),
-              fontSize: noteFontSize,
-            lineHeight: 1.6,
-            opacity: 0.84,
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 6}px, 0)` : 'none',
-          }}
-        >
-            {note}
-          </p>
-        ) : null}
-        {creditLine ? (
-          <p
-            style={{
-              margin: 0,
-              fontSize: footerFontSize,
-            letterSpacing: '0.22em',
-            textTransform: 'uppercase',
-            opacity: 0.72,
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 4}px, 0)` : 'none',
-          }}
-        >
-            {creditLine}
-          </p>
-        ) : null}
-        {footer ? (
-          <p
-            style={{
-              margin: 0,
-              fontSize: footerFontSize,
-            letterSpacing: '0.2em',
-            textTransform: 'uppercase',
-            opacity: 0.54,
-            transform: motion.isAnimation ? `translate3d(0, ${(1 - motion.progress) * 4}px, 0)` : 'none',
-          }}
-        >
-            {footer}
-          </p>
-        ) : null}
-        {children ? <div style={{ marginTop: Math.round(runtime.height * 0.01) }}>{children}</div> : null}
-      </footer>
-    </BaseRemotionScene>
-  )
-}
-
-VideoComponent(componentMetadata)(DefaultOutroBumper)