@vibecuting/video-project-core 0.1.24 → 0.1.26

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

@@ -5,6 +5,7 @@ import {
   type BaseRemotionSceneProps,
   useRemotionSceneRuntime,
 } from '../../base'
+import { useSceneMotion } from '../../base'
 import {
   VideoComponent,
   defineComponentProjectComponentMetadata,
@@ -13,7 +14,12 @@ import {
 export interface DefaultIntroBumperProps extends BaseRemotionSceneProps {
   title: string
   subtitle?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
   accent?: string
+  secondaryAccent?: string
+  textColor?: string
   children?: ReactNode
 }
 
@@ -32,32 +38,178 @@ export function DefaultIntroBumper({
   name,
   title,
   subtitle,
+  kicker,
+  creditLine,
+  footer,
   accent,
+  secondaryAccent,
+  textColor,
   children,
 }: DefaultIntroBumperProps) {
   const runtime = useRemotionSceneRuntime()
-  const titleFontSize = Math.round(runtime.height * 0.062)
+  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
+      <BaseRemotionScene
       id={id}
       name={name}
       style={{
-        background: accent ?? '#0f172a',
-        color: '#fff',
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'flex-start',
-        padding: Math.round(runtime.height * 0.06),
-      }}
-    >
-      <section style={{ maxWidth: Math.round(runtime.width * 0.72) }}>
+        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, fontSize: subtitleFontSize, opacity: 0.82 }}>{subtitle}</p>
+          <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}
-        <h1 style={{ margin: '16px 0 0', fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
-        {children}
+        {children ? <div style={{ marginTop: Math.round(runtime.height * 0.01) }}>{children}</div> : null}
       </section>
     </BaseRemotionScene>
   )

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

@@ -0,0 +1,19 @@
+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

@@ -5,6 +5,7 @@ import {
   type BaseRemotionSceneProps,
   useRemotionSceneRuntime,
 } from '../../base'
+import { useSceneMotion } from '../../base'
 import {
   VideoComponent,
   defineComponentProjectComponentMetadata,
@@ -13,6 +14,12 @@ import {
 export interface DefaultOutroBumperProps extends BaseRemotionSceneProps {
   title: string
   note?: string
+  kicker?: string
+  creditLine?: string
+  footer?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
   children?: ReactNode
 }
 
@@ -26,27 +33,183 @@ export const componentMetadata = defineComponentProjectComponentMetadata({
   propsTypeName: 'DefaultOutroBumperProps',
 })
 
-export function DefaultOutroBumper({ id, name, title, note, children }: DefaultOutroBumperProps) {
+export function DefaultOutroBumper({
+  id,
+  name,
+  title,
+  note,
+  kicker,
+  creditLine,
+  footer,
+  accent,
+  secondaryAccent,
+  textColor,
+  children,
+}: DefaultOutroBumperProps) {
   const runtime = useRemotionSceneRuntime()
-  const titleFontSize = Math.round(runtime.height * 0.062)
+  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
+      <BaseRemotionScene
       id={id}
       name={name}
       style={{
-        background: '#e2e8f0',
-        color: '#0f172a',
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'flex-start',
-        padding: Math.round(runtime.height * 0.06),
-      }}
-    >
-      <footer style={{ maxWidth: Math.round(runtime.width * 0.72) }}>
-        <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
-        {note ? <p style={{ margin: '16px 0 0' }}>{note}</p> : null}
-        {children}
+        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>
   )

package/src/core/scene/2dscene/default-2d-scene-Horizontal.stories.tsx

@@ -0,0 +1,18 @@
+import { Default2DSceneHorizontal } from './default-2d-scene-Horizontal'
+
+const meta = {
+  title: 'core/scene/Default2DSceneHorizontal',
+  component: Default2DSceneHorizontal,
+  args: {
+    title: '2D Scene',
+    subtitle: 'Scene preview',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/2dscene/default-2d-scene-Horizontal.tsx

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

package/src/core/scene/2dscene/default-2d-scene-Landscape.tsx

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

package/src/core/scene/2dscene/default-2d-scene.stories.tsx

@@ -0,0 +1,18 @@
+import { Default2DSceneLandscape } from './default-2d-scene-Landscape'
+
+const meta = {
+  title: 'core/scene/Default2DSceneLandscape',
+  component: Default2DSceneLandscape,
+  args: {
+    title: '2D Scene',
+    subtitle: 'Scene preview',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/2dscene/default-2d-scene.tsx

@@ -4,7 +4,7 @@ import { z } from 'zod'
 import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
 
 import { defineSceneComponent } from '../../../plugins/scene-component'
-import { useRemotionSceneRuntime } from '../../../base'
+import { SceneMotionStack, useRemotionSceneRuntime } from '../../../base'
 import { useSceneRootProps } from '../../../runtime/use-scene-root-props'
 
 export interface Default2DSceneProps {
@@ -65,10 +65,12 @@ export const Default2DScene = VideoComponent(componentMetadata)(
             padding: Math.round(runtime.height * 0.06),
           }}
         >
-          <div style={{ width: '100%', maxWidth: Math.round(runtime.width * 0.72) }}>
-            <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
-            {subtitle ? <p style={{ margin: '16px 0 0', fontSize: subtitleFontSize }}>{subtitle}</p> : null}
-          </div>
+          <SceneMotionStack>
+            <div style={{ width: '100%', maxWidth: Math.round(runtime.width * 0.72) }}>
+              <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
+              {subtitle ? <p style={{ margin: '16px 0 0', fontSize: subtitleFontSize }}>{subtitle}</p> : null}
+            </div>
+          </SceneMotionStack>
         </AbsoluteFill>
       )
     },

package/src/core/scene/2dscene/index.ts

@@ -1 +1,3 @@
 export { Default2DScene } from './default-2d-scene'
+export { Default2DSceneLandscape, componentMetadata as Default2DSceneLandscapeMetadata } from './default-2d-scene-Landscape'
+export { Default2DSceneHorizontal, componentMetadata as Default2DSceneHorizontalMetadata } from './default-2d-scene-Horizontal'

package/src/core/scene/3dscene/default-3d-scene-Horizontal.stories.tsx

@@ -0,0 +1,18 @@
+import { Default3DSceneHorizontal } from './default-3d-scene-Horizontal'
+
+const meta = {
+  title: 'core/scene/Default3DSceneHorizontal',
+  component: Default3DSceneHorizontal,
+  args: {
+    title: '3D Scene',
+    depth: 320,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/3dscene/default-3d-scene-Horizontal.tsx

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

package/src/core/scene/3dscene/default-3d-scene-Landscape.tsx

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

package/src/core/scene/3dscene/default-3d-scene.stories.tsx

@@ -0,0 +1,18 @@
+import { Default3DSceneLandscape } from './default-3d-scene-Landscape'
+
+const meta = {
+  title: 'core/scene/Default3DSceneLandscape',
+  component: Default3DSceneLandscape,
+  args: {
+    title: '3D Scene',
+    depth: 320,
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/3dscene/default-3d-scene.tsx

@@ -4,7 +4,7 @@ import { z } from 'zod'
 import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
 
 import { defineSceneComponent } from '../../../plugins/scene-component'
-import { useRemotionSceneRuntime } from '../../../base'
+import { SceneMotionStack, useRemotionSceneRuntime } from '../../../base'
 import { useSceneRootProps } from '../../../runtime/use-scene-root-props'
 
 export interface Default3DSceneProps {
@@ -65,12 +65,18 @@ export const Default3DScene = VideoComponent(componentMetadata)(
             perspective: 1200,
           }}
         >
-          <div style={{ transform: `translateZ(${depth / 8}px) rotateY(-18deg)` }}>
-            <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
-            <p style={{ margin: '16px 0 0', fontSize: Math.round(runtime.height * 0.024), opacity: 0.8 }}>
-              Depth {depth}
-            </p>
-          </div>
+          <SceneMotionStack>
+            <div
+              style={{
+                transform: `translateZ(${depth / 8}px) rotateY(-18deg)`,
+              }}
+            >
+              <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
+              <p style={{ margin: '16px 0 0', fontSize: Math.round(runtime.height * 0.024), opacity: 0.8 }}>
+                Depth {depth}
+              </p>
+            </div>
+          </SceneMotionStack>
         </AbsoluteFill>
       )
     },