How to convert a CSS animation to MP4
Turn a CSS @keyframes animation into an H.264 MP4, with a copy-paste loader example and the maths for making the loop line up.
Guides
Step-by-step walkthroughs for specific jobs, written around the Fix42 tools that do them. Each guide covers one task from start to finish, with the settings that matter, examples you can copy, and the limits you are likely to run into.
There are 11 guides so far, in three groups: turning HTML and CSS animations into video and GIFs, making text and braille art that survives being pasted into chat apps, and exporting conversations from AI chat services. For shorter notes and opinion pieces, see the blog; for the full list of tools, see all tools.
HTML and CSS animation to video
Screen recording a web animation gives you a cursor, dropped frames and a fuzzy crop. These guides show how to render the animation frame by frame instead, and how to size and time it for where it is going.
Tools used: HTML to Video, HTML to GIF
How to turn a CSS animation into a GIF
Make GIFs for GitHub READMEs, pull requests, Slack and email, with a skeleton shimmer example and ways to keep the file small.
Record an HTML animation as video without a screen recorder
Why frame-by-frame rendering beats OBS or QuickTime for web animations, using a CSS typewriter effect as the example.
Convert HTML5 banner ads to video
Reuse animated display banners as MP4 for social ads and signage, including clickTag cleanup and sizing advice.
Turn code and web animations into Instagram and TikTok videos
Render vertical 1080x1920 videos for Reels, TikTok and Shorts, with a dev-tip template and notes on safe areas.
Text and braille art
Text art looks fine where you made it and falls apart where you paste it. These guides explain how braille art is built and what each chat platform does to long or wide messages.
Tools used: Braille ASCII Art, Cool Text Art Generator
How braille art works, and how to make your own
Each braille character is a 2x4 grid of dots, which is what makes it useful for pictures. Covers the image-to-braille process and how to get good contrast.
Text art for Discord
Posting braille and ASCII art in Discord: the 2000-character limit, the code-block trick and how it renders on mobile.
ASCII and text art for Twitch, YouTube and game chats
What fits in Twitch and YouTube chat limits, how wrap width affects copypasta, and which sizes get past spam filters.
Exporting AI chats
ChatGPT, Claude and Grok make it easy to share a conversation and hard to keep a clean copy of one. These guides cover saving your own chats in formats you can search and reuse.
Tools used: AI Chat Extractor
How to export a ChatGPT conversation
Save one ChatGPT conversation as Markdown, text, JSON or PDF from a share link or by pasting, without requesting a full account export.
How to save a Claude conversation as Markdown or PDF
Claude has no per-chat download button. This covers share links, paste mode and what to keep in mind about privacy.
Archiving your AI chats: formats, tools and what to keep
A simple monthly routine for keeping the AI conversations worth keeping, and how Markdown, PDF and JSON compare as archive formats.