apollo
Fast WebGL ASCII art for images, text, webcam.
Description
Apollo is a fast, themeable ASCII art studio. Convert images, text, and webcam streams into crisp ASCII with edge-aware rendering, semantic color tokens, and an always-dark preview canvas. Includes a light/dark theme toggle with a small View Transitions animation and polished scrollbars. I had the idea in my notes for a while and wanted a quick project for the weekend so I decided to make it, nothing fancy but looks nice.
The UI in my opinion looks slick, pretty happy with how it turned out.
The UI in my opinion looks slick, pretty happy with how it turned out.
Technologies
React 19, Vite, TypeScript, Tailwind , Radix UI, lucide-react, TanStack Router, WebGL ASCII renderer, View Transitions API. Everything is handled client side meaning no privacy issues for user images and stuff.
Things Learned
Some WebGL and a couple of optimizations tricks here and there to allow for consistent performance with the live webcam rendering. As well as edge detection for the ASCII rendering.
Something fun was that for text to ASCII I decided the best way of doing it was to use a font and a canvas to render the text and then use the canvas to get the ASCII art. I was also able to use the canvas to get the ASCII art instead of using something like ascii-art npm package.
Something fun was that for text to ASCII I decided the best way of doing it was to use a font and a canvas to render the text and then use the canvas to get the ASCII art. I was also able to use the canvas to get the ASCII art instead of using something like ascii-art npm package.
Gallery
