Repository navigation
Replace the 12MB money video with a canvas animation - #44
Merged
Merged
Conversation
money.webm was 12MB for a six-second celebration. Deferring it with preload="none" fixed the page weight but moved the cost somewhere worse: the download began at the moment of the celebration, so a donor on a slow connection got their confetti late or not at all -- exactly the wrong moment to be waiting on 12MB. It is now drawn on a canvas: falling banknotes with sway, rotation and a fade-out, sized to the viewport so a phone is not buried and a desktop does not look sparse. About 6kB of inline JS, nothing downloaded, and it starts on the frame it is called. Notes spawn spread across and above the viewport rather than all above it. The first version had them start off-screen, which left a beat of empty screen before anything fell -- visible as a canvas that was shown but painting nothing. Dollars only. The first pass rained yen, euros and pounds alongside dollars, which is just noise next to a price in USD. prefers-reduced-motion is handled inside the component, so the donation flow no longer has to check it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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.
money.webmwas 12MB for a six-second celebration.Deferring it with
preload="none"fixed the page weight, but moved the cost somewhere worse: the download began at the moment of the celebration. A donor on a slow connection got their confetti late, or not at all — the worst possible moment to be waiting on 12MB.Now
Drawn on a canvas: falling banknotes with sway, rotation and a fade-out, count scaled to the viewport so a phone isn't buried and a desktop doesn't look sparse.
prefers-reduced-motionis handled inside the component, so the donation flow no longer checks it.Two things found by testing rather than reading
The
public/media/directory is gone, and the build confirms zero references to the old file.🤖 Generated with Claude Code