fix(media): smooth demo playback — video on the site, fast-decode webp in the README#444
Merged
Conversation
…p in the README The embeds turned progressively choppy: animated-webp frames are delta-encoded, so a browser that falls behind cannot skip ahead, and our lossless 2560×1440@15fps files were the slowest possible decode — the lag compounds over the loop. Two-pronged fix: - Site: <DemoMedia /> is now a <video> over a new committed demo[-dark]-clip.mp4 pair (marquee cut, ~600 KB each) — hardware decode, native frame dropping; only the active theme's video mounts (MutationObserver on .dark; a display:none video would still decode). The clip pair doubles as the X-post cut. - README (GitHub can't embed repo-hosted video): embed webps re-encoded lossy q90 @ 12 fps — several-times-faster decode, visually equivalent on this content, and half the bytes (871/816 KB 1x, 1.9/1.8 MB @2x). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The demo embeds started smooth and turned progressively choppy — on the docs homepage and in the README. Animated-webp frames are delta-encoded, so a browser that falls behind cannot skip frames; our embeds were lossless 2560×1440 @ 15 fps (the slowest decode path), so decode lag compounded over the loop. Retina screens (picking the @2x file) were hit hardest.
Fix
<DemoMedia />is now a<video>over a new committeddemo[-dark]-clip.mp4pair (marquee cut, 617/549 KB) — hardware-decoded, drops frames natively, cannot accumulate lag. Only the active theme's video mounts (MutationObserver on.dark— a hidden video would still download + decode). Verified playing on the homepage (playing: true). The clip pair doubles as the parked ~20 s X-post cut.Freshness gate, copy step, gitignore negations, and docs/media/README.md updated;
encodeMp4gained a crf parameter andencodeWebpfps/quality options. Squash-merge to keep asset generations out of main's history.🤖 Generated with Claude Code