This content originally appeared on dbushell.com (blog) and was authored by dbushell.com (blog)
Trump’s National Design Studio has an executive order to “modernize the interfaces that serve everyday citizens”. That means rich/white people (but not the ‘disabled’ kind). The US government had digital service agencies that cared about a performant and accessible web until they got the DOGE treatment.
The NDS’ latest website trumpcard.gov is a Next.js disasterclass. Vercel’s CEO Guillermo Rauch thinks an endorsement by a friend of Epstein is… a good thing?
Anyway, Trump invites you to “Submit Your Appl 🦅 tion”.
This side-eying American Bald Eagle is a 579 frame animation. Each frame is a 1671×1300 pixel PNG weighing on average 30 KB each. Frames 261 through 320, where the eagle is looking straight forward, are replaced by frame 320 to save bandwidth. Despite this valiant effort the total size of these PNG files is 16.7 megabytes.
PNG frames are requested by a Web Worker and saved using the CacheStorage API. The worker returns blob: URLs for each frame. The useEffect hook is used (very carefully) to trigger requestAnimationFrame to update an img elements source.
<img alt="Eagle animation frame" src="blob:https://trumpcard.gov/5cd1fa4e-72ea-4c6e-babe-332602533c17">And that is how you get 16.7 MBs of freedom.
Alternate text is seemingly used as a comment for developers.
Optimisations
Eagle-eyed readers will have noticed the eagle’s body is a static image. The PNG frames only contain the head which is no larger than 400×400 in the centre. A quick crop and squoosh suggests a 20% saving with no quality loss. Using a lossy codec like AVIF would allow for anywhere between 50–80% smaller images with little perceptual quality loss.
Just use a video?
I’m guessing the animation trickery is done to superimpose the eagle over the text “Submit Your Application”. Is it worth the cost? No. Just use a video!
You could just make the entire thing a video including the text (like my screen recording above). This would limit the responsive design and the initial text transition but would be much smaller than 16.7 MB.
To retain separation of elements a video codec with alpha transparency can be used (see CSS-Tricks, Jake Archibald). WebM/VP9 works in Chrome and Firefox and HEVC works for Safari/iOS. A quick test returns 500–800 KB depending on codec and quality.
<video autoplay loop muted playsinline preload="metadata" aria-label="whatever">
<source src="eagle-head.mov" type="video/quicktime">
<source src="eagle-head.webm" type="video/webm">
</video>Using the muted HTML attribute allows autoplay to work in most browsers.
These are rough numbers but suffice it to say a PNG based animation is expensive. Then again, if you’re in the market for a $1 million dollar card you can probably afford this too.
Decapitating America’s “national bird” is not the only sin committed by the National Design Studio. Trump’s gold card website is a treasure trove of bad development. View source and see what fun you can find. And remember, for facist-friendly hosting™, think Vercel.
Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.
This content originally appeared on dbushell.com (blog) and was authored by dbushell.com (blog)
dbushell.com (blog) | Sciencx (2025-09-22T15:00:00+00:00) How Much Does Freedom Cost?. Retrieved from https://www.scien.cx/2025/09/22/how-much-does-freedom-cost/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.