Introducing Scanlines

Congrats, you made it! And whether you landed here from my humble, plebeian, GitHub, or if you stumbled across this from the “World Wide Web” 🌈, welcome friend.

I’ve been wanting to build a hugo theme from scratch for a while now. There’s a ton of unique themes out there but none of them quite captured what I was after. Most of them are clean, modern, or purpose-built — and that’s fine — but I wanted something with more character… Something that makes you go “ooh and aah”… Something that exudes borderline “wtf is this” vibes… Something that feels like sitting in front of an old terminal at 2am with a Guy Fawkes mask…

So I built #vibedcoded Scanlines, an open-source Hugo theme inspired by the DEC VT220 and VT100 terminals from the early 1980s. If you’re reading this, you’re looking at it.

Why a Terminal Theme?

The VT220 was introduced in 1983 and stayed in production until 1998 — a fifteen-year run. Its unique amber phosphor display, clean typography, and no-nonsense interface made it one of the most iconic terminals ever built. There’s a reason people still emulate it.

I wanted to try and capture that aesthetic without futzing around with JS, esoteric libraries, and dependencies. That meant doing the research, matching real phosphor wavelengths for the color schemes, understanding how scanlines actually work on a CRT (they’re static, not animated), and getting the glow right based on P3 phosphor persistence. (*cough* and asking Claude “are you sure” a bunch of times for what it proposed…)

What Makes It Different

No JavaScript

Every visual effect — scanlines, phosphor glow, screen flicker, vignette, curvature — is pure CSS/SCSS. No JavaScript frameworks, no special build tools, no runtime dependencies. The theme ships with self-hosted fonts and zero external requests.

Historically Accurate Effects

The CRT effects aren’t just decorative. They’re based on actual VT220 hardware characteristics:

• Scanlines are static, like real phosphor row gaps on a 60Hz CRT
• Phosphor glow simulates P3 amber persistence with multi-layer text-shadow
• Vignette follows the cos⁴ brightness falloff pattern of real CRT electron beams
• Screen curvature matches the subtle convex glass of a VT220 display

Real Phosphor Color Schemes

Four color schemes based on actual CRT phosphor types:

You can also define fully custom colors if the presets don’t fit your style.

Everything Is Configurable

All settings live under a single params.scanlines namespace in your hugo.toml. Toggle effects on and off, adjust glow intensity, swap fonts between Glass TTY VT220 and Fira Code, choose between blog and profile homepage modes — it’s all there.

1
2
3
4
5
6

[params.scanlines.effects]
  enabled = true
  scanlines = true
  glow = true
  vignette = true
  flicker = false

Accessibility First

Despite the retro aesthetic (and numerous ways to make your site harder to read), accessibility isn’t an afterthought:

• Respects prefers-reduced-motion at the OS level
• All effects can be disabled via config
• High contrast mode available
• Semantic HTML with proper ARIA labels
• Keyboard-navigable with VT220-style reverse-video focus indicators

The Stack

• Hugo Extended for SCSS processing
• Glass TTY VT220 font for authentic terminal typography
• Pure CSS for all visual effects and interactions
• No external dependencies — fully self-contained

Try It

Scanlines is open source and available on GitHub. The quickest way to get started:

1

hugo mod init github.com/your-username/your-site

Add to your hugo.toml:

1
2
3

[module]
  [[module.imports]]
    path = "github.com/wthouse/scanlines"

Then run:

1
2

hugo mod get -u
hugo server

Check out the GitHub repo for full documentation, configuration options, and an example site similar to what you’re looking at right now.

> END OF TRANSMISSION_