The visible feature was only the surface
Creating a customized typing animation for a README normally requires manual SVG/CSS editing and hosting the result.
The system also had to respect concrete constraints. Public embeds depend on deployment availability. Successful responses cache for 24 hours. There is no documented request-rate/abuse-control layer and SVG text must be safely escaped/validated.
My role covered developer-tool design and full-stack engineering, with responsibility for developer workflow, api surface, and deployment.
I turned the constraints into boundaries
React visual editor and preset state; URL/query serialization with Zod validation; server SVG generator returning explicit image and cache headers.
Encode configuration in the URL so results are shareable and stateless.
Generate SVG on demand instead of persisting images, trading service availability for zero asset storage.
Return an error SVG with HTTP 422 for invalid options so image consumers still receive a diagnosable visual response.
The key decision: Encode configuration in the URL.
The implementation had to prove the model
I delivered the work across the full path: Built multi-line typography/animation controls and live preview. Implemented Markdown/HTML/direct-URL output. Added validated server-side SVG generation and escaping. Configured cache headers and browser-local presets.
The result is concrete: Users can compose animated text visually. Embed it through Markdown, HTML, or an image URL. Reproduce designs from query parameters. Receive explicit validation behavior without stored generated files.
The senior engineering lesson was that solving the visible workflow is only half the job. The architecture must also make constraints, failure modes, evidence, and ownership explicit enough for the next change to remain safe.