[crcatala-vps]

Summary

• README: adds an 18-second animated demo (docs/assets/demo.svg) under the one-line description. It shows fl up printing a short link, an agent on another machine fetching it with curl -sI https://… (200), the link expiring (410 Gone) and fl refresh re-opening the same URL. Styling matches the landing page: near-black, volt yellow, Inter Black and JetBrains Mono.
• ARCHITECTURE.md: adds a 21-second diagram that draws itself (docs/assets/how-it-works.svg) at the top of section 2, above the existing ASCII diagram. It shows your machine, your Cloudflare account (Worker, private R2, Registry) and the agent, and walks through upload, fetch, expiry and refresh.

Technical details

• Format: each file is a single SVG animated with CSS @keyframes only. There is no JavaScript, because GitHub renders README images through <img>, which runs CSS animation but never scripts. Both loop on their own.
• Fonts: subset to the glyphs actually used and embedded as base64 WOFF2 data URIs. An <img> SVG can't load external fonts, so the text renders the same everywhere without depending on system fonts. Sizes are 73 KB (demo) and 84 KB (diagram).
• Glyphs: characters missing from the font subsets (✓, →) are drawn as paths or left out.
• Font licensing: all embedded fonts are under the SIL Open Font License 1.1 (Inter, JetBrains Mono, Instrument Serif, IBM Plex Mono). Each subset keeps its copyright notice and OFL license URL in the font metadata, and each SVG starts with a comment crediting the fonts and linking the OFL.
• README heading: the logo now sits inline in the <h1> (align="top"). I checked this with GitHub's markdown API and its README stylesheet.
• Reduced motion: under prefers-reduced-motion: reduce, every animation is paused at a representative moment using a negative animation-delay. The demo shows the live link being fetched; the diagram shows the full picture with GET 200. Without this, those viewers would get the nearly blank first frame.
• Accessibility: both images have descriptive alt text, and each SVG has a <title>/aria-label.
• How they were made: generated by a small Node script that turns a timeline written in seconds into keyframe percentages. Each was checked frame by frame in headless Chromium. The generator and the 1080p60 MP4 exports are kept outside the repo.

Testing

• Rendered contact sheets and individual stills in Chromium across both timelines, including the reduced-motion stills.
• Parsed both files as strict XML, which <img> SVGs require.
• prettier --check README.md docs/ARCHITECTURE.md passes.
• Not yet checked: playback in Safari and Firefox, and the animation on the rendered GitHub README. The rich diff on this PR shows it.

🤖 Generated with Claude Code