Building a Retro CRT Terminal Website with WebGL and GitHub Copilot (Claude Opus 4.5)

Source: Dev.to

Introduction

During the holidays I discovered cool-retro-term, an open‑source terminal that mimics the look of old cathode‑ray‑tube (CRT) displays. Its retro sci‑fi atmosphere reminded me of the Alien and Fallout universes, and I wanted to give my personal website a similar feel.

The original project is written in QML and C++, languages I’m not familiar with. I wondered whether it could be ported to web technologies using WebGL or Emscripten. GitHub Copilot suggested the WebGL route because it presented fewer technical challenges.

Approach

I have experience with Three.js, so I started by asking Claude to implement the static CRT frame in Three.js, ignoring terminal emulation for the moment. This gave me a solid foundation without overwhelming complexity.

Adding Text

Next, I instructed Claude to render basic text from a hard‑coded file using a retro font within the Three.js scene.

Visual Effects

I then migrated the visual effects from the original OpenGL shaders to WebGL. The effects include:

• Bloom – glow that makes bright areas bleed into surrounding pixels
• Brightness – overall luminosity control
• Chroma Color – color tinting to simulate phosphor characteristics
• RGB Shift – slight separation of color channels to mimic CRT color misalignment
• Screen Curvature – warps the image to simulate curved glass monitors
• Burn‑In – simulates phosphor burn‑in from static images left on screen too long
• Flickering – subtle brightness fluctuations like real CRT displays
• Glowing Line – scanning beam effect moving across the screen
• Horizontal Sync – simulates horizontal sync issues causing image distortion
• Jitter – small random movements to simulate signal instability
• Rasterization – visible scan lines characteristic of CRT displays
• Static Noise – animated noise/grain

During this phase I encountered visual bugs (e.g., incorrect screen‑reflection positioning). Iterative trial‑and‑error with Claude resolved these issues without introducing new problems.

Terminal Emulation

Once the frame and effects were functional, I replaced the hard‑coded text with the output of Xterm.js, a web‑based terminal front‑end used in tools like Visual Studio Code. I didn’t need a real backend terminal, so I asked Claude to create a simple emulator supporting basic commands such as clear, ls, cd, and cat.

Games

With the terminal in place, I expanded the experience by adding text‑based games:

• Pong
• Tetris
• Snake
• Minesweeper
• Space Invaders
• Arkanoid

Most games worked perfectly on the first attempt; a few had minor visual glitches that were quickly fixed by describing the issues to Claude.

Audio and Video Support

I also wanted the terminal to play audio and video files, similar to ffplay. Claude implemented an ffplay command that renders video with all previously created CRT effects.

Refactoring and Publishing

The final step was to separate the codebase:

• Library code – the WebGL retro terminal renderer
• Application code – the terminal emulator and games

Claude refactored the project into a standalone npm module for the renderer, completing the task in a single attempt.

Results and Cost

• Total implementation time: 10–15 hours
• Without an LLM, the work would have taken several weeks.
• Copilot usage: ~50 % of a monthly Business token allotment ($21/month), costing roughly $10.50 for the entire project.
• The cost savings and speed demonstrate the power of LLMs as development tools, especially for unfamiliar technologies like shader programming.

Links

• Live demo:
• Source code: