This commit introduces a complete multi-page presentation system for the 20251012 event.
Key features include:
- **Page Structure:** Establishes the page flow with an entry point, a main cover scene, a committee list, and
individual speech video pages.
- **Real-time Chroma Key:** Implements a canvas-based green screen effect to composite a video onto a background image.
A control panel allows for real-time adjustment of keying parameters, position, and scale.
- **Unified Navigation:** A new `nav.js` script enables seamless navigation between pages using keyboard (arrow keys,
Enter), touch swipes, and on-screen buttons. The navigation logic follows a predefined sequence (entry -> main ->
committee -> speeches).
- **Dynamic Content:** The committee list page dynamically generates its content from a JavaScript data source.
This commit overhauls the display page by replacing the luminance-based keying with a more robust chroma key (green
screen) algorithm for cleaner video cutouts.
A new visual theme has been implemented, featuring:
- Custom fonts for titles and poems.
- A main title, subtitle, and vertical poems styled with Tailwind CSS.
- Reorganization of assets into dedicated `assets` and `fonts` directories.
- Updated video source to a green screen version and adjusted canvas parameters accordingly.
This commit introduces a new interactive demo that performs real-time video keying using HTML5 Canvas.
The implementation processes video frames pixel by pixel to make dark areas transparent, simulating a chroma key effect.
The keyed video is then composited over a background image.
Features:
- An interactive control panel to adjust keying (threshold, softness) and transformation (position, scale, rotation,
opacity) parameters in real-time.
- Keyboard shortcuts for resetting parameters ('R') and toggling the control panel ('C').
- Graceful handling of potential cross-origin errors when processing video frames.
