Spaces:
Runtime error
Runtime error
| import { AbsoluteFill, Audio, Sequence, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion"; | |
| import { FPS, type ExplainerLongProps } from "../schema"; | |
| import { theme } from "../theme"; | |
| import { Captions, Logo, ProgressBar, SceneCard } from "./shared"; | |
| import { Starfield } from "./Starfield"; | |
| const TITLE_S = 3; | |
| export function explainerDuration(props: ExplainerLongProps): number { | |
| return Math.round((TITLE_S + props.scenes.reduce((s, sc) => s + sc.durationS, 0)) * FPS); | |
| } | |
| function TitleCard({ title, accent, name }: { title: string; accent: string; name?: string }) { | |
| const frame = useCurrentFrame(); | |
| const { fps } = useVideoConfig(); | |
| const s = spring({ frame, fps, config: { damping: 16 } }); | |
| const line = interpolate(frame, [10, 40], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }); | |
| return ( | |
| <AbsoluteFill style={{ justifyContent: "center", padding: "0 160px" }}> | |
| <h1 | |
| style={{ | |
| fontFamily: theme.display, | |
| fontSize: 96, | |
| lineHeight: 1.05, | |
| color: theme.white, | |
| opacity: s, | |
| transform: `translateY(${(1 - s) * 30}px)`, | |
| textShadow: `0 0 50px ${accent}88`, | |
| }} | |
| > | |
| {title} | |
| </h1> | |
| <div style={{ width: `${line * 420}px`, height: 5, background: accent, boxShadow: `0 0 24px ${accent}`, marginTop: 40 }} /> | |
| {name && ( | |
| <p style={{ fontFamily: theme.mono, fontSize: 30, marginTop: 36, color: "rgba(255,255,255,0.7)" }}>{name}</p> | |
| )} | |
| </AbsoluteFill> | |
| ); | |
| } | |
| /** 16:9 explainer: a title card, then one card per storyboard scene over narration with captions. */ | |
| export function ExplainerLong(props: ExplainerLongProps) { | |
| const accent = props.brand.accent ?? theme.blue; | |
| let cursor = TITLE_S * FPS; | |
| return ( | |
| <AbsoluteFill> | |
| <Starfield accent={accent} count={220} /> | |
| <Sequence durationInFrames={TITLE_S * FPS}> | |
| <TitleCard title={props.title} accent={accent} name={props.brand.name} /> | |
| </Sequence> | |
| {props.scenes.map((scene, i) => { | |
| const from = cursor; | |
| const dur = Math.round(scene.durationS * FPS); | |
| cursor += dur; | |
| return ( | |
| <Sequence key={i} from={from} durationInFrames={dur}> | |
| <AbsoluteFill style={{ padding: "0 140px" }}> | |
| <SceneCard scene={scene} accent={accent} scale={0.95} /> | |
| </AbsoluteFill> | |
| </Sequence> | |
| ); | |
| })} | |
| <Sequence from={TITLE_S * FPS}> | |
| {props.audioUrl && <Audio src={props.audioUrl} />} | |
| <Captions words={props.captions} accent={accent} fontSize={46} bottom={90} /> | |
| </Sequence> | |
| <ProgressBar accent={accent} height={8} /> | |
| <Logo url={props.brand.logoUrl} size={80} inset={50} /> | |
| </AbsoluteFill> | |
| ); | |
| } | |