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.