During the holidays, I was browsing the internet when I came across cool-retro-term, an open-source terminal that mimics the visuals of old cathode ray tube (CRT) displays.
I loved the look of it—it has an awesome retro sci-fi atmosphere that reminds me of the Alien and Fallout fictional universes. I thought it would be amazing if I could make my personal website look like that. I took a look at the source code and quickly realized that it's implemented using QML and C++. I'm not experienced with either, so I wondered if it would be possible to port it to web technologies using either WebGL or Emscripten. I asked GitHub Copilot, and it advised me to try the WebGL route because there were fewer technical challenges involved.
Understanding the Architecture
I have no experience with QML, but I have worked with Three.js in the past. I don't have a deep understanding of how shaders work internally, but with the help of GitHub Copilot, I was able to understand the architecture of the original source code. I cloned the repo, added a new web directory, and started providing instructions to Claude. The original application has two sets of shaders: the first one handles the static frame, and the second one is a series of effects that are influenced by the current time.
Step 1: The Static Frame
I started by asking Claude to implement the static frame using Three.js while ignoring the terminal emulation for now. This gave me a foundation to build upon without getting overwhelmed by complexity.
Step 2: Text Rendering
The second step was to ask Claude to render some basic text from a hardcoded text file in the Three.js scene using the appropriate retro font.
Step 3: Migrating the Visual Effects
Then I started to migrate the visual effects—starting with the background noise and then moving on to the other effects:
- Bloom – A glow effect that makes bright areas bleed into surrounding pixels
- Brightness – Controls the overall luminosity of the display
- Chroma Color – Adds color tinting to simulate phosphor characteristics
- RGB Shift – Separates color channels slightly to mimic CRT color misalignment
- Screen Curvature – Warps the image to simulate the curved glass of old monitors
- Burn-In – Simulates phosphor burn-in from static images left on screen too long
- Flickering – Adds subtle brightness fluctuations like real CRT displays
- Glowing Line – Renders a scanning beam effect moving across the screen
- Horizontal Sync – Simulates horizontal sync issues causing image distortion
- Jitter – Adds small random movements to simulate signal instability
- Rasterization – Renders visible scan lines characteristic of CRT displays
- Static Noise – Adds animated noise/grain to the image
At this point, there were some visual bugs that required a bit of trial and error until the LLM was able to fix them without introducing new issues. The main one was a problem related to the position of the screen reflections.
Step 4: Integrating Xterm.js
Once I was able to get the terminal frame and the effects ported from OpenGL to WebGL, I asked the LLM to replace the hardcoded text with the output of Xterm.js. Xterm.js is an open-source project designed to be a web-based front-end for terminals. It's used in tools like Visual Studio Code because VS Code is a web application that runs inside Electron—Xterm.js is the front-end within VS Code that accesses a real terminal instance on your machine.
In my case, I don't need a real terminal, so I asked Claude to create a terminal emulator with a bunch of basic commands such as clear, ls, cd, and cat.
Step 5: Building Games
At this point, everything was almost complete, so I asked Claude to implement multiple text-based games. I implemented games like Pong, Tetris, Snake, Minesweeper, Space Invaders, and Arkanoid—and most of them worked almost perfectly on the first attempt. Some of the games experienced minor visual issues, but I was able to solve everything by describing the issue in detail to Claude and what I thought was the root cause.
Step 6: Adding Media Playback with ffplay
I also wanted to add support for playing audio and video files directly in the terminal, similar to how ffplay works in a real terminal. I asked Claude to implement an ffplay command that could render video with all the effects previously implemented.
Step 7: Refactoring and Publishing
The final step was to ask Claude to refactor the code to clearly separate the library code (the WebGL retro terminal renderer) from my application code (the terminal emulator and games). The goal was to publish the WebGL terminal renderer as a standalone npm module, and Claude was able to do it with zero issues in just one attempt.
Conclusion
Overall, the entire implementation took around 10–15 hours. Without an LLM, it would have taken me several weeks. I think this project has been an interesting way to demonstrate how powerful LLMs can be as development tools—especially when working with unfamiliar technologies like shader programming.
By the end of the experiment, I consumed about 50% of my monthly GitHub Copilot for Business tokens ($21/month), which means the entire project cost me roughly $10.50. When you consider that this would have taken weeks of work otherwise, the cost savings enabled by Claude Opus are absolutely insane.
If you're curious, you can check out the result at https://remojansen.github.io/ or browse the source code on GitHub.
Top comments (0)