motion-canvas icon indicating copy to clipboard operation
motion-canvas copied to clipboard

Add speaker notes system (proof of concept included)

Open Wokarol opened this issue 8 months ago • 1 comments

Description Speaker notes provide an option to show some extra information on a secondary screen that helps with presenting. It's commonly supported in other programs like PowerPoint and Google Slides. In my opinion it's crucial to making a good presentation.

PowerPoint and Google Slides also provide preview of the next and previous slides. Tho I am unsure how hard it would be to do that for Motion Canvas and that sub-feature isn't the highest priority.

Proposed solution The feature should open a new tab with a parameter to change the selected UI to a speaker note UI. Using params over url paths should ensure that the presentation can still be exported to a HTML file.

The API could just expose a second parameter to beginSlide or it could expose a separate setNotes in case the notes should follow the animation.

Considered alternatives The alternatives to this would be having a PDF open or having notes on paper. But those options don't work that seamlessly

Additional context To ensure the feature wouldn't be too hard to implement, I did a proof of concept to check the viability of BroadcastChannel in a React app. However, I do not have enough in-depth knowledge about the structure of Motion Canvas to implement it right now in the actual application.

https://github.com/user-attachments/assets/d8ce81fc-150d-48d5-91d0-2554294d7ef6

The code for the example is split into two parts, the Observing and Source components https://gist.github.com/Wokarol/2f219a69e94d9701676a205003ee288e

The components use Mantine and should be self-contained. Also, as seen in the video above. This approach should work no matter the order at which the pages where loaded.

Wokarol avatar Mar 24 '25 12:03 Wokarol

Of course, if need be I can help with implementation (If I will be able to)

Wokarol avatar Mar 24 '25 13:03 Wokarol