Retro Lofi Radio

• 

  Retro Lofi Radio

Inspiration

We wanted to blend the calming, nostalgic vibe of lofi music with the charm of vintage technology — specifically the glowing green flicker of old CRT monitors. The idea was to create a fully offline, stylized radio experience that feels like booting up a 1980s computer and tuning into a chillwave signal from the past.

What it does

Retro Lofi Radio is a browser-based music player that plays a curated playlist of public domain lofi tracks from local .mp3 files. It simulates a 64×64 pixel green terminal screen, complete with a CRT-style boot-up animation, scanlines, phosphor glow, and looping music playback. The interface displays animated “Now Playing” text, genre and mood tags, and license info — all pulled from a structured JSON file.

How we built it

We used HTML, CSS, and JavaScript with no frameworks. All music is loaded locally from the /public directory, and track metadata is parsed from a static playlist.json file. CSS transforms and filters are used to simulate the CRT visuals, and we created a power-on animation that mimics how old monitors flickered to life.

Challenges we ran into

Simulating authentic CRT effects with only CSS and without GPU-heavy shaders

Ensuring the JSON parser supported full mood and genre metadata for each track

Handling browser autoplay restrictions on audio

Balancing pixel-perfect visuals with modern browser scaling quirks

Accomplishments that we're proud of

Recreating a convincing retro terminal aesthetic entirely in the browser

Building a fully offline, zero-dependency experience

Respecting public domain licensing while making the music feel curated and elevated

Keeping the code clean, lightweight, and easily customizable

What we learned

Advanced CSS filters, pixel scaling techniques, and visual compositing

How to structure and read a metadata-rich JSON file for audio playback

That simple visual nostalgia can create a powerful emotional effect when done right

What's next for Retro Lofi Radio

Add keyboard controls and (maybe) fake command-line interaction (play, next, theme)

Build a visualizer with ASCII-style waveforms

Let users import their own playlists by dropping a JSON file

Create "tape deck" themes: amber, vector green, grayscale, etc.

Package it as a PWA so users can install it and use it fully offline

Built With

• css
• html5
• javascript
• json