Spaces:
Runtime error
Runtime error
| import { AbsoluteFill, Audio, Sequence, spring, useCurrentFrame, useVideoConfig } from "remotion"; | |
| import { FPS, type ShortVerticalProps } from "../schema"; | |
| import { theme } from "../theme"; | |
| import { Captions, Logo, ProgressBar, SceneCard } from "./shared"; | |
| import { Starfield } from "./Starfield"; | |
| const HOOK_S = 2; // hook lands in the first 2 seconds | |
| export function shortVerticalDuration(props: ShortVerticalProps): number { | |
| return Math.round((HOOK_S + props.scenes.reduce((s, sc) => s + sc.durationS, 0)) * FPS); | |
| } | |
| function Hook({ text, accent }: { text: string; accent: string }) { | |
| const frame = useCurrentFrame(); | |
| const { fps } = useVideoConfig(); | |
| const s = spring({ frame, fps, config: { damping: 14 } }); | |
| return ( | |
| <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", padding: 80 }}> | |
| <h1 | |
| style={{ | |
| fontFamily: theme.display, | |
| fontSize: 92, | |
| lineHeight: 1.05, | |
| color: theme.white, | |
| textAlign: "center", | |
| transform: `scale(${0.85 + s * 0.15})`, | |
| opacity: s, | |
| textShadow: `0 0 40px ${accent}aa`, | |
| }} | |
| > | |
| {text} | |
| </h1> | |
| </AbsoluteFill> | |
| ); | |
| } | |
| export function ShortVertical(props: ShortVerticalProps) { | |
| const accent = props.brand.accent ?? theme.blue; | |
| let cursor = HOOK_S * FPS; | |
| return ( | |
| <AbsoluteFill> | |
| <Starfield accent={accent} /> | |
| <Sequence durationInFrames={HOOK_S * FPS}> | |
| <Hook text={props.hook} accent={accent} /> | |
| </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}> | |
| <SceneCard scene={scene} accent={accent} /> | |
| </Sequence> | |
| ); | |
| })} | |
| {/* Narration and caption timings start with the first scene, after the hook. */} | |
| <Sequence from={HOOK_S * FPS}> | |
| {props.audioUrl && <Audio src={props.audioUrl} />} | |
| <Captions words={props.captions} accent={accent} /> | |
| </Sequence> | |
| <ProgressBar accent={accent} /> | |
| <Logo url={props.brand.logoUrl} size={96} inset={70} /> | |
| </AbsoluteFill> | |
| ); | |
| } | |