Build a Kinetic Archive Loop Video in HTML

I will provide multiple portrait images in a 3:4 aspect ratio. Create a fast-paced kinetic motion-graphics loop from them as a single, self-contained HTML file that plays immediately in a browser and is suitable for screen recording or MP4 export.

Visual direction:
- Use a black background and an archival, technical aesthetic, with monospaced labels, barcodes, globe motifs, and crosshairs.
- Mix black-and-white portrait photographs with typography cards.

Implement the visual effects using a 2D canvas:
- `cut`: clean cut.
- `rgb`: RGB channel-separation glitch, with horizontal offsets and subtle vibration.
- `slice`: randomly displace horizontal slices.
- `zoom`: slowly punch in over the beat.
- `flash`: invert colors using difference compositing.
- Add subtle film grain and a vignette over the whole composition.
- Fill the 3:4 frame using cover cropping, and embed the images in the HTML as base64.

Build the timeline as an array of beats, each containing an image, an effect, and a duration in milliseconds. Use this progression: intro → burst 1 → strobe → burst 2 → rush (very rapid-fire cuts) → loop. Vary beat durations from very fast 60 ms cuts to holds of about 500 ms to create rhythm.

Make the loop appear seamless: keep the opening and ending holds similar in length to intermediate beats (about 450 ms); do not use long intro or outro holds.

Never place a portrait of a person directly next to another portrait of a person. This rule also applies during the rapid rush: always place at least one typography or object card between portraits. Ensure the last and first beats also do not put portraits next to each other.

End on an authentication or archive-style card. If I provide a closing frame (${closing-frame}), use it as the final frame.