video-js

Define scenes as React components with durations in a SCENE_DURATIONS map, then drive playback with the useVideoPlayer hook. Use Framer Motion for element animations, staggered entrances, and AnimatePresence for scene transitions, composing everything in a 16:9 full-viewport container.

Videos should stay under roughly two minutes, with most pieces running 30 to 60 seconds. Longer videos become much harder to export through the recording pipeline, so the duration should be sized to the content rather than maximized.

No, this is not a video editor. It cannot trim, splice, or perform timeline-based editing of existing footage. Attached video clips can only be used as visual elements inside animations; for editing tasks, a full-stack video editing application is required.

Bare absolute paths like src="/videos/hero.mp4" fail because the app is served at a subpath. Always prefix public asset references with import.meta.env.BASE_URL, for example src={`${import.meta.env.BASE_URL}videos/hero.mp4`}, for all video, image, and CSS url() references.

Generate an instrumental track matching the total runtime computed from SCENE_DURATIONS, save it under public/audio, and wire an audio element in VideoTemplate that seeks to each scene's start offset on scene changes. Use declarative muted={muted} rather than setting audio.muted in an effect.

Slideshows happen when each scene is static centered text that fades in and out with nothing persisting between scenes. Fix this by layering background, midground, and foreground elements, keeping persistent elements outside AnimatePresence that transform across scenes, and varying animation timing per element.