@vibecuting/video-project-core 0.1.29 → 0.1.31

package/src/core/scene/html-in-canvas/shared/default-html-in-canvas-scene.tsx

@@ -0,0 +1,1315 @@
+import type { ReactNode } from 'react'
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+import { HtmlInCanvas, spring, useCurrentFrame, useVideoConfig } from 'remotion'
+
+import { BaseRemotionScene, type BaseRemotionSceneProps, useRemotionSceneRuntime, useSceneConfig } from '../../../../base'
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+
+type HtmlCanvasTemplate = 'browser' | 'dashboard' | 'editor' | 'docs'
+
+export interface DefaultHtmlInCanvasSceneProps extends BaseRemotionSceneProps {
+  sceneId?: string
+  sceneName?: string
+  title?: string
+  subtitle?: string
+  badge?: string
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+  html?: string
+}
+
+type HtmlCanvasSceneConfig = {
+  name: string
+  description: string
+  sourceFile: string
+  pluginKey: string
+  aspectRatio: '16:9' | '9:16'
+  template: HtmlCanvasTemplate
+}
+
+export function HtmlCanvasSurface({
+  width,
+  height,
+  children,
+  theme,
+}: {
+  width: number
+  height: number
+  children: ReactNode
+  theme: string
+}) {
+  if (!HtmlInCanvas.isSupported()) {
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          overflow: 'hidden',
+          background: theme,
+        }}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <HtmlInCanvas
+      width={width}
+      height={height}
+      durationInFrames={150}
+      pixelDensity={2}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        overflow: 'hidden',
+        background: theme,
+      }}
+    >
+      {children}
+    </HtmlInCanvas>
+  )
+}
+
+export function HtmlMarkupSurface({
+  width,
+  height,
+  html,
+  theme,
+}: {
+  width: number
+  height: number
+  html: string
+  theme: string
+}) {
+  const markup = html.trim()
+  const content = (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        overflow: 'hidden',
+        background: theme,
+      }}
+    >
+      <style>{`
+        .html-canvas-root,
+        .html-canvas-root * {
+          box-sizing: border-box;
+        }
+
+        .html-canvas-root {
+          width: 100%;
+          height: 100%;
+          min-width: 0;
+          min-height: 0;
+          overflow: hidden;
+        }
+
+        .html-canvas-root > * {
+          width: 100%;
+          height: 100%;
+          min-width: 0;
+          min-height: 0;
+        }
+
+        .html-canvas-root :where(img, video, canvas, svg, picture, iframe) {
+          display: block;
+          max-width: 100%;
+          max-height: 100%;
+        }
+
+        .html-canvas-root :where(img, video) {
+          object-fit: cover;
+        }
+
+        .html-canvas-root :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote) {
+          margin-block-start: 0;
+          margin-block-end: 0;
+        }
+      `}</style>
+      <div className="html-canvas-root" dangerouslySetInnerHTML={{ __html: markup }} />
+    </div>
+  )
+
+  if (!HtmlInCanvas.isSupported()) {
+    return content
+  }
+
+  return (
+    <HtmlInCanvas
+      width={width}
+      height={height}
+      durationInFrames={150}
+      pixelDensity={2}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        overflow: 'hidden',
+        background: theme,
+      }}
+    >
+      {content}
+    </HtmlInCanvas>
+  )
+}
+
+function TemplateBadge({
+  label,
+  accent,
+}: {
+  label: string
+  accent: string
+}) {
+  return (
+    <div
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: '8px 12px',
+        border: '1px solid rgba(255,255,255,0.18)',
+        background: 'rgba(2,6,23,0.55)',
+        color: '#f8fafc',
+        textTransform: 'uppercase',
+        letterSpacing: '0.2em',
+        fontSize: 11,
+        lineHeight: 1,
+      }}
+    >
+      <span
+        aria-hidden="true"
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: 9999,
+          background: accent,
+          boxShadow: `0 0 0 4px ${accent}22`,
+        }}
+      />
+      {label}
+    </div>
+  )
+}
+
+function BrowserTemplate({
+  title,
+  subtitle,
+  badge,
+  accent = '#2563eb',
+  secondaryAccent = '#0f172a',
+  runtimeWidth,
+  runtimeHeight,
+  progress,
+  sceneType,
+}: {
+  title: string
+  subtitle?: string
+  badge: string
+  accent?: string
+  secondaryAccent?: string
+  runtimeWidth: number
+  runtimeHeight: number
+  progress: number
+  sceneType: 'static' | 'animation'
+}) {
+  const portrait = runtimeHeight > runtimeWidth
+  const featureScale = 1 + (sceneType === 'animation' ? progress * 0.015 : 0)
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'grid',
+        gridTemplateRows: 'auto 1fr',
+        color: '#e2e8f0',
+        background:
+          'radial-gradient(circle at 18% 20%, rgba(59,130,246,0.22) 0%, rgba(2,6,23,0.04) 34%, rgba(2,6,23,0.08) 100%), linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%)',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 16,
+          padding: portrait ? '12px 14px' : '16px 20px',
+          background: 'rgba(15,23,42,0.96)',
+          borderBottom: '1px solid rgba(255,255,255,0.08)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ width: 10, height: 10, borderRadius: 9999, background: '#ef4444' }} />
+          <span style={{ width: 10, height: 10, borderRadius: 9999, background: '#f59e0b' }} />
+          <span style={{ width: 10, height: 10, borderRadius: 9999, background: '#22c55e' }} />
+        </div>
+        <div
+          style={{
+            flex: 1,
+            marginInline: 16,
+            padding: '10px 14px',
+            border: '1px solid rgba(255,255,255,0.12)',
+            borderRadius: 0,
+            background: 'rgba(2,6,23,0.72)',
+            color: '#cbd5e1',
+            fontSize: portrait ? 12 : 13,
+            letterSpacing: '0.04em',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+          }}
+        >
+          https://canvas.vibecuting.local/{badge.toLowerCase().replace(/\s+/g, '-')}
+        </div>
+        <TemplateBadge label={badge} accent={accent} />
+      </div>
+
+      <div
+        style={{
+          position: 'relative',
+          padding: portrait ? 16 : 22,
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : '1.1fr 0.9fr',
+          gap: portrait ? 16 : 20,
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div
+          style={{
+            display: 'grid',
+            gap: 16,
+            alignContent: 'start',
+            minWidth: 0,
+          }}
+        >
+          <div
+            style={{
+              padding: portrait ? 18 : 22,
+              border: '1px solid rgba(15,23,42,0.12)',
+              background: 'rgba(255,255,255,0.82)',
+              boxShadow: '0 20px 80px rgba(15,23,42,0.08)',
+              transform: `translate3d(0, ${(1 - progress) * 8}px, 0) scale(${featureScale})`,
+              transformOrigin: 'center center',
+            }}
+          >
+            <div style={{ display: 'grid', gap: 12, maxWidth: portrait ? '100%' : '88%' }}>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                <TemplateBadge label="Html in Canvas" accent={accent} />
+                <span style={{ fontSize: 12, letterSpacing: '0.24em', textTransform: 'uppercase', color: '#64748b' }}>
+                  Browser template
+                </span>
+              </div>
+              <h1
+                style={{
+                  margin: 0,
+                  color: '#020617',
+                  fontSize: portrait ? Math.round(runtimeHeight * 0.042) : Math.round(runtimeHeight * 0.05),
+                  lineHeight: 0.96,
+                  letterSpacing: '-0.06em',
+                }}
+              >
+                {title}
+              </h1>
+              {subtitle ? (
+                <p style={{ margin: 0, color: '#334155', fontSize: portrait ? 18 : 20, lineHeight: 1.5 }}>{subtitle}</p>
+              ) : null}
+            </div>
+            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 18 }}>
+              <button
+                style={{
+                  padding: '10px 14px',
+                  border: '1px solid rgba(2,6,23,0.12)',
+                  borderRadius: 0,
+                  background: accent,
+                  color: '#f8fafc',
+                  fontSize: 13,
+                  fontWeight: 700,
+                  letterSpacing: '0.04em',
+                }}
+              >
+                Open canvas
+              </button>
+              <button
+                style={{
+                  padding: '10px 14px',
+                  border: '1px solid rgba(2,6,23,0.12)',
+                  borderRadius: 0,
+                  background: 'rgba(15,23,42,0.04)',
+                  color: '#0f172a',
+                  fontSize: 13,
+                  fontWeight: 700,
+                  letterSpacing: '0.04em',
+                }}
+              >
+                View source
+              </button>
+            </div>
+          </div>
+
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: portrait ? '1fr' : 'repeat(3, minmax(0, 1fr))',
+              gap: 12,
+            }}
+          >
+            {[
+              { label: 'Canvas height', value: '100%' },
+              { label: 'Layering', value: 'HTML → canvas' },
+              { label: 'Fallback', value: 'DOM preview' },
+            ].map((item, index) => (
+              <div
+                key={item.label}
+                style={{
+                  padding: 14,
+                  border: '1px solid rgba(15,23,42,0.12)',
+                  background: index % 2 === 0 ? 'rgba(255,255,255,0.86)' : 'rgba(248,250,252,0.92)',
+                }}
+              >
+                <div style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#64748b' }}>{item.label}</div>
+                <div style={{ marginTop: 10, color: '#020617', fontSize: 18, fontWeight: 700 }}>{item.value}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div
+          style={{
+            position: 'relative',
+            minHeight: 0,
+            overflow: 'hidden',
+            border: '1px solid rgba(15,23,42,0.12)',
+            background:
+              'linear-gradient(160deg, rgba(15,23,42,0.08) 0%, rgba(2,6,23,0.92) 64%, rgba(59,130,246,0.22) 100%)',
+            boxShadow: '0 26px 90px rgba(15,23,42,0.16)',
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              padding: 18,
+              display: 'grid',
+              gridTemplateRows: 'auto 1fr auto',
+              gap: 16,
+            }}
+          >
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
+              <div>
+                <div style={{ fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase', color: '#94a3b8' }}>Preview</div>
+                <div style={{ marginTop: 6, color: '#f8fafc', fontSize: 18, fontWeight: 700 }}>Rendered in canvas</div>
+              </div>
+              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: '#cbd5e1', fontSize: 12 }}>
+                <span style={{ width: 8, height: 8, borderRadius: 9999, background: '#22c55e' }} />
+                Active
+              </div>
+            </div>
+
+            <div
+              style={{
+                display: 'grid',
+                gridTemplateColumns: portrait ? '1fr' : 'repeat(2, minmax(0, 1fr))',
+                gap: 12,
+                alignContent: 'start',
+              }}
+            >
+              {[
+                { title: 'Canvas fidelity', text: 'Use the browser layout and draw it directly to the output canvas.' },
+                { title: 'Live controls', text: 'Keep the HTML structure visible in Storybook when the flag is off.' },
+                { title: 'Composition-safe', text: 'Works with scene width, height, and frame data.' },
+                { title: 'Pixel density', text: 'Tune the canvas sharpness for high-DPI renders.' },
+              ].map((item) => (
+                <div
+                  key={item.title}
+                  style={{
+                    padding: 14,
+                    border: '1px solid rgba(255,255,255,0.12)',
+                    background: 'rgba(2,6,23,0.56)',
+                  }}
+                >
+                  <div style={{ color: '#f8fafc', fontSize: 15, fontWeight: 700 }}>{item.title}</div>
+                  <div style={{ marginTop: 8, color: '#cbd5e1', fontSize: 13, lineHeight: 1.55 }}>{item.text}</div>
+                </div>
+              ))}
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
+              <div style={{ color: '#94a3b8', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase' }}>HTML in Canvas</div>
+              <div style={{ color: '#e2e8f0', fontSize: 12 }}>{secondaryAccent}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function DashboardTemplate({
+  title,
+  subtitle,
+  badge,
+  accent = '#8b5cf6',
+  secondaryAccent = '#0f172a',
+  runtimeWidth,
+  runtimeHeight,
+  progress,
+  sceneType,
+}: {
+  title: string
+  subtitle?: string
+  badge: string
+  accent?: string
+  secondaryAccent?: string
+  runtimeWidth: number
+  runtimeHeight: number
+  progress: number
+  sceneType: 'static' | 'animation'
+}) {
+  const portrait = runtimeHeight > runtimeWidth
+  const barProgress = sceneType === 'animation' ? progress : 1
+  const bars = [54, 68, 42, 88, 62, 74, 36, 92, 58, 66]
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'grid',
+        gridTemplateRows: 'auto 1fr',
+        color: '#e2e8f0',
+        background:
+          'radial-gradient(circle at 16% 12%, rgba(139,92,246,0.18) 0%, rgba(2,6,23,0.08) 36%, rgba(2,6,23,0.92) 100%), linear-gradient(180deg, #020617 0%, #0f172a 100%)',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 12,
+          padding: portrait ? '14px 16px' : '18px 22px',
+          borderBottom: '1px solid rgba(255,255,255,0.08)',
+          background: 'rgba(2,6,23,0.78)',
+        }}
+      >
+        <div style={{ display: 'grid', gap: 4 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <TemplateBadge label={badge} accent={accent} />
+            <span style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#94a3b8' }}>
+              Dashboard template
+            </span>
+          </div>
+          <h1 style={{ margin: 0, fontSize: portrait ? 20 : 24, letterSpacing: '-0.04em', color: '#f8fafc' }}>{title}</h1>
+        </div>
+        <div
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: '10px 14px',
+            border: '1px solid rgba(255,255,255,0.14)',
+            background: 'rgba(15,23,42,0.72)',
+            color: '#cbd5e1',
+            fontSize: 12,
+            letterSpacing: '0.12em',
+            textTransform: 'uppercase',
+          }}
+        >
+          Live metrics
+        </div>
+      </div>
+
+      <div
+        style={{
+          padding: portrait ? 16 : 22,
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : '1.3fr 0.7fr',
+          gap: portrait ? 16 : 20,
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div
+          style={{
+            display: 'grid',
+            gap: 16,
+            minWidth: 0,
+          }}
+        >
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: portrait ? '1fr 1fr' : 'repeat(4, minmax(0, 1fr))',
+              gap: 12,
+            }}
+          >
+            {[
+              { label: 'Sessions', value: '1.28M', delta: '+12.4%' },
+              { label: 'Conversion', value: '8.7%', delta: '+1.1%' },
+              { label: 'Latency', value: '124 ms', delta: '-9 ms' },
+              { label: 'Uptime', value: '99.98%', delta: '+0.02%' },
+            ].map((item, index) => (
+              <div
+                key={item.label}
+                style={{
+                  padding: 14,
+                  border: '1px solid rgba(255,255,255,0.08)',
+                  background: index % 2 === 0 ? 'rgba(15,23,42,0.72)' : 'rgba(2,6,23,0.72)',
+                }}
+              >
+                <div style={{ color: '#94a3b8', fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase' }}>
+                  {item.label}
+                </div>
+                <div style={{ marginTop: 12, fontSize: 28, fontWeight: 800, letterSpacing: '-0.05em', color: '#f8fafc' }}>{item.value}</div>
+                <div style={{ marginTop: 8, color: accent, fontSize: 12, fontWeight: 700 }}>{item.delta}</div>
+              </div>
+            ))}
+          </div>
+
+          <div
+            style={{
+              padding: 16,
+              border: '1px solid rgba(255,255,255,0.08)',
+              background: 'rgba(2,6,23,0.72)',
+            }}
+          >
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
+              <div>
+                <div style={{ color: '#94a3b8', fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase' }}>Overview</div>
+                <div style={{ marginTop: 6, color: '#f8fafc', fontSize: 18, fontWeight: 700 }}>{subtitle ?? 'HTML rendered directly inside canvas'}</div>
+              </div>
+              <div style={{ color: '#cbd5e1', fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase' }}>
+                {Math.round(barProgress * 100)}% ready
+              </div>
+            </div>
+
+            <div
+              style={{
+                marginTop: 18,
+                height: portrait ? 240 : 300,
+                display: 'grid',
+                gridTemplateColumns: `repeat(${bars.length}, minmax(0, 1fr))`,
+                alignItems: 'end',
+                gap: 10,
+              }}
+            >
+              {bars.map((value, index) => {
+                const animatedHeight = Math.max(16, Math.round(value * (0.8 + barProgress * 0.2)))
+                return (
+                  <div
+                    key={`${index}-${value}`}
+                    style={{
+                      height: '100%',
+                      display: 'flex',
+                      alignItems: 'end',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: '100%',
+                        height: `${animatedHeight}%`,
+                        minHeight: 12,
+                        background: `linear-gradient(180deg, ${accent} 0%, ${secondaryAccent} 100%)`,
+                        border: '1px solid rgba(255,255,255,0.08)',
+                        boxShadow: '0 12px 30px rgba(15,23,42,0.24)',
+                      }}
+                    />
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+
+        <div
+          style={{
+            display: 'grid',
+            gap: 12,
+            alignContent: 'start',
+            minWidth: 0,
+          }}
+        >
+          <div
+            style={{
+              padding: 16,
+              border: '1px solid rgba(255,255,255,0.08)',
+              background: 'rgba(15,23,42,0.72)',
+            }}
+          >
+            <div style={{ color: '#94a3b8', fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase' }}>Activity</div>
+            <div style={{ display: 'grid', gap: 12, marginTop: 14 }}>
+              {[
+                'New deployment completed',
+                'Peak traffic stabilized',
+                'Background jobs cleared',
+                'Preview canvas rendered',
+              ].map((item, index) => (
+                <div
+                  key={item}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 10,
+                    paddingBottom: 12,
+                    borderBottom: index === 3 ? 'none' : '1px solid rgba(255,255,255,0.08)',
+                  }}
+                >
+                  <span style={{ width: 8, height: 8, borderRadius: 9999, background: index % 2 === 0 ? accent : '#22c55e' }} />
+                  <span style={{ color: '#e2e8f0', fontSize: 13, lineHeight: 1.5 }}>{item}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div
+            style={{
+              padding: 16,
+              border: '1px solid rgba(255,255,255,0.08)',
+              background: 'rgba(2,6,23,0.72)',
+            }}
+          >
+            <div style={{ color: '#94a3b8', fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase' }}>Canvas notes</div>
+            <p style={{ margin: '12px 0 0', color: '#cbd5e1', fontSize: 13, lineHeight: 1.6 }}>
+              Use HtmlInCanvas for crisp DOM-to-canvas rendering, while keeping a fallback HTML preview when the browser flag is unavailable.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function EditorTemplate({
+  title,
+  subtitle,
+  badge,
+  accent = '#22c55e',
+  secondaryAccent = '#0f172a',
+  runtimeWidth,
+  runtimeHeight,
+  progress,
+  sceneType,
+}: {
+  title: string
+  subtitle?: string
+  badge: string
+  accent?: string
+  secondaryAccent?: string
+  runtimeWidth: number
+  runtimeHeight: number
+  progress: number
+  sceneType: 'static' | 'animation'
+}) {
+  const portrait = runtimeHeight > runtimeWidth
+  const reveal = sceneType === 'animation' ? progress : 1
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'grid',
+        gridTemplateRows: 'auto 1fr',
+        color: '#e2e8f0',
+        background:
+          'radial-gradient(circle at 12% 12%, rgba(34,197,94,0.16) 0%, rgba(2,6,23,0.04) 38%, rgba(2,6,23,0.94) 100%), linear-gradient(180deg, #020617 0%, #0f172a 100%)',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 12,
+          padding: portrait ? '12px 14px' : '16px 20px',
+          borderBottom: '1px solid rgba(255,255,255,0.08)',
+          background: 'rgba(2,6,23,0.86)',
+        }}
+      >
+        <div style={{ display: 'grid', gap: 4 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <TemplateBadge label={badge} accent={accent} />
+            <span style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: '#94a3b8' }}>
+              Editor template
+            </span>
+          </div>
+          <h1 style={{ margin: 0, fontSize: portrait ? 20 : 24, letterSpacing: '-0.04em', color: '#f8fafc' }}>{title}</h1>
+        </div>
+        <div
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: '10px 14px',
+            border: '1px solid rgba(255,255,255,0.14)',
+            background: 'rgba(15,23,42,0.72)',
+            color: '#cbd5e1',
+            fontSize: 12,
+            letterSpacing: '0.12em',
+            textTransform: 'uppercase',
+          }}
+        >
+          Live coding
+        </div>
+      </div>
+
+      <div
+        style={{
+          padding: portrait ? 16 : 20,
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : '220px 1fr',
+          gap: portrait ? 14 : 18,
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <div
+          style={{
+            display: 'grid',
+            gap: 12,
+            alignContent: 'start',
+            padding: 14,
+            border: '1px solid rgba(255,255,255,0.08)',
+            background: 'rgba(15,23,42,0.74)',
+          }}
+        >
+          {['App.tsx', 'layout.tsx', 'theme.ts', 'preview.tsx', 'types.ts'].map((item, index) => (
+            <div
+              key={item}
+              style={{
+                padding: '10px 12px',
+                border: '1px solid rgba(255,255,255,0.08)',
+                background: index === 1 ? 'rgba(34,197,94,0.18)' : 'rgba(2,6,23,0.52)',
+                color: '#e2e8f0',
+                fontSize: 13,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 10,
+              }}
+            >
+              <span>{item}</span>
+              <span style={{ color: '#94a3b8', fontSize: 11 }}>{index + 1}</span>
+            </div>
+          ))}
+        </div>
+
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateRows: 'auto 1fr auto',
+            gap: 12,
+            minWidth: 0,
+            minHeight: 0,
+          }}
+        >
+          <div
+            style={{
+              padding: 14,
+              border: '1px solid rgba(255,255,255,0.08)',
+              background: 'rgba(2,6,23,0.76)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 12,
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: '#cbd5e1', fontSize: 12 }}>
+              <span style={{ width: 8, height: 8, borderRadius: 9999, background: '#22c55e' }} />
+              Editor ready
+            </div>
+            <div style={{ color: '#94a3b8', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
+              {Math.round(reveal * 100)}% synced
+            </div>
+          </div>
+
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: portrait ? '1fr' : '1.2fr 0.8fr',
+              gap: 12,
+              minWidth: 0,
+              minHeight: 0,
+            }}
+          >
+            <div
+              style={{
+                padding: 16,
+                border: '1px solid rgba(255,255,255,0.08)',
+                background: 'rgba(2,6,23,0.88)',
+                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+                fontSize: portrait ? 12 : 13,
+                lineHeight: 1.72,
+                color: '#cbd5e1',
+                overflow: 'hidden',
+              }}
+            >
+              <div style={{ color: '#94a3b8' }}>{'const scene = {'}</div>
+              <div style={{ marginLeft: 18 }}>{`title: "${title}",`}</div>
+              <div style={{ marginLeft: 18 }}>{`subtitle: "${subtitle ?? 'Design in canvas'}",`}</div>
+              <div style={{ marginLeft: 18 }}>{`mode: "${sceneType}",`}</div>
+              <div style={{ marginLeft: 18, color: accent }}>{`badge: "${badge}",`}</div>
+              <div style={{ color: '#94a3b8' }}>{'}'}</div>
+              <div style={{ marginTop: 14, color: '#f8fafc' }}>{'return <HtmlInCanvas />'}</div>
+            </div>
+
+            <div
+              style={{
+                display: 'grid',
+                gap: 12,
+                alignContent: 'start',
+              }}
+            >
+              {[
+                { label: 'Compilation', value: 'fast refresh' },
+                { label: 'Preview', value: 'inline canvas' },
+                { label: 'Theme', value: secondaryAccent },
+              ].map((item) => (
+                <div
+                  key={item.label}
+                  style={{
+                    padding: 14,
+                    border: '1px solid rgba(255,255,255,0.08)',
+                    background: 'rgba(15,23,42,0.72)',
+                  }}
+                >
+                  <div style={{ color: '#94a3b8', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase' }}>{item.label}</div>
+                  <div style={{ marginTop: 10, color: '#f8fafc', fontSize: 16, fontWeight: 700 }}>{item.value}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div
+            style={{
+              padding: 14,
+              border: '1px solid rgba(255,255,255,0.08)',
+              background: `linear-gradient(90deg, ${accent} 0%, rgba(15,23,42,0.72) 100%)`,
+              color: '#f8fafc',
+              display: 'flex',
+              justifyContent: 'space-between',
+              gap: 12,
+              alignItems: 'center',
+            }}
+          >
+            <span style={{ fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase' }}>Inline preview</span>
+            <span style={{ fontSize: 12 }}>{sceneType === 'animation' ? 'animated' : 'static'}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function DocsTemplate({
+  title,
+  subtitle,
+  badge,
+  accent = '#38bdf8',
+  secondaryAccent = '#0f172a',
+  runtimeWidth,
+  runtimeHeight,
+  progress,
+  sceneType,
+}: {
+  title: string
+  subtitle?: string
+  badge: string
+  accent?: string
+  secondaryAccent?: string
+  runtimeWidth: number
+  runtimeHeight: number
+  progress: number
+  sceneType: 'static' | 'animation'
+}) {
+  const portrait = runtimeHeight > runtimeWidth
+  const reveal = sceneType === 'animation' ? progress : 1
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'grid',
+        gridTemplateRows: 'auto 1fr',
+        color: '#e2e8f0',
+        background:
+          'radial-gradient(circle at 20% 10%, rgba(56,189,248,0.18) 0%, rgba(2,6,23,0.04) 40%, rgba(2,6,23,0.96) 100%), linear-gradient(180deg, #020617 0%, #0f172a 100%)',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 12,
+          padding: portrait ? '12px 14px' : '16px 20px',
+          borderBottom: '1px solid rgba(255,255,255,0.08)',
+          background: 'rgba(2,6,23,0.84)',
+        }}
+      >
+        <div style={{ display: 'grid', gap: 4 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+            <TemplateBadge label={badge} accent={accent} />
+            <span style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: '#94a3b8' }}>
+              Docs template
+            </span>
+          </div>
+          <h1 style={{ margin: 0, fontSize: portrait ? 20 : 24, letterSpacing: '-0.04em', color: '#f8fafc' }}>{title}</h1>
+        </div>
+        <div
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 8,
+            padding: '10px 14px',
+            border: '1px solid rgba(255,255,255,0.14)',
+            background: 'rgba(15,23,42,0.72)',
+            color: '#cbd5e1',
+            fontSize: 12,
+            letterSpacing: '0.12em',
+            textTransform: 'uppercase',
+          }}
+        >
+          Readme preview
+        </div>
+      </div>
+
+      <div
+        style={{
+          padding: portrait ? 16 : 22,
+          display: 'grid',
+          gridTemplateColumns: portrait ? '1fr' : '1fr 260px',
+          gap: portrait ? 16 : 20,
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        <article
+          style={{
+            padding: portrait ? 18 : 22,
+            border: '1px solid rgba(255,255,255,0.08)',
+            background: 'rgba(2,6,23,0.82)',
+            boxShadow: '0 22px 80px rgba(15,23,42,0.18)',
+            minWidth: 0,
+          }}
+        >
+          <div style={{ display: 'grid', gap: 12, maxWidth: portrait ? '100%' : '92%' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <TemplateBadge label="Html in Canvas" accent={accent} />
+              <span style={{ fontSize: 12, letterSpacing: '0.24em', textTransform: 'uppercase', color: '#64748b' }}>
+                Documentation template
+              </span>
+            </div>
+            <h2 style={{ margin: 0, color: '#f8fafc', fontSize: portrait ? 28 : 34, lineHeight: 1.04, letterSpacing: '-0.05em' }}>
+              {subtitle ?? 'Compose structured documentation directly inside a Remotion frame.'}
+            </h2>
+            <p style={{ margin: 0, color: '#cbd5e1', fontSize: portrait ? 16 : 18, lineHeight: 1.7 }}>
+              HtmlInCanvas is useful for docs-heavy scenes where headings, callouts, and references should remain crisp inside the output video.
+            </p>
+          </div>
+
+          <div
+            style={{
+              marginTop: 18,
+              display: 'grid',
+              gridTemplateColumns: portrait ? '1fr' : 'repeat(2, minmax(0, 1fr))',
+              gap: 12,
+            }}
+          >
+            {[
+              'Concept overview',
+              'Implementation notes',
+              'Checklists and callouts',
+              'Embedded references',
+            ].map((item, index) => (
+              <div
+                key={item}
+                style={{
+                  padding: 14,
+                  border: '1px solid rgba(255,255,255,0.08)',
+                  background: index % 2 === 0 ? 'rgba(15,23,42,0.72)' : 'rgba(2,6,23,0.72)',
+                }}
+              >
+                <div style={{ color: '#94a3b8', fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase' }}>
+                  Section {index + 1}
+                </div>
+                <div style={{ marginTop: 10, color: '#f8fafc', fontSize: 16, fontWeight: 700 }}>{item}</div>
+              </div>
+            ))}
+          </div>
+        </article>
+
+        <aside
+          style={{
+            display: 'grid',
+            gap: 12,
+            alignContent: 'start',
+            minWidth: 0,
+          }}
+        >
+          <div
+            style={{
+              padding: 16,
+              border: '1px solid rgba(255,255,255,0.08)',
+              background: 'rgba(15,23,42,0.72)',
+            }}
+          >
+            <div style={{ color: '#94a3b8', fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase' }}>Outline</div>
+            <div style={{ display: 'grid', gap: 10, marginTop: 14 }}>
+              {['Intro', 'Goals', 'Examples', 'API', 'Summary'].map((item, index) => (
+                <div key={item} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                  <span style={{ width: 8, height: 8, borderRadius: 9999, background: index === 0 ? accent : '#38bdf8' }} />
+                  <span style={{ color: '#e2e8f0', fontSize: 13 }}>{item}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div
+            style={{
+              padding: 16,
+              border: '1px solid rgba(255,255,255,0.08)',
+              background: 'rgba(2,6,23,0.72)',
+            }}
+          >
+            <div style={{ color: '#94a3b8', fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase' }}>Progress</div>
+            <div
+              style={{
+                marginTop: 14,
+                height: 12,
+                border: '1px solid rgba(255,255,255,0.08)',
+                background: 'rgba(255,255,255,0.06)',
+                overflow: 'hidden',
+              }}
+            >
+              <div
+                style={{
+                  width: `${Math.round(reveal * 100)}%`,
+                  height: '100%',
+                  background: `linear-gradient(90deg, ${accent} 0%, ${secondaryAccent} 100%)`,
+                }}
+              />
+            </div>
+            <p style={{ margin: '12px 0 0', color: '#cbd5e1', fontSize: 13, lineHeight: 1.6 }}>
+              A documentation layout can keep structure, references, and notes aligned while still rendering cleanly in canvas.
+            </p>
+          </div>
+        </aside>
+      </div>
+    </div>
+  )
+}
+
+export function createHtmlInCanvasScene(config: HtmlCanvasSceneConfig) {
+  const componentMetadata = defineScenePluginMetadata({
+    resourceKind: 'scene',
+    name: config.name,
+    description: `${config.description} Supports a full-bleed html fragment input.`,
+    sourceFile: config.sourceFile,
+    pluginKey: config.pluginKey,
+    tags: ['scene', 'html-in-canvas', config.template, config.aspectRatio === '16:9' ? 'landscape' : 'horizontal'],
+    aspectRatio: config.aspectRatio,
+    sceneType: 'scene',
+    sceneFamily: 'custom',
+    rootLayout: 'absolute-fill',
+    propsTypeName: 'DefaultHtmlInCanvasSceneProps',
+  })
+
+  const Scene = VideoComponent(componentMetadata)(
+    defineSceneComponent({
+      family: 'custom',
+      propsSchema: z.object({
+        sceneId: z.string().optional(),
+        sceneName: z.string().optional(),
+        title: z.string().optional(),
+        subtitle: z.string().optional(),
+        badge: z.string().optional(),
+        accent: z.string().optional(),
+        secondaryAccent: z.string().optional(),
+        textColor: z.string().optional(),
+        html: z.string().optional(),
+      }),
+      component: function HtmlInCanvasScene({
+        id,
+        name,
+        sceneId,
+        sceneName,
+        title,
+        subtitle,
+        badge,
+        accent,
+        secondaryAccent,
+        textColor,
+        html,
+      }: DefaultHtmlInCanvasSceneProps) {
+        const runtime = useRemotionSceneRuntime()
+        const sceneConfig = useSceneConfig()
+        const frame = useCurrentFrame()
+        const { fps } = useVideoConfig()
+        const progress =
+          sceneConfig.sceneType === 'animation'
+            ? spring({
+                frame,
+                fps,
+                config: { damping: 18, mass: 0.8, stiffness: 120 },
+              })
+          : 1
+        const contentTitle = title ?? (config.template === 'browser' ? 'Browser in Canvas' : 'Dashboard in Canvas')
+        const contentSubtitle =
+          subtitle ??
+          (config.template === 'browser'
+            ? 'Render a browser-style DOM tree directly into a Remotion canvas.'
+            : 'Compose dashboard UI in DOM and capture it as a canvas frame.')
+        const contentBadge = badge ?? (config.template === 'browser' ? 'Browser Canvas' : 'Dashboard Canvas')
+        const baseTheme = config.template === 'browser' ? 'rgba(248,250,252,1)' : 'rgba(2,6,23,1)'
+        const htmlMode = typeof html === 'string' && html.trim().length > 0
+
+        return (
+          <BaseRemotionScene
+            id={id ?? sceneId}
+            name={name ?? sceneName ?? contentTitle}
+            style={{
+              background:
+                config.template === 'browser'
+                  ? `linear-gradient(180deg, ${secondaryAccent ?? '#020617'} 0%, #0f172a 100%)`
+                  : `radial-gradient(circle at 50% 12%, ${accent ?? 'rgba(139,92,246,0.24)'} 0%, #020617 52%, #000000 100%)`,
+              color: textColor ?? '#f8fafc',
+              padding: htmlMode ? 0 : Math.round(runtime.height * 0.02),
+            }}
+          >
+            {htmlMode ? (
+              <HtmlMarkupSurface width={runtime.width} height={runtime.height} html={html} theme={baseTheme} />
+            ) : (
+              <HtmlCanvasSurface width={runtime.width} height={runtime.height} theme={baseTheme}>
+                {config.template === 'browser' ? (
+                  <BrowserTemplate
+                    title={contentTitle}
+                    subtitle={contentSubtitle}
+                    badge={contentBadge}
+                    accent={accent}
+                    secondaryAccent={secondaryAccent}
+                    runtimeWidth={runtime.width}
+                    runtimeHeight={runtime.height}
+                    progress={progress}
+                    sceneType={sceneConfig.sceneType}
+                  />
+                ) : (
+                  <DashboardTemplate
+                    title={contentTitle}
+                    subtitle={contentSubtitle}
+                    badge={contentBadge}
+                    accent={accent}
+                    secondaryAccent={secondaryAccent}
+                    runtimeWidth={runtime.width}
+                    runtimeHeight={runtime.height}
+                    progress={progress}
+                    sceneType={sceneConfig.sceneType}
+                  />
+                )}
+              </HtmlCanvasSurface>
+            )}
+          </BaseRemotionScene>
+        )
+      },
+    }),
+  )
+
+  return { componentMetadata, Scene }
+}
+
+const browserLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasBrowserSceneLandscape',
+  description: 'Browser-style HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/shared/default-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.browser',
+  aspectRatio: '16:9',
+  template: 'browser',
+})
+
+const browserHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasBrowserSceneHorizontal',
+  description: 'Browser-style HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/shared/default-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.browser',
+  aspectRatio: '9:16',
+  template: 'browser',
+})
+
+const dashboardLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasDashboardSceneLandscape',
+  description: 'Dashboard-style HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/shared/default-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.dashboard',
+  aspectRatio: '16:9',
+  template: 'dashboard',
+})
+
+const dashboardHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasDashboardSceneHorizontal',
+  description: 'Dashboard-style HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/shared/default-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.dashboard',
+  aspectRatio: '9:16',
+  template: 'dashboard',
+})
+
+const editorLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasEditorSceneLandscape',
+  description: 'Editor-style HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/shared/default-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.editor',
+  aspectRatio: '16:9',
+  template: 'editor',
+})
+
+const editorHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasEditorSceneHorizontal',
+  description: 'Editor-style HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/shared/default-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.editor',
+  aspectRatio: '9:16',
+  template: 'editor',
+})
+
+const docsLandscape = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasDocsSceneLandscape',
+  description: 'Docs-style HtmlInCanvas scene for 16:9 landscape previews',
+  sourceFile: 'src/core/scene/html-in-canvas/shared/default-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.docs',
+  aspectRatio: '16:9',
+  template: 'docs',
+})
+
+const docsHorizontal = createHtmlInCanvasScene({
+  name: 'DefaultHtmlInCanvasDocsSceneHorizontal',
+  description: 'Docs-style HtmlInCanvas scene for 9:16 vertical previews',
+  sourceFile: 'src/core/scene/html-in-canvas/shared/default-html-in-canvas-scene.tsx',
+  pluginKey: 'core.html-in-canvas.docs',
+  aspectRatio: '9:16',
+  template: 'docs',
+})
+
+export const DefaultHtmlInCanvasBrowserSceneLandscape = browserLandscape.Scene
+export const DefaultHtmlInCanvasBrowserSceneHorizontal = browserHorizontal.Scene
+export const DefaultHtmlInCanvasDashboardSceneLandscape = dashboardLandscape.Scene
+export const DefaultHtmlInCanvasDashboardSceneHorizontal = dashboardHorizontal.Scene
+export const DefaultHtmlInCanvasEditorSceneLandscape = editorLandscape.Scene
+export const DefaultHtmlInCanvasEditorSceneHorizontal = editorHorizontal.Scene
+export const DefaultHtmlInCanvasDocsSceneLandscape = docsLandscape.Scene
+export const DefaultHtmlInCanvasDocsSceneHorizontal = docsHorizontal.Scene
+
+export const DefaultHtmlInCanvasBrowserSceneLandscapeMetadata = browserLandscape.componentMetadata
+export const DefaultHtmlInCanvasBrowserSceneHorizontalMetadata = browserHorizontal.componentMetadata
+export const DefaultHtmlInCanvasDashboardSceneLandscapeMetadata = dashboardLandscape.componentMetadata
+export const DefaultHtmlInCanvasDashboardSceneHorizontalMetadata = dashboardHorizontal.componentMetadata
+export const DefaultHtmlInCanvasEditorSceneLandscapeMetadata = editorLandscape.componentMetadata
+export const DefaultHtmlInCanvasEditorSceneHorizontalMetadata = editorHorizontal.componentMetadata
+export const DefaultHtmlInCanvasDocsSceneLandscapeMetadata = docsLandscape.componentMetadata
+export const DefaultHtmlInCanvasDocsSceneHorizontalMetadata = docsHorizontal.componentMetadata