Advanced Presenter FX - AV Mixer

A browser-based creator studio. Mix audio and video, add dynamic subtitle overlays, use live Presenter FX, and instantly generate OpenAI-powered SEO and thumbnails.

Comment 1

Inspiration

Managing the daily upload grind of producing in-depth book summaries and manufacturing explainer videos exposed a massive bottleneck. The actual video assembly, manual syncing of multi-language subtitles, and generating optimized SEO metadata required jumping between four disconnected desktop applications. I wanted to build a unified studio where a creator can drop in assets and walk away with a publish-ready video, thumbnail, and complete SEO package in minutes.

What it does

Advanced Presenter FX is a powerful, browser-based AV mixer and creator studio. It synchronizes images, videos, and PDF slides to an audio track and exports the final product with a single click.

  • Dynamic Captions: Burns custom-styled WEBVTT subtitles directly into the video canvas.
  • Presenter FX: Adds live interactive cursor animations, zoom lenses, and drawing tools over the video.
  • Autonomous SEO: Uses OpenAI APIs to instantly extract high-ranking titles, descriptions, and tags.
  • Thumbnail Generator: Uses image generation models to build customized 1024x1024 thumbnails directly in the UI.

How we built it

The application is built entirely as a client-side web tool using React 18, TypeScript, and Tailwind CSS. The core rendering engine leverages the HTML5 Canvas API paired with the MediaRecorder API to compile and export WebM files locally. We integrated PDF.js for slide rendering and used OpenAI API endpoints (gpt-5-mini and chatgpt-image-latest) to power the metadata and visual generation.

Challenges we ran into

Managing state and frame-rate performance within the Canvas API while simultaneously layering Ken Burns animations, live Presenter FX, and subtitle parsing was technically complex. Furthermore, engineering the prompt pipeline for the SEO Studio took considerable refinement to guarantee the LLM consistently returned exactly 100-character titles and properly formatted tags that stay within YouTube's limits.

Accomplishments that we're proud of

We are incredibly proud of building a custom WEBVTT parser from scratch that reliably syncs and styles multi-language scripts. We are also proud of successfully rendering and recording the entire visual canvas locally in the browser without relying on any heavy, costly backend video processing servers.

What we learned

Building this deepened our understanding of the HTML5 Canvas and the intricacies of the MediaRecorder API. We also learned how to aggressively constrain LLM prompts to guarantee structured, predictable data outputs for the SEO tools.

What's next for Advanced Presenter FX - AV Mixer

We plan to introduce multi-track timeline editing, expand the library of live transition effects, and implement an automated AI transcription feature to generate the VTT subtitle files directly from the uploaded audio source.

Built With

Share this project:

Updates

Submission history